什么是CSS的盒子模型

若是CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box），那么咱们能够形象地将其看做是一个盒子。CSS围绕这些盒子产生了一种“盒子模型”概念，经过定义一系列与盒子相关的属性（内容、填充、边框、边界），能够控制各个盒子乃至整个HTML文档的表现效果和布局结构。

虽然CSS中没有盒子这个单独的属性对象，但它倒是CSS中无处不在的一个重要组成部分。

CSS盒子模型的应用

首先，一些HTML元素如div、p等块元素，默认状况下就是一个盒子，有些内联元素如span、a等虽然默认不是盒子，但也能够经过CSS中的display属性将其声明成盒子，在HTML文档中，不是盒子的元素各自的宽度为其所呈现的信息内容宽度，它们彼此间互相紧靠从左到右依次排列，直到占满整个浏览器窗口后自动换行。对因而盒子的元素，若是没有特殊设置，其默认老是占单独一行，宽度为浏览器窗口的宽度，在其先后的元素无论是否是盒子只能排列在它的上面或者下面，即上下累加着进行排列。每一个盒子均可以当作是由从内到外的四个部分构成，即内容、填充、边框和边界，CSS为这四个部分规定了相关的属性，经过对这些属性的控制能够丰富盒子的实际表现效果。下面简要的介绍这四个组成部分及各自具有的属性：

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

2.填充是内容和边框之间的空间，能够被看做是内容的背景区域。填充的属性有五种，即padding、padding-top、padding-bottom、padding-left、padding-right。使用这五种属性能够指定内容与各方向边框间的距离，对应的属性值类型与width和height相同。同时经过对盒子背景色属性的设置可使填充部分呈现相应的颜色。

3.边框是内容和填充的边界。边框的属性有border、border-style、border-width和border-color。边框样式属性border-style是边框最重要的属性，根据CSS规范，若是没有指定边框样式，其余的边框属性都会被忽略，边框将不存在。CSS规定了dotted、doshed、solid等九种边框样式。使用边框宽度属性border-width能够为边框指定具体的厚度，其属性值能够是长度计量值，也能够是CSS规定的thin、medium和thick。使用border-color属性能够为边框指定相应的颜色，其属性值能够是RGB值，也能够是CSS规定的颜色名。

4.边界位于盒子的最外围，它不是一条边线而是添加在边框外面的空间。边界使元素盒子之间没必要紧凑地链接在一块儿，是CSS布局的一个重要手段。边界的属性有五种，即margin、margin-top、margin-bottom、margin- left、margin-right，其具体的设置和使用与填充属性相似。对于两个邻近的都设置有边界值的盒子，他们邻近部分的边界将不是两者边界的相加，而是两者的重叠，若两者邻近的边界值大小不等，则取两者中较大的值。同时，CSS允许给边界属性指定负数值，当指定负边界值时，整个盒子将向指定负值方向的相反方向移动，以此能够产生盒子的重叠效果。采用指定边界正负值的方法能够移动网页中的元素，这是CSS布局技术中的一个重要方法。

CSS盒子模型不只加强了HTML文档的表现效果。同时它不一样于以往表格布局的网页，经过由CSS定义的大小不一的盒子和盒子嵌套来编排网页，用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器。