浅谈CSS盒子模型

【摘要】盒子模型是CSS中的一个重要概念，虽然CSS中没有盒子这个单独的属性对象，但它却是CSS中无处不在的一个重要组成部分。掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果，同时对于整个HTML文档的布局也会产生很大的帮助和促进。本文尝试在介绍CSS盒子模型基本概念和组成元素属性的基础上，结合个人学习经验对其在网页制作中的实际应用谈一谈自己浅显的观点和看法。
【关键词】盒子模型；表现效果；网页布局；

CSS是Cascading Style Sheets的缩写，中文意思是层叠样式表，它是一种定义以HTML、XHTML、XML语言编写的网页文档表现层的W3C标准。CSS对各种HTML元素在字体、颜色、边界等方面的表现上进行了有效的补充，是一种非常实用的网页元素定义规则，网页制作者利用CSS可以有效地指定和改善网页内容的表现效果。
CSS假定所有的HTML文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box），可以形象地将其看作是一个盒子。CSS围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。
       一些HTML元素在默认情况下就是盒子，比如div、p等，有些则默认不是盒子，如span、a等。我们可以通过CSS中的display属性来改变默认不是盒子的元素，即通过对其声明display:block使其成为一个盒子。在HTML文档中，不是盒子的元素各自的宽度为其所呈现的信息内容宽度，它们彼此间互相紧靠从左到右依次排列，直到占满整个浏览器窗口后自动换行。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子只能排列在它的上面或者下面，即上下累加着进行排列。

HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区、填充、边框和空白边，其具体组成情况如上图所示。CSS为四个部分规定了一系列相关属性，通过对这些属性的控制可以丰富盒子的实际表现效果。下面将结合实例，由内到外地对盒子模型的四个组成部分及各自具备的属性进行简要的介绍。
内容区
       内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是是盒子模型必备的组成部分，其他的三部分都是可选的。内容区有三个属性，width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，其值可以是长度计量值或者百分比值。在CSS中表示空间距离主要有两种方式，一个是百分比，一个是长度计量单位。百分比是指定对象相对于其上级对象的长度比例。CSS中的长度计量单位又分为两种，一种是相对单位，常用的有em（当前字体尺寸）和px（像素）等，一种是绝对单位，常用的有pt（点）等。当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。当overflow属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以滚动显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。
       在下面的示例中我们在名为“盒子模型示例”的HTML文档中建立了两个段落盒子，在其内容区中添加了相应的文本。首先我们为它设置了300px的宽度和50px的高度，为了显示出盒子的范围，设置了黑色的细边框，其CSS样式代码和在微软的IE8浏览器中的显示效果如下图所示。

          

填充
       填充是内容区和边框之间的空间，可以被看作是内容区的背景区域。填充的属性有五种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离，其属性值类型同width和height。同时通过对盒子背景色属性的设置可以使填充部分呈现相应的颜色，起到一定的变现效果。
       承接上面的示例，我们将字体颜色改为白色，并为两个段落盒子添加了20px的填充，同时将其颜色设为灰色以突出显示，其CSS样式代码和在浏览器中的显示效果如下图所示。

            
边框
       边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color以及综合了以上三类属性的快捷边框属性border。边框样式属性border-style是边框最重要的属性，根据CSS规范，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted、doshed、solid等九种边框样式，其各自的表现效果如图所示。使用边框宽度属性border-width可以为边框指定具体的厚度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium和thick。使用边框颜色属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS规定的17个颜色名。在设定以上三类边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border-top-style: solid、border-bottom-width:10px、border-left-color:red等。
       让我们继续来完善上面的示例。这次我们为两个段落盒子添加了厚度为20px的黑色边框，p.a盒子采用solid样式的边框样式，p.b盒子采用double样式。由于IE8浏览器会自动各盒子添加一定的空白边，为了达到最真实的表现效果，我们在此对空白边进行清零。更改后的CSS样式代码和在浏览器中的显示效果如下图所示。

          

空白边
       空白边位于盒子的最外围，它不是一条边线而是添加在边框外面的空间。空白边使元素盒子之间不必紧凑地连接在一起，是CSS布局的一个重要手段。空白边的属性有五种，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。对于两个邻近的都设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的重叠，若二者邻近的空白边值大小不等，则取二者中较大的值。同时，CSS容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定空白边正负值的方法可以移动网页中的元素，这是CSS布局技术中的一个重要方法。
       承接上面的示例，这一次我们为两个段落盒子添加空白边。对p.a盒子的各个方向采用20px的空白边，p.b采用40px。根据上面内容中讲到的空白边重叠原理，两个盒子之间的空白边将是属性值较大的40px，其最终的CSS样式代码和在浏览器中的显示效果如下图所示。

  

以上就是对盒子模型四个组成部分的简要介绍，通过示例我们看到利用盒子模型的相关属性可以使HTML文档内容的表现效果变得越发丰富，而不再像只使用HTML标记那样单调乏味。
       其实盒子模型在增强HTML文档表现效果之外还有其他的用途。以往的网页整体布局大多使用表格，而巧妙地利用CSS盒子模型也可以方便地实现很多布局效果，下面将以使整个HTML文档内容居中对齐为例加以说明。利用CSS盒子模型使布局对象达到居中主要有两种方法。第一种方法是首先根据实际情况指定包含整个网页内容的div的宽度，然后设置其左、右margin属性为auto值。由于目前大部分浏览器对margin的auto值都默认为居中处理，因此实际的表现效果即为所求。第二种方法使用了CSS中的绝对定位和负margin值，即首先使用绝对定位left:50%将包含了整个网页内容的div定位于浏览器窗口的中心，然后将其margin- left值设置为div宽度width一半的负值，这样就将div从浏览器窗口的中心位置向左拉回了一般宽度，而实际的表现效果即为居中对齐。承接上文的示例我们将两个段落盒子放在了两个更大的div盒子中，分别应用以上两种方法，其CSS样式代码和在浏览器中的显示效果如下图所示。

           

在近一阶段的学习和实践中，我愈加发觉到CSS盒子模型的开放和强大。应用各种相关属性，加入平面设计的灵感和创意，就可以有无数种方法使HTML文档得到各种优秀的表现效果。值得注意的是不同的浏览器对盒子模型的支持程度不同，同一个浏览器兼容模式和标准模式下的表现效果也有不同，希望大家在使用盒子模型时要对此加强重视，不断尝试和探索，去发掘盒子模型更大的魅力和用途。