BOX类型会影响呈现和布局, 基本的BOX类型有两种: 块级(block-level)和行内级(inline-level). 事实上还有其他类型的BOX(如table, list-item等), 不过最终都会当作块级BOX或者行内级BOX来处理.

HTML元素以及对应默认的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属性覆盖.
例如:

1. <div style="display:none">
2. 内容不会显示
3. <p style="display:block">此内容一样不会显示</p>
4. </div>

display属性的属性值及其功能描述

属性值 功能描述 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增强布局模块定义