CSS盒模型的类型
CSS把盒模型分为两种基本形态：Block（块状）和Inline（内联，也有翻译为“行内”）。在默认状态下，块状元素的宽度为100％，而且后面隐藏附带有换行符，使块状元素始终占据一行。符合标准的常用块状元素如下表：
| 块 状 元 素 |
说 明 |
| address |
表示特定信息，如地址、签名、作者、文档信息。一般显示为斜体效果 |
| blockquote |
表示文本中的一段引用语。一般为缩进显示 |
| div |
表示通用包含块，没有明确的语义 |
| dl |
表示定义列表 |
| fieldset |
表示字段集，显示为一个方框，用来包含文本和其他元素 |
| form |
说明所包含的控件是某个表单的组成部分 |
| h1-h6 |
表示标题，其中h1表示一级标题，字号最大，h6表示最小级别标题，字号最小 |
| hr |
画一条横线 |
| noframes |
包含对于那些不支持 FrameSet元素的浏览器使用的HTML |
| noscript |
指定在不支持脚本的浏览器中显示的HTML |
| ol |
编制有序列表 |
| p |
表示一个段落 |
| pre |
以固定宽度字体显示文本，保留代码中的空格和回车 |
| table |
表示所含内容组织成含有行和列的表格形式 |
| ul |
表示不排序的项目列表 |
| li |
表示列表中的一个项目 |
| legend |
在FieldSet元素绘制的方框内插入一个标题 |
内联元素没有高度和宽度，因此也就没有固定的形状，定义它的width和height属性无效。内联元素可以在行内自由流动，但它会遵循盒模型基本规则，如可以定义边界、补白和边框，可以定义背景。它的最小内容单元也会呈现矩形形状，但它显示的高度和宽度只能根据所包含内容的高度和宽度来确定。有人把块状元素比作硬木盒子，而把内联元素比作随意变形的皮纸袋子，这还是挺形象的。符合标准的常用内联元素如下：
| 内 联 元 素 |
说 明 |
| a |
表示超链接 |
| abbr |
标注内部文本为缩写，用title属性标示缩写的全称，在非IE浏览器中会以下点划线显示，IE不支持 |
| acronym |
表示取首字母的缩写词，一般显示为粗体，部分浏览器支持 |
| b |
指定文本以粗体显示 |
| bdo |
用于控制包含文本的阅读顺序，如<bdo dir="rtl">this fragment is in english</bdo>，浏览器会从右到左显示文本 |
| big |
指定所含文本要以比当前字体稍大的字体显示 |
续表
| 内 联 元 素 |
说 明 |
| br |
插入一个换行符 |
| button |
指定一个容器，可以包含文本，显示为一个按钮 |
| cite |
表示引文，以斜体显示 |
| code |
表示代码范例，以等宽字体显示 |
| dfn |
表示术语，以斜体显示 |
| em |
表示强调文本，以斜体显示 |
| i |
指定文本以斜体显示 |
| img |
插入图像或视频片断 |
| input |
创建各种表单输入控件 |
| kbd |
以定宽字体显示文本 |
| label |
为页面上的其他元素指定标签 |
| map |
包含客户端图像映射的坐标数据 |
| object |
插入对象 |
| q |
分离文本中的引语 |
| samp |
表示代码范例 |
| script |
指定由脚本引擎解释的页面中的脚本 |
| select |
表示一个列表框或者一个下拉框 |
| small |
指定内含文本要以比当前字体稍小的字体显示 |
| span |
指定内嵌文本容器 |
| strike |
带删除线显示文本 |
| strong |
以粗体显示文本 |
| sub |
说明内含文本要以下标的形式显示，比当前字体稍小 |
| sup |
说明内含文本要以上标的形式显示，比当前字体稍小 |
| textarea |
多行文本输入控件 |
| tt |
以固定宽度字体显示文本 |
| var |
定义程序变量，通常以斜体显示 |
盒模型的显示类型可以使用display属性来显式定义。任何元素都可以通过display属性改变默认显示类型，因此也会改变该元素所对应的网页布局结构。
display属性共有18个选项值，详细说明如下：
l block：块状显示，在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。
l none：隐藏显示，这与visibility:hidden;声明不同，display:none;声明不会为被隐藏的元素保留位置。
l inline：内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。
l inline-block：内联显示，但是元素的内容以块状显示，行内其他内联元素还会显示在同一 行内。
l compact：紧凑的块状显示，或基于内容之上的内联显示。
l marker：在容器对象之前或之后显示，该属性值必须与:after和:before伪元素一起使用。
l inline-table：具有内联特征的表格显示。
l list-item：具有块状特征的列表项目显示，并可以添加可选项目标志。
l run-in：块状显示或基于内容之上的内联显示。
l table：具有块状特征的表格显示。
l table-caption：表格标题显示。
l table-cell：表格单元格显示
l table-column：表格列显示。
l table-column-group：表格列组显示。
l table-header-group：表格标题组显示。
l table-footer-group ：表格页脚组显示。
l table-row：表格行显示。
l table-row-group：表格行组显示。
更详细说明可以参考CSS参考手册。如果单从布局角度来分析，这些显示类型都可以划归为block和inline两种基本显示形态，其他类型都是这两种类型的特殊显示。其中真正能够应用并获得所有浏览器支持的取值只有4个：block、none、inline、list-item。
none属性值表示隐藏并取消盒模型，这样元素所包含的内容就不会被浏览器解析和显示，同样这个盒子所包含的任何元素都会被浏览器忽略，不管它们是否被声明为其他属性。
list-item属性值表示列表项目，其实质上也是块状显示，不过是一种特殊的块状类型，它增加了缩进和项目符号。
另外，还有一些比较有用的显示类型，如table、table-cell、inline-block、inline-table等，它们在特殊布局中具有重要的实用价值，但限于IE 6及更低版本浏览器对这些属性值的不支持，因此限制了它们的优势被普及应用。
[摘抄自《CSS商业网站布局之道》]