1.定义
display用于页面布局，设置元素如何被显示。
值：none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit
2.分类
（1）block（块级元素）
特点：
-
独占一行；
-
宽、高、行高以及内外边距都可设置；
-
宽度缺省是它的容器的100%，除非设定一个宽度，即使设置了宽度,仍然是独占一行。
-
它可以容纳内联元素和其他块元素
常见的块级元素有：
h1~h6 | div | ul | ol | dl | dt | li | p | form | table (一系列标签)...
块级元素不支持 vertical-align
（2）inline（行内元素）
特点：
-
内容撑开宽度；
-
不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行；
-
设置width和height属性无效；
-
代码换行被解析成空格；
-
关于margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
常见的行内元素有：
a | b | br | em | i | label| map | pre | span | strong ...
行内元素不支持：
background-position | clear | clip | height | max-height | min-height | width | max-width | min-width | overflow | text-align | text-indent | padding-top | padding-bottom | margin-top | margin-bottom
（3）inline-block（行内块）
特点：
-
不设置宽度时，内容撑开宽度
-
非独占一行
-
支持宽高
-
代码换行被解析成空格
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）设置inline-block属性，使其既具有block的可设置宽度和高度特性又具有inline的同行特性
常见的行内块元素有：
audio | canvas | iframe | img | video ...
行内元素不支持：clear
（4）none
特点： 隐藏元素并脱离文档流
visibility: hidden虽然会隐藏元素，但是位置会保留
（5）list-item
特点： 与块级元素类似
（6）table
特点：
-
不设置宽度时，宽度由内容撑开
-
独占一行
-
支持宽高
-
默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性
（7）inline-table
特点：
-
不设置宽度时，宽度由内容撑开
-
非独占一行
-
支持宽高
-
默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性
###【注意】###
对于display为table和inline-table，若处于分隔边框模型即border-collapse:separate时，margin和padding都可设置；若处于合并边框模型即border-collapse:collapse，只可设置margin
（8）table-cell
特点：
-
不设置宽度时，宽度由内容撑开
-
非独占一行
-
支持宽高
-
垂直对齐
-
同级等高
-
display:table-cell的元素不可以设置margin，但可以设置padding
（9）table-caption
特点：
-
不设置宽度时，宽度由内容撑开
-
独占一行
-
支持宽高
-
display:table-caption的元素margin和padding都可设置
【MARK】 文档以整理记录为主，如有错误，欢迎指出哟，大家一起来学习...
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
