6.4 CSS 高度宽度

为内容所在矩形区域设置固定尺寸

前面我们提到HTML元素的尺寸(高或宽)是动态的,会随着内容调整。不过我们也可以为元素设定固定的尺寸大小。

blockquote{ width: 600px;}

上面的 blockquote 将始终保持600px的宽度,如果浏览器窗口小于600px,将显示一个水平滚动条。

因为我们只设置了宽度,那么这个 blockquote 的高度仍然是动态的,会自动调整来适应内容。

CSS 溢出(overflow)

当限定元素尺寸时,会遇到一个问题,就是内容超出预期,也就是发生溢出(overflow))时,如何定义浏览器的渲染行为。

overflow CSS属性就是用来处理这种情况的。

缺省值是 visible:也就是默认情况下,内容总是被显示。因为通常情况下HTML5元素内容比CSS样式更重要。

Techbrood is a leading search engine on web techniques.

不过我们可以通过设置 overflow: hidden;,来隐藏掉任何溢出部分的内容。如果内容的完整显示意义不大,而我们不想破化页面样式时。

Techbrood is a leading search engine on web techniques.

如果我们既想看到完整的内容,又不想破坏样式,我们可以通过设置 overflow: scroll 来应用滚动条。

Techbrood is a leading search engine on web techniques.

你可以观察到上面的例子中,水平方向的滚动条显示实际上是多余的。因此一个更好的选择是使用 overflow: auto,这样滚动条将只在内容溢出时被自动显示。

Techbrood is a leading search engine on web techniques.

通常为元素设定固定的尺寸是为了设计上的一致体验,但由于实际网站中内容变化区间是较大的,可能会出现意外的情况,因此为固定尺寸的元素设定合适的溢出规则overflow: hidden;overflow: auto; 是一个良好的开发习惯。