display 属性可以设置元素的外部和内部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现（块级或行内元素）；元素的内部显示类型可以控制其子元素的布局（flex、grid 等）。

块级元素、行内元素、行内块元素的区别：

块级元素：独占一行，元素前后都会自动换行。设置宽高起作用。如 <div>、<p>、<hn>、<ul>、<li> 等。

行内元素：不会换行，与其他行内元素位于同一行，设置宽高不起作用。如 <span>、<a>、<em>、<u>、<i>、<b> 等。

行内块元素：它们既能够并排显示，也能够设置宽高。如 <img>、表单元素等。

行内元素设置上下外边距无效，左右外边距有效。

行内元素设置上下内边距，只对自身有效，不会撑开父元素，也不会对周围元素的布局产生任何影响。设置左右内边距有效。
<div>我是顶部顶部顶部顶部</div>
<span style="padding: 20px;">行内元素</span>
<div>我是底部底部底部底部</div>

常规情况下，块级元素和内联元素的嵌套规则：

块级元素，可以嵌套块级元素，也可以嵌套内联元素。
<div><div></div></div> // 正确（块级嵌套块级）
<div><span></span></div>   // 正确（块级嵌套内联）
行内元素，只能嵌套内联元素，不能嵌套块级元素。
<span><a></a></span>  // 正确（内联嵌套内联）
<span><div></div></span>   // 错误（内联嵌套块级）
部分块级元素，不能嵌套块级元素，只能嵌套内联元素。如 p、hn。
<p><div></div></p> // 错误，在浏览器上不会嵌套，而是展开显示，且下面会多出来一个空白的 p 标签（特殊块级标签只能嵌套内联标签）
但是，标准毕竟只是标准，不规范的写法也是可能通过浏览器认证的。

`display: none;`：

隐藏元素，元素不会被显示，不占据文档空间。

visibility: hidden;，也可以隐藏元素，但是仍然占据文档空间。

`display: block;`：

将元素转换为块级元素。

`display: inline;`：

将元素转换为行内元素。

`display: inline-block;`：

将元素转换为行内块元素。

将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。使其既具有 block 的宽度高度特性又具有 inline 的同行特性。

`display: flex;`：

将对象作为弹性伸缩盒显示。

 .parent {display: flex;}.children {width: 100px;height: 100px;background: antiquewhite;}<div class="parent"><div class="children"></div>
</div>

`display: inline-flex;`：

将对象作为内联块级弹性伸缩盒显示。

display: flex 和 display: inline-flex 的区别：

 .parent {display: inline-flex;}.children {width: 100px;height: 100px;background: antiquewhite;}<div class="parent"><div class="children"></div>
</div>

`display:grid;`：

`display:table;`：

目前，在大多数开发环境中，已经基本上不用 <table> 元素来做网页布局了，取而代之的是 div+css。

使用 <table> 布局很有多的缺点：

用 div+css 编写的文件大小比用 <table> 写出来的要小；

<table> 必须在页面完全加载后才显示，没有加载完毕前， <table> 为一片空白；而 div 是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示；

非表格内容用 <table> 来装，不符合标签语义化要求，不利于 SEO；

<table> 的嵌套性太多，用 div 代码会比较简洁。

display:table 系列几乎是和 table 系的元素相对应的：

display:table：此元素会作为块级表格来显示，表格前后带有换行符，类似于 <table>。
display:inline-table：此元素会作为内联表格来显示，表格前后没有换行符，类似于 <table>。
display:table-caption：此元素会作为一个表格标题来显示，类似于 <caption>。
display:table-header-group：此元素会作为一个或多个行的分组来显示，类似于 <thead>。
display:table-footer-group：此元素会作为一个或多个行的分组来显示，类似于 <tfoot>。
display:table-row-group：此元素会作为一个或多个行的分组来显示，类似于 <tbody>。
display:table-column-group：此元素会作为一个或多个列的分组来显示，类似于 <colgroup>。
display:table-row：此元素会作为一个表格行显示，类似于<tr>。
display:table-column：此元素会作为一个表格列显示，类似于<col>。
display:table-row：此元素会作为一个表格单元格显示，类似于<td>。

.table {display: table;
}
.row {display: table-row;
}
.cell {border: 1px solid #484952;padding: 5px;display: table-cell;
}<div class="table"><div class="row"><div class="cell">小马</div><div class="cell">小猪</div></div><div class="row"><div class="cell">小狗</div><div class="cell">小羊</div></div>
</div>

`display:list-item;`：

将元素作为列表来显示。

.list {display: list-item;list-style:inside square;
}<div class="list">1111111</div>
<div class="list">2222222</div>

《三》CSS 中的 display 属性相关推荐

详解CSS中的display属性
上周使用layer.tips('提示信息'.'#id'):含有id的元素设置display:none后,提示信息弹出框位置错位了,百度后找的以下原因: 应该是含有id的元素脱离文档流造成的. 参考:h ...
css中的display属性值：table，table-row，table-cell
table:此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row:此元素会作为一个表格行显示(类似 <tr>). table-cell: ...
HTML: css中的display属性
目录 display: none 未使用display: none前使用display: none后 display: inline 未使用inline之前: 使用display: inline之后 ...
css中的display属性之li元素
li元素 li元素是一个块级元素,display值默认为 block 当我们把display值改为inline后,li元素以水平菜单的样式显示补充:display与 visibility属性不同, ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
【CSS 定位之 display 属性】
CSS 定位之 display 属性 1. display 属性: 设置元素的显示类型 / 框的类型 (元素和子元素的布局) ⑴ 设置元素的显示类型 ( 框的类型 ) ⑵ 元素的显示类型 ⑶ 显 ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

《三》CSS 中的 display 属性

`display: none;`：

`display: block;`：

`display: inline;`：

`display: inline-block;`：

`display: flex;`：

`display: inline-flex;`：

`display:grid;`：

`display:table;`：

`display:list-item;`：

《三》CSS 中的 display 属性相关推荐

最新文章

热门文章

《三》CSS 中的 display 属性

display: none;：

display: block;：

display: inline;：

display: inline-block;：

display: flex;：

display: inline-flex;：

display:grid;：

display:table;：

display:list-item;：

《三》CSS 中的 display 属性相关推荐

最新文章

热门文章

`display: none;`：

`display: block;`：

`display: inline;`：

`display: inline-block;`：

`display: flex;`：

`display: inline-flex;`：

`display:grid;`：

`display:table;`：

`display:list-item;`：