盒子模型是页面布局的核心，通过盒子模型才能更好的进行页面布局。
网页布局的本质
网页布局的核心本质其实是：HTML网页元素就是一个个的盒子box，通过CSS可以设置好盒子的样式，和盒子需要摆放的位置；简单说来就是通过CSS摆盒子（盒子是网页元素）。
盒子模型（Box Model）
盒子模型就是：将HTML页面中的布局元素看作是一个矩形的盒子，也就是一个用于盛装内容的容器。CSS盒子模型本质上就是一个"盒子"，这个盒子可以看作这几部分组成：border（盒子的边框）、margin（外边距）、padding（内边距）和content（内容）：
边框（border）
border属性可以设置元素的边框。边框主要是由三部分组成：边框的宽度（粗细）、边框的样式、边框的颜色。
边框宽度
border-width属性可以设置边框的粗细，其单位是px。
边框样式
border-style属性可以设置边框的样式，边框的样式有多种：
- none（默认）： none表示没有边框，当边框样式为none时，边框的宽度设置也没有作用。（很好理解，边框都没有了，设置宽度也没有用）。
- solid：将边框样式设置为单实线（这是最常用的样式）。
- dashed：将边框样式设置为虚线。
- dotted：将边框样式设置为点线。
可以通过border-top/-bottom/-left/-right来分别指定盒子的上下左右不同方向的边框，如可以只指定盒子的下边框：
边框颜色
直接通过border-color属性指定边框颜色，颜色指定还是有三种方式（直接使用定义好的颜色、rgb表示法、十六进制表示法），定义十分简单。
需要学习一个边框的简写方式：可以直接在border属性中定义这些边框的属性：
这定义了一个宽度为1px的红色虚线边框，这些属性值没有顺序。
表格中的细线边框
通过border-collapse属性可以控制浏览器绘制表格边框的方式，其控制的是相邻单元格的边框。可以通过设置border-collapse: collapse来让两个相邻单元格的边框合并在一起。
我们给表格添加边框，然后看一下没有collapse属性的表格在页面中的样子：
表格中的每一个单元格都是一个盒子，有自己的边框， 但是这样的表格完全不符合我们的预期：日常中我们看见的表格明显不是这种样式的，此时就需要给整个表格设置相邻单元格边框合并属性border-collapse了：
这样之后，表格中相邻单元格的边框就会合并，页面中展示的表格才是更加符合我们预期的表格。
还需要注意：边框会影响盒子的实际大小： 边框会额外增加盒子的大小，相当于盒子的实际大小是"盒子设置的原本大小 + 边框的大小"，这会略微的影响盒子的大小，进而影响我们布局，对于这个问题，我们有两种方案解决：1.测量盒子大小时，不测量其边框的大小；2.如果测量时包含了盒子的边框大小，那么设置width、height属性时需要减去边框大小。
内边距（padding）
盒子模型中的padding属性用于设置内边距，也就是盒子边框和内容之间的距离 。内边距也是有四个方向（left、right、top、bottom）上下左右都有内边距，可以通过padding-left/-right/-top/-bottom指定，但是padding的简写使用得更加广泛：
padding属性的简写是根据padding属性的值的个数进行判断的：
- padding有一个值：
padding: 5px，一个值，代表上下左右都有内边距。 - padding有两个值：
padding: 5px 10px;，两个值，代表上下边距和左右边距分别是5和10. - padding有三个值：
padding: 5px 10px 20px，三个值，代表其上内边距5px，左右边距为10px，下边距为20px。 - padding有四个值：
padding: 5px 10px 20px 30px，四个值，代表上内边距为5px、右内边距为10px、下内边距为20px、左内边距为30px，是顺时针方向。
当我们给盒子指定了内边距padding值之后，发生了两件事情：
- 盒子中的内容和边框之间有了距离，添加了内边距。
- padding内边距也会影响盒子的实际大小。换句话说，假如盒子已经具有了宽度和高度，此时再指定内边框的大小，会将盒子的大小撑大（因为要保证盒子大小是设置的值，但是现在有了内边距，所以说要撑大盒子才可以保证）。
解决方法就是让设置的weight和height减去padding内边距的值即可。padding内边距还可以撑开盒子，也会影响到盒子的实际大小，解决方法和上面的方法类似。但是假如本身没有指定盒子的width/height的属性，那么padding内边距不会撑开盒子。
外边距（margin）
margin用于设置外边距，就是用于设置盒子和盒子之间的大小，margin外边距的属性和padding内边距的设置一模一样，也是分上下左右四个方向，此处不过多赘述。
外边距的典型应用
水平居中
通过设置外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子的宽度（width）属性必须设置。
- 盒子的左右外边距都设置为auto。
这样设置之后，块级元素就可以水平居中了。上述方法是用于块级元素的水平居中，行内元素（或行内块元素）使用text-align:center属性即可。
外边距合并
使用margin定义块级元素的垂直外边距时，可能会出现外边距合并。主要有两种情况：
- 相邻的块元素垂直外边距的合并。
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top ，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并：
这种垂直合并问题的解决方法是：在父元素或子元素上添加边框或内边距，就可以避免外边距合并，但是尽量只给每一个盒子添加一个margin值。
- 嵌套块元素垂直外边距的塌陷。
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值（塌陷就很形象）。
解决方法：1.可以为父元素定义边框、或者上内边距；2.为父元素添加overflow:hidden属性。还有其他方法，此处不再展开。
清除内外边距
网页中的很多元素都带有默认的内外边距，而且在不同的浏览器默认的值也有所差异，为了网页在不同浏览器上的显示一致性，在布局前一般习惯清除网页元素的内外边距：
这样我们再设置每个元素的内外边距就在浏览器中显示一样的内容了。注意：行内元素为了照顾其兼容性，不要设置其上下内外边距，尽量只设置左右内外边距；如果不得不设置上下，建议先转换为块级元素或者行内块元素。
盒子模型的新东西
在CSS3中新增了盒子模型的一些新的属性。
圆角边框
新增了圆角边框的样式，这样我们的盒子就可以变成圆角了。通过border-radius属性设置元素的外边框圆角。
可以看见，盒子确实变圆润了。radius的参数可以设置为数值（单位：像素）或者百分比；假如盒子是个正方形，想要设置为一个圆，那么直接写50%即可（或者可以将高度修改为宽度一半）。 也可以分开进行赋值：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius；分别对应左上、右上、左下、右下。
盒子阴影
可以使用box-shadow属性为盒子添加阴影，其语法如下：
盒子阴影不占用空间，不会影响其他盒子的布局排列。
文字阴影
可以通过text-shadow设置文字阴影：
其设置方式和盒子阴影类似，了解一下即可。
