一般来说,了解默认情况下哪些元素与哪些类型相对应是很关键的，其关系简列于表2中:
| 元素 | 类型 | 子类型 | 说明 |
|---|---|---|---|
| a | inline | special | |
| abbr | inline | phrase | |
| acronym | inline | phrase | |
| address | block | 一般与p的行为方式类似 | |
| blockquote | block | 在!DOCTYPE声明为Strict时，必须包含至少一个块元素 | |
| body | 封装了整个文档画布；一般会有 10px 的边距（在 IE, Firefox 和 Safari中）或是填充距（在Opera中），像素大小视所用的 screen 媒体而定 | ||
| cite | inline | phrase | |
| div | block | ||
| em | inline | phrase | |
| fieldset | block | 默认情况下一般按照 border: 1px black; 渲染 | |
| form | block | ||
| h1 … h6 | block | heading | |
| input | inline | formctrl | |
| img | inline | special | |
| label | inline | formctrl | |
| li | block | 文档类型定义中没有指明该元素的类型，但该元素可包含块元素和内联元素；完成版的 CSS2.1 推荐为列表项留出了 display 值 | |
| ol | block | list | |
| p | block | 只能包含内联元素；一般会渲染有顶边距和底边距 | |
| span | inline | special | |
| strong | inline | phrase | |
| table | block | ||
| ul | block | list |
表2: 常用 HTML 元素和它们的类型。只有具有相同子类型的相邻块元素之间的边距才会合并。
示例5
只是为了做个演示，将标题中的 “Prologue” 注释掉怎么样？
链接:
- 从标题中移除不相干的部分
- 示例5的样式表
新规则:
.sectionNote { display: none; }
使元素环绕于其它元素周围: 浮动属性
本段左边放了一张照片。当然你们都会看到后面的文本自然地环绕于其周围，尽管有人得先停止琢磨为什么著名的科幻小说家要在他的猫身上绑块儿熏肉——即使今天是他的慢调生活日。我们可以用 HTML 属性来指定你所看见的布局表现，但在这个例子中该效果是由 CSS 完成的。
可以猜到，这个戏法是由 float: left; 这一属性/值组完成的。在后面的文章中将会介绍运用浮动这个好点子，但有必要在这里谈谈它的基础。float: right 是极有用的属性/值组。如果你要取消一个引用了 float 的 class 赋值，你可以指定 float: none。
float 属性有一些用法说明：
- 只有将 float 值应用于带有显式 width 的块元素时，它才起作用。
- 可以将float、clear 和 margin 属性一起用在样式表中，来在布局中创建栏。
- 让一个浮动元素延伸到其容器的底部比较难，但也不是不可能。这样做的常用方法被称作伪列布局。
示例6
之前已经谈过了在格言引用上赋 float 值的问题。那么完成之后，我们就可以来看看效果。我们可以添加一些背景颜色使它与主要内容区别开来。
链接：
- 将格言引用浮动至右边距处
- 示例6样式表
新规则:
.pullQuote { float: right;
background-color: rgb(204,204,204); }
强制使元素处于其前一个浮动元素之下:清除属性
像 float 属性一样，可指定 clear 属性为 left、right 或 none 三者之一。清除属性也支持 both 值。
float 属性指令其它元素的内容如何环绕浮动元素，clear 属性则规定了元素如何环绕其相邻元素¬——在许多实例中，是规定不要浮动。
图 6 显示了 clear: left; 的表现；此布局中两个原来连在一起的元素被指定了相同的 height 值，而 float 值分别设为 left 和 right：
图 6：因为高度相当，clear:left 使底部盒子清除了两列的浮动。
前一示例中 #cLeftWidget 的默认环绕会将它置于希腊语文本下面¬——即，#fLeftWidget 和 #fRightWidget 之间 。
想想看，如果这一组元素中前一个元素比其右对齐的同僚短，会出现什么效果？如图7所示：
图 7: 当右列比左列长时，clear:left 不会清除两列，所以必须用 clear:both。
在前一个例子中，后续元素的 clear 值设为 left 是为了表明一个观点：因为两个 float 的元素等高，clear 的元素会被推到两者下面。但是，第二个例子证明为了从高度不等的 float 元素取得相同的结果，必须用到 clear: both;。
这里对 clear 属性的探讨可看做其效果的简单介绍，后面的文章会更深入地对该属性的用途和技巧进行讨论。
总结
由于渲染引擎的种种差异，对全面涵盖传统的定义基础的需要，对浏览器窗口大小预计的无能为力，对 Web 文档的布局都充满了困难和限制。但是，一般的 CSS 支持水平已经可以轻易地使 Web 文档在浏览器上得到满意的效果。
延伸阅读
- Bergevin, Holly, and Gallant, John. 2006. Explorer exposed. Position Is Everything. http://positioniseverything.net/explorer.html (accessed 1 July 2008).
- Bos, Bert, et al. 2007. Cascading style sheets level 2 revision 1 (CSS 2.1) specification. World Wide Web Consortium. http://www.w3.org/TR/2007/CR-CSS21-20070719 etc. (accessed 30 June 2008).
- Raggett, Dave, et. al. 1999. HTML 4.01 specification. World Wide Web Consortium. http://www.w3.org/TR/1999/REC-html401-19991224 etc. (accessed 30 June 2008).
- Raymond, Eric, and Steele, Guy, eds. 2003. Brute force. The Jargon File (Version 4.4.7). http://www.catb.org/jargon/html/B/brute-force.html (accessed 30 June 2008).
- Scalzi, John. 2006. Clearly you people thought I was kidding. Whatever. http://www.scalzi.com/whatever/004457.html (accessed 30 June 2008).
练习题
- 缩写的 margin 值或单个边距属性如 margin-top 分别适用于什么情况？
- 什么时候缩写的 margin、padding 和 border-width 属性要写出全部四个值，这些值是按什么顺序作用于元素的四边的？
- I如果你想在一个文档里所有标题的文本下都画一条线，你该使用那种属性？
- 为了使一个元素看起来像一个界面按钮，你会用那种 border-style 值？
- 判断： 默认情况下，在元素周围添加边框会不会也在这个元素的内容周围添加缝隙？ 如果创建的元素跟它的容器不一样宽，你需要设置那组属性/值以确保元素在其容器内水平居中？
- 判断： 如果将一个容器元素置于 body 中，给它的 width 设一个大于 100% 的值，文档画布的表现会不会变？
- 如果图片对包含元素来说过大，你会用哪种属性/值来保证你的页面不会溢出，为什么？
- 给 a（链接）元素的 display 值设为 block，并给它设一个合理的高度和宽度，在 screen 显示媒体上这个链接的鼠标经过行为是如何变化的？
- 通常情况下，块元素会扩张来填满其容器的宽度（除了边距，边框和填充距）。默认情况下，如果该元素前面有一个 float 的元素，该元素的行为是确实发生了变化，还是只是看起来发生了变化？
- 如果想要给某个元素应用一个 float 值，在那个元素上你还需要设定什么属性？
- 如果你想绝对保证一个元素总会扩展而填满其容器的宽度，你该设置哪组属性/值？
分页: [1] [2] [3] [4] [5] [6]
- 上一篇:用不同的 CSS 怎样定位不同的浏览器
- 下一篇:CSS选择符