说明: 布局
你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。
当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题，并不在本文范畴。
本文主要介绍一些简单的布局方法。（高阶技术请参阅外部链接学习高级布局）
文档结构
当你想控制文档布局时，就不得不改变它的结构。
页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用p元素来创建结构。
示例
在你的示例中, 编号段落并没有自己的容器。
你的样式表无法为这些段落画出边框，因为没有选择器指向它们。
为了解决这个问题, 你可以在段落之外添加一个“。这个标签是唯一的，可以指定一个id属性来标识:
Numbered paragraphs
Lorem ipsum
Dolor sit
Amet consectetuer
Magna aliquam
Autem veleum
现在可以通过样式表在每个列表周围画出边框了:
ul, #numbered { border: 1em solid #69b; padding-right:1em; }运行结果如下:
(A) The oceans
Arctic Atlantic Pacific Indian Southern(B) Numbered paragraphs
**1:**Lorem ipsum
**2:**Dolor sit
**3:**Amet consectetuer
**4:**Magna aliquam
**5:**Autem veleum
大小单位
到目前为止，你可以通过像素来指定大小。这在有些情况下是非常合适的，比如电脑屏幕显示。 但当用户改变字体大小之后，你的布局可能会发生错位。
因此，最好通过百分比或 ems (em) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时，你的布局会自己修正。
示例
文本左边的border通过像素来指定大小。
文本右边的border通过 ems来指定大小。
在你的浏览器中，修改字体大小，会发现右边的border会自己修正大小而左边的不会:
RESIZE ME PLEASE
更多详情
对于其它设备，其它的长度单位可能更合适。
在本指南中会有其它篇幅详细介绍这一点。
更多详情参见CSS说明中Values.
文本布局
有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:
text-align
内容对齐。 可以使用下面几个值：left,right,center,justify。
text-indent
指定内容缩进。
这两个属性可以应用于任何文本类内容，不只是纯文本。 需要注意的是，它们会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。
示例
标题居中:
h3 { border-top: 1px solid gray; text-align: center; }输出结果:
(A) The oceans
在 HTML 文档中, 标题之后的内容并不属于标题。当你对齐一个标题时，其后的元素不会继承该样式。
浮动
float属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。
本文剩下部分都是围绕浮动元素展开。你可以使用clear属性来避免其它元素受到浮动效果的影响。
示例
在你的示例中，list是根据窗口拉伸。你可以通过使用浮动元素来使它们靠左。
为了保证标题在正确的位置, 你必须为标题指定clear属性来避免标题靠左:
ul, #numbered {float: left;} h3 {clear: left;}
位置
你可以为一个元素指定position属性为以下值之一，来设置其位置。
这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。
relative
通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。
fixed
为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。
absolute
为元素指定相对于其父元素的确切位置。只有在父元素使用relative,fixedorabsolute时才有效。你可以为任何父元素指定position: relative;因为它不会产生移动。
static
默认值。当明确要关闭位置属性时使用。
和position属性(除了static)一起使用的, 有下列属性:top,right,bottom,left,width,height通过设置它们来指定元素的位置或大小。
示例
为了放置两个元素，一个在另外一个上方, 创建一个父容器来包含两个子元素:
/
\
在你的样式表里，将父容器的position设置为relative。无需为它设置任何具体变动。将子元素的position属性设置为absolute:
#parent-p { position: relative; font: bold 200% sans-serif; } #forward, #back { position: absolute; margin:0px; /* no margin around the elements */ top: 0px; /* distance from top */ left: 0px; /* distance from left */ } #forward { color: blue; } #back { color: red; }输出结果如下,反斜杠显示在斜杠上方
更多详情
更多详情的postion说明在 CSS Specification 中占用了两个章节:Visual formatting model和Visual formatting model details.
如果你的样式表工作在多种浏览器环境下，你会发现不同浏览器对标准协议的解释会有很多不同, 而且特定浏览器的特定版本可能存在BUG。
