display

display规定生成的框的类型.

inline

行内框

• 如果有inline框在同一行, 不换行
• inline框的宽度就是它包含的文字或图片的宽度, 不可改变. 设置它的width, height, line-height和marin-top, margin-bottom都不会生效

block

块级框通常总是独占一行, 并尽可能撑满容器(和宽度一致, width默认100%)

inline-block

inline-block框则既可以设置宽高, 又能同行.

none

一些特殊元素的默认 display 值是none, 例如 script. display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素.

它和 visibility 属性不一样. 把 display 设置成 none 不会保留元素本该显示的空间, 但是 visibility: hidden; 还会保留.

其它

• 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
• marker

各元素的默认display

每个元素都有一个默认的display值, 通常是 block 或 inline. 一个 block 元素通常被叫做块级元素. 一个 inline 元素通常被叫做行内元素.

References

• css-display