CSS BOX类型和display属性

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

块极BOX的特征是从新的一行开始内容, 并且能包含其他块级BOX和行内级BOX.

行内级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属性覆盖.
例如:

<div style="display:none">
    内容不会显示
    <p style="display:block">此内容一样不会显示</p>
</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增强布局模块定义