CSS盒子模型的概念

一、“盒子”与“模型”的概念

       在网页布局中，为了能够在纷繁复杂的各个部分合理地进行组织，这个领域的一些有识之士对它的本质进行充分研究后，总结了一套完整的、行之有效的原则和规范。这就是“盒子模型”的由来。
       所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间，一般来说这些被占据的空间往往都要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。如图17—1所示，在CSS中，一个独立的盒子模型由content(内容)、padding内边距)、border(边框)和margin(外边距)4部分组成。

二、内容区

        内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，其值可以是长度值或百分比值。
        当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。当overflow属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以滚动显示内容售息；当为auto时，将由浏览器决定如何处理溢出部分。

三、内边距

        内边距是内容区和边框之间的空间，可以被看做是内容区的背景区域=内边距的属性有5种，即padding-top、padding．bottom、padding-left、padding-fight以及综合了以上4种方向的快捷内边距属性padding。使用这5种属性可以指定内容区与各方向边框间的距离。同时通过对盒子背景色属性的设置可以使内边距部分呈现相应的颜色，起到一定的边线效果。

四、边框

       边框的属性有border-style、border-width和border-color以及综合了以上3类属性的快捷边框属性border。
       边框样式属性border-style是边框最重要的属性，CSS规定了dotted、solid等边框样式。使用边框宽度属性border-width可以为边框指定具体的厚度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium和thick。使用边框颜色属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS规定的颜色名。

五、外边距
       外边距位于盒子的最外围，它不是一条边线，而是添加在边框外面的空间。外边距使元素盒子之间不必紧凑地连接在一起，是CSS布局的一个重要手段。外边距的属性有5种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4种方向的快捷外边距属性margin，其具体的设置和使用与内边距属性类似。
       同时，CSS允许给外边距属性指定负数值，当指定负外边距值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定外边距正负值的方法可以移动网页中的元素，这是CSS布局技术中的一个重要方法。