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商业网站布局之道》]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章