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都可设置