css — display

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】 文档以整理记录为主，如有错误，欢迎指出哟，大家一起来学习...