CSS 把盒模型分为两种基本形态:Block(块状)和 Inline(内联,也有翻译为“行内”)。在默认状态下,块状元素的宽度为 100%,而且后面隐藏附带有换行符,使块状元素始终占据一行。符合标准的常用块状元素如下表:
块状元素 说 明
address 表示特定信息,如地址、签名、作者、文档信息。一般显示为斜体效果
blockquote 表示文本中的一段引用语。一般为缩进显示
div 表示通用包含块,没有明确的语义
dl 表示定义列表
fieldset 表示字段集,显示为一个方框,用来包含文本和其他元素
form 说明所包含的控件是某个表单的组成部分
h1h6 表示标题,其中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 个选项值,详细说明如下:
block:块状显示,在元素后面添加换行符,也就是说其他元素不能在其后面并列显示。
none:隐藏显示,这与 visibility:hidden;声明不同,display:none;声明不会为被隐藏的元素保
留位置。
inline:内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示。
inlineblock:内联显示,但是元素的内容以块状显示,行内其他内联元素还会显示在同一
行内。
compact:紧凑的块状显示,或基于内容之上的内联显示。
marker:在容器对象之前或之后显示,该属性值必须与:after 和:before 伪元素一起使用。
inlinetable:具有内联特征的表格显示。
listitem:具有块状特征的列表项目显示,并可以添加可选项目标志。
runin:块状显示或基于内容之上的内联显示。
table:具有块状特征的表格显示。
tablecaption:表格标题显示。
tablecell:表格单元格显示
tablecolumn:表格列显示。
tablecolumngroup:表格列组显示。
tableheadergroup:表格标题组显示。
tablefootergroup:表格页脚组显示。
tablerow:表格行显示。
tablerowgroup:表格行组显示。
更详细说明可以参考 CSS 参考手册。如果单从布局角度来分析,这些显示类型都可以划归为block 和 inline 两种基本显示形态,其他类型都是这两种类型的特殊显示。其中真正能够应用并获得所有浏览器支持的取值只有 4 个:block、none、inline、listitem。
none 属性值表示隐藏并取消盒模型,这样元素所包含的内容就不会被浏览器解析和显示,同样这个盒子所包含的任何元素都会被浏览器忽略,不管它们是否被声明为其他属性。
listitem属性值表示列表项目,其实质上也是块状显示,不过是一种特殊的块状类型,它增加了缩进和项目符号。
另外,还有一些比较有用的显示类型,如 table、tablecell、inlineblock、inlinetable等,它们在特殊布局中具有重要的实用价值,但限于 IE 6 及更低版本浏览器对这些属性值的不支持,因此限制了它们的优势被普及应用。