BOX类型会影响呈现和布局, 基本的BOX类型有两种: 块级(block-level)和行内级(inline-level). 事实上还有其他类型的BOX(如table, list-item等), 不过最终都会当作块级BOX或者行内级BOX来处理.
块极BOX的特征是从新的一行开始内容, 并且能包含其他块级BOX和行内级BOX.
行内级BOX是那些不能形成新的内容块的元素. 它不会从新行开始, 但能包含其他行内级BOX和数据.
| BOX类型 | 对应的元素 |
|---|---|
| block | html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre 下面是HTML5新增的元素: article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section |
| list-item | li |
| none | head |
| table | table |
| table-row | tr |
| table-header-group | thead |
| table-row-gruop | tbody |
| table-footer-group | tfoot |
| table-column | col |
| table-column-group | colgroup |
| table-cell | td, th |
| table-caption | caption |
| inline-block | input, select |
| inline | 其他元素默认值都是inline |
使用CSS的display属性可以定义BOX类型, 也可以改变一个元素的默认BOX类型.
当定义样式属性display:none时, 这个BOX与其所包含的其他BOX会在浏览器上消失, 它并不是生成一个不可见的BOX, 而是根本不生成BOX(即该元素对布局没有影响), 派生的元素也不生成任何BOX, 该行为不能由派生元素设置的diplay属性覆盖.
例如:
- <div style="display:none">
- 内容不会显示
- <p style="display:block">此内容一样不会显示</p>
- </div>
| 属性值 | 功能描述 |
|---|---|
| block | 指定为块级BOX |
| compact | 这个属性定义的BOX类型要基于上下文环境来确定, 要么作为块级BOX, 要么作为标记型BOX |
| none | 隐藏BOX. 与visibility属性的hidden值不同, 其不为被隐藏的BOX保留其物理空间 |
| inline | 指定为行内级BOX |
| inline-block | 将BOX呈现为行内级BOX, 但是BOX的内容作为块级BOX呈现. 与旁边的行内级BOX会被呈现在同一行内 |
| run-in | 这个属性定义的BOX类型要基于上下文环境来确定, 要么生成块级BOX, 要么生成行内级BOX |
| marker | 标记型BOX, 指定的内容在容器BOX之前或者之后, 一般作为标记. 要使用此参数, BOX必须和::after及::before伪元素一起使用. IE浏览器未支持 |
| inline-table | 将表格显示为无前后换行的行内级BOX或者行内级容器. IE浏览器未支持 |
| list-item | 指定为列表项BOX, 并可以添加可选项目标志 |
| ruby | ruby结构型BOX |
| ruby-base | bugy基型BOX |
| ruby-text | ruby文本型BOX |
| ruby-base-group | bugy基容器型BOX, 包含多个ruby基 |
| ruby-text-group | bugy文本容器型BOX, 包含多个ruby文本 |
| table | 将BOX作为块级元素的表格显示. IE浏览器未支持 |
| table-caption | 将BOX作为表格标题显示. IE浏览器未支持 |
| table-cell | 将BOX作为表格单元格显示. IE浏览器未支持 |
| table-column | 将BOX作为表格列显示. IE浏览器未支持 |
| table-column-group | 将BOX作为表格列组显示. IE浏览器未支持 |
| table-header-group | 将BOX作为表格标题组显示 |
| table-footer-group | 将BOX作为表格脚注组显示 |
| table-row | 将BOX作为表格行显示. IE浏览器未支持 |
| table-row-group | 将BOX作为表格行组显示. IE浏览器未支持 |
| <template> | 自定义的模板, 由CSS3增强布局模块定义 |
