示例4
auto 边距是放在页面容器的左侧和右侧的。现在为了使这些边距值有意义，我们来为其设置 width。此外，还要给格言引用设置一个 float 值，使它也获得宽度。
链接：
- 改变文档容器和格言引用的宽度
- 示例4的样式表
新规则：
#main { width: 42em; }
.pullQuote { width: 14em; }
溢出：是对内容进行限制，还是给它自由
设定元素的 width 或 height 时，有时会需要考虑在该元素的内容占据的空间超过了严格意义上可获得的空间时，我们期望得到什么样的效果。在那些既有用户生成内容，又有严格布局规范的网站上尤其需要注意这一点。
overflow 属性和它的四个有效值——visible、hidden、auto 和 scroll ——可用于处理这种情况。图 5 展示了将这几个属性值应用到一个内容超出其边界框的元素上所产生的效果。
图 5: CSS overflow 属性的效果。
四种溢出属性值的效果
- visible （默认）
- 在不影响相邻元素的 flow 或边距的同时，显示超出元素可用空间的内容。因此，某个元素的内容将与其相邻元素的内容相冲突。在后面的教程中，会对避免这种情况的技巧，以及在 IE 中因渲染问题而产生的特殊情况进行讨论。
- hidden
- 超出该元素的界限的所有内容将被隐藏而不可见。
- auto
- 跟用 hidden 值时一样，元素的尺寸会受到限制，但是会创建一个滚动条，使访问者可以获得溢出的内容。
- scroll
- 即使在不必要的情况下，也会在元素上添加垂直和水平滚动条。
CSS 盒模型：将一切组合起来
既然我们已经讲完了基本的布局属性，接下来我们就来看看浏览器是如何按照一个元素的 CSS 属性来渲染它的宽度的——以及避免你的元素从布局中溢出。有些效果非常好，而另一些似乎毫无道理可言。麻烦的是有两种布局算法需要考虑：在 CSS 2.1 推荐中，由万维网联盟（W3C）所指定的模型，和较早版本的 IE 中所用的模型。
为你的布局选择适当的单位
对于文本来说，元素的大小可以用比例单位 % 或 em，或者像 px 这样的静态单位来设置。需要考虑的还有浏览器画布的大小永远是静态值，如果不用客户端 script 代码，是不可能恢复这个尺寸或调整窗口大小的——这种情况对于可访问性，可用性和媒体便携性的要求来说很不合适。
元素大小调整的重要规则：混用比例单位和静态单位时应慎重，或者干脆不要混用
默认的 width 和 height 值是 auto，这在标准英语中意即“使用所有可用空间”的指令 。对块元素来说其效果是，计算出的 width 占完了所有可用空间。对 height 来说，默认情况下元素会扩展来容纳它们的所有内容。
改变 width 和 height 值时，必须小心确保元素的内容（带有边距，边框和填充距）与你所指定的宽度相适应。为了实现这一点，最简单的办法就是进行下列步骤：
- 在普通的显示器和/或字号条件下，考虑布局可用的最大宽度。到本文撰写时为止,这个数值一般是大约 800 或 1024 像素。你的网站受众越广，越应选这些值中较小的值。
- 为你的整个文档创建一个容器元素，该元素的宽度在第一步所得宽度之内。
- 为第二步所创建的容器元素中的元素设置布局属性时，采用与该容器元素相同的单位类型。
为布局选择适当的单位类型：优缺点
| 单位 | 优点 | 缺点 |
|---|---|---|
| em |
|
|
| 百分比 |
|
|
| px |
|
|
表格 1: 设置布局属性时，百分比，em 和像素单位的优缺点
盒模型组件
盒模型实际上只是一系列指令，用来定义元素的种种布局规范如何相互作用。盒模型涵盖的组件有：
- 文档画布
- 边距
- 边框
- 填充距
- 元素的宽度和高度
- 子元素属性
上面的最后一项依次包含了其它5项。但是为简明起见，这一部分将集中讨论简单的父元素－子元素关系，多级盒模型交互作用将保留到后面详谈页面布局的文章中再做深入讨论。
.分页: [1] [2] [3] [4] [5] [6]
- 上一篇:用不同的 CSS 怎样定位不同的浏览器
- 下一篇:CSS选择符