HTML5与CSS3基础教程:用CSS分控制每一个盒模型

摘要:CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型,这里的盒子由内容区域、内容区域周围的空间(内边距,padding)、内边距的外边缘(边框,border)和边框外面将元素与相邻元素隔开的不可见区域(外边距,margin)构成。
作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)
第十一章全部章节:
第一节:用CSS布局及注意事项
第二节:构建(有利于搜索引擎索引的)页面
第三节:在旧版浏览器中为HTML5元素添加样式(让HTML5新元素兼容任何浏览器)
第四节:对默认样式进行重置或标准化(抹平不同浏览器之间的样式差异)

盒模型

CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型,这里的盒子由内容区域、内容区域周围的空间(内边距,padding)、内边距的外边缘(边框,border)和边框外面将元素与相邻元素隔开的不可见区域(外边距,margin)构成,参见图11.5.1。这类似于挂在墙上的带框架的画,其中图画是内容,衬边是内边距,框架是边框,而该画框与相邻画框之间的距离则是外边距。

blob.png

图11.5.1:每个元素的盒子都有一些决定该元素所占空间及其外观的要素。可以使用CSS分别控制各个要素。注意,在默认情况下,宽度和高度仅定义内容区域的尺寸。背景(蓝色区域)会延伸到边框的后面,因此,通常情况下,它仅在内边距所延伸到的区域可见,除非边框是透明的或半透明的

可以使用CSS确定每个元素的盒子的外观和位置,并由此控制网页的布局,参见图11.5.2。本章会深入讲解width、padding、border、margin和控制盒子外观的其他属性。但首先,理解盒模型的基础知识非常重要。

宽度、高度和盒模型

关于CSS的width属性对元素所显示宽度的影响,有两种处理方式。(不包含任何将其与邻近元素隔开的外边距。)

默认的处理方式(如图11.5.1所示)实际上有些有悖于常理。浏览器中元素的宽度与其width属性值并不一致(除非它没有内边距和边框)。CSS中的宽度指示的是内边距里内容区域的宽度,如图11.5.1表示的那样。而元素在浏览器中的显示宽度则是内容宽度、左右内边距和左右边框的总和。显示高度与之类似,只不过计算的是上下内边距和边框值。

blob.png

图11.5.2:示例页面中附注栏的盒模型。记住,每个元素都有自己的盒子。例如,这里显示的img元素有边框,而它左右的空间则是包含该图像的article元素的内边距

对大多数代码编写人员来说,另一种方式则更为直观。使用这种方式的话,元素的显示宽度就等于width属性的值。内容宽度、内边距和边框都包含在里面(如图11.5.3所示)。height属性与之类似。要使用这种模式,仅需对元素设置box-sizing: border-box;。

blob.png

图11.5.3:如果设置了box-sizing: border-box;,则宽度和高度就包含了除外边距以外的所有要素。如果不设置这条规则,则表现为图11.5.1所示的方式

以上讲述都比较抽象,因此不妨看看分别使用两种方式的一个实例(如图11.5.4所示)。注意这里显示的padding和border-width值在每个边都起作用。例如,padding: 15px;会在水平方向总共产生30像素的内边距(左15像素,右15像素),垂直方向也是30像素(上15元素,下15像素)。

提示:图11.5.1是根据Rich Hauck的盒模型图绘制的(该图本身是根据CSS规范中的插图绘制的)。

提示:关于box-sizing: border-box;、通常不设置height值的原因等主题,参见11.7节。

blob.png

图11.5.4:两个div的border-width(浅绿色)、padding和width值都相同。上图是以默认盒模型(如图11.5.1所示)显示的,下图则是以设置了box-sizing: border-box;的盒模型(如图11.5.3所示)显示的,其显示宽度与width属性值相同(都是300像素)。两个盒子都设置了height: 170px;(这里没有显示出来),不过第一个要更高一些,这是由于上下内边距和边框尺寸增加了显示高度(注意,黑色的横条不是这些div的一部分,因此它们不会影响div的高度)