- A+
所属分类：Web前端
✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记
display
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- display: block 块元素 inline 行内元素 inline-block 是块元素 但是可以内联 在一行！ none 消失！ --> <!-- 可以实现行内元素排列方式 大部分情况下是使用float--> <style> div{ width: 100px; height: 100px; border: 1px solid red; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style> </head> <body> <div> <p>块级元素：独占一行</p> <p>h1～h6 p div 列表...</p> </div> <div> <p>行内元素：不独占一行</p> <p>span a img strong...</p> <p>行内元素可以被包含在块级元素中 反之不行</p> </div> <div>div块元素</div> <span>span行内元素</span> </body> </html> float
div{ margin: 10px; padding: 5px; } #father{ border: 1px black solid; /*overflow: hidden;*/ } #father:after{ content: ''; display: block; clear: both; } .layer01{ background: rebeccapurple; display: inline-block; float: left; } .layer02{ background: red; display: inline-block; float: left; } .layer03{ background: blue; display: inline-block; float: left; /*浮动情况下保持块元素*/ clear: both; } /* clear right 右侧不允许有浮动元素 clear left 左侧不允许有浮动元素 clear both 两侧不允许有浮动元素 clear none */ .layer04{ background: yellow; display: inline-block; float: left; clear: both; } .clear{ clear: both; margin: 0; padding: 0; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="father"> <div class="layer01"><img src="images/1.jpg" alt="【前端】CSS3学习笔记（四）——浮动" alt="">左浮</div> <div class="layer02"><img src="images/2.png" alt="【前端】CSS3学习笔记（四）——浮动" alt="">左浮</div> <div class="layer03"><img src="images/3.png" alt="【前端】CSS3学习笔记（四）——浮动" alt="">左浮</div> <div class="layer04"> 浮动的盒子可以向左浮动 也可以向右浮动 直到它的外边缘碰到包含框或另一个浮动盒子为止 </div> <!-- <div class="clear"></div>--> <div> <h2>父级边框塌陷问题</h2> <ul> <li>增加父级元素高度<br>（简单 元素假设有了固定的高度 就会被限制）</li> <li>增加一个空的div标签 清除浮动<br>（简单 代码中尽量避免空div）</li> <li>在父级元素中增加一个overflow: hidden;<br>（简单 下拉的一些场景避免使用）</li> <li>在父类添加一个伪类 after（写法稍复杂 没有副作用 推荐使用）</li> </ul> </div> </div> </body> </html> overflow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #content{ width: 200px; height: 150px; overflow: scroll; } </style> </head> <body> <div id="content"> <img src="images/1.jpg" alt="【前端】CSS3学习笔记（四）——浮动"> <p>滚动条：overflow: scroll;</p> </div> </body> </html> 对比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div><h2>对比</h2> <ul> <li>display<br> 方向不可以控制</li> <li>float<br> 浮动起来的话会脱离标准文档流</li> </ul> </div> </body> </html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14981128.html
版权所有，如需转载请注明出处。
