Loading... ## display属性排版网页元素 ### 语法 ```css 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属性排版网页元素 ### 语法 ```css display : 属性值; ``` 属性值的取值范围 * left 元素向左浮动。 * right 元素向右浮动。 * none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 * inherit 规定应该从父元素继承 float 属性的值。 ## 清除浮动 ### 语法 ```css clear : 属性值; ``` **属性值的取值范围** * left 在左侧不允许浮动元素 * right 在右侧不允许浮动元素 * both 在左、右两侧不允许浮动元素 * none 默认值。允许浮动元素出现在两侧 ## 使用四种防止父级边框塌陷的清除浮动的方法 ### 浮动元素后面加空块级元素 演示案例： ```html <div style="clear:both; padding:0; margin: 0;"></div> <!-- 此处是为了演示方便,推荐写成类样式 --> ``` ### 手动设置父元素的高度(不推荐) ### 父级添加overflow属性 **演示案例：** ```html #content { overflow: hidden; .... } ``` **overflow的取值范围** * visible 默认值。内容不会被修剪，会呈现在盒子之外 * hidden 内容会被修剪，并且其余内容是不可见的 * scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 * auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 ### 使用伪类 (推荐) **演示案例：** ```css #content:after{ content: ''; /*在clear类后面添加内容为空*/ display: block; /*把添加的内容转化为块元素*/ clear: both; /*清除这个元素两边的浮动*/ } ``` ### 清除浮动的方法小结 1️⃣ 清除浮动，防止父级边框塌陷的四种方法 * 浮动元素后面加空的块级元素 * 简单，空块级元素会造成HTML代码冗余 2️⃣ 设置父元素的高度 * 简单，元素固定高会降低扩展性 3️⃣ 父级添加overflow属性 * 简单，下拉列表框的场景不能用 4️⃣ 父级添加伪类after * 写法比上面稍微复杂一点，但是没有副作用，推荐使用 --- <div class="tip inlineBlock info simple"> ▶️ 开始学习下一章: [HTML从入门到精通 - 定位](https://jbea.cn/archives/521.html) </div> 最后修改：2022 年 08 月 31 日 © 允许规范转载 赞 都滑到这里了，不点赞再走！？
