display属性排版网页元素

语法

display : 属性值;

属性值的取值范围

• none 此元素不会被显示。
• block 此元素将显示为块级元素，此元素前后会带有换行符。
• inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
• inline-block 行内块元素。（CSS2.1 新增的值）
• inherit 规定应该从父元素继承 display 属性的值。
• flex 弹性盒子模型【New】
• list-item 此元素会作为列表显示。
• run-in 此元素会根据上下文作为块级元素或内联元素显示。
• table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
• inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
• table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
• table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
• table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
• table-row 此元素会作为一个表格行显示（类似 <tr>）。
• table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
• table-column 此元素会作为一个单元格列显示（类似 <col>）
• table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
• table-caption 此元素会作为一个表格标题显示（类似 <caption>）
• compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
• marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

块元素、行内元素以及行内块元素的特点

• 块元素: 独占一行(不管元素的内容、宽度有多少,该元素前后会换行),可以设定元素的宽度和高度
• 行内元素: 内容决定元素的宽度,不能手动设定宽度和高度,元素不会独占一行
• 行内块元素: 具有块元素和行内元素的特点,能够设定元素的宽度和高度,但是不会独占一行,行内块元素会解析元素前后空格

使用float属性排版网页元素

语法

display : 属性值;

属性值的取值范围

• left 元素向左浮动。
• right 元素向右浮动。
• none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
• inherit 规定应该从父元素继承 float 属性的值。

清除浮动

语法

clear : 属性值;

属性值的取值范围

• left 在左侧不允许浮动元素
• right 在右侧不允许浮动元素
• both 在左、右两侧不允许浮动元素
• none 默认值。允许浮动元素出现在两侧

使用四种防止父级边框塌陷的清除浮动的方法

浮动元素后面加空块级元素

演示案例：

<div style="clear:both; padding:0; margin: 0;"></div>    <!-- 此处是为了演示方便,推荐写成类样式 -->

手动设置父元素的高度(不推荐)

父级添加overflow属性

演示案例：

#content { 
    overflow: hidden;  
    .... 
}

overflow的取值范围

• visible 默认值。内容不会被修剪，会呈现在盒子之外
• hidden 内容会被修剪，并且其余内容是不可见的
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

使用伪类 (推荐)

演示案例：

#content:after{
     content: '';          /*在clear类后面添加内容为空*/
     display: block;      /*把添加的内容转化为块元素*/
     clear: both;         /*清除这个元素两边的浮动*/
}

清除浮动的方法小结

1️⃣ 清除浮动，防止父级边框塌陷的四种方法

• 浮动元素后面加空的块级元素
• 简单，空块级元素会造成HTML代码冗余

2️⃣ 设置父元素的高度

• 简单，元素固定高会降低扩展性

3️⃣ 父级添加overflow属性

• 简单，下拉列表框的场景不能用

4️⃣ 父级添加伪类after

• 写法比上面稍微复杂一点，但是没有副作用，推荐使用