CSS笔记-盒子模型
1. 盒子模型
css开发中，常常会提到一个词 叫做“盒子”,这里的盒子专业名词叫“盒子模型（Box Model）”，这一术语是从来设计和布局时使用的。通俗的讲，所有的HTML元素都可以看做是一个盒子；那么，将页面中所有的元素都设置成一个矩形的盒子后，对页面的布局就可以理解成把不同的盒子放到不同的位置上。
2. 盒子组成部分
css盒子模型从里到外的组成部分依次为：
- 内容区（content）
盒子的主要内容，即元素中所有的子元素和文本内容等都在内容中排列展示。内容大小由 宽度“width”和 高度“height”两属性控制。
- 内边距（padding）
内容区与边框之间的距离。一共有四个方向的内边距:
2.1 padding-left
2.2 padding-right
2.3 padding-top
2.4 padding-buttom）
- 边框（border）
围绕在内容区和内边距外的边框。这里需要注意的是，在较为精细的设计中，边框的大小也会影响盒子的大小。
- 外边距（margin）
围绕在元素边框外的空白区域。设置外边距不会影响盒子的大小，但是会影响盒子的实际占用空间。如内边距padding一样，它也有四个方向的外边距:
4.1 margin-left
4.2 margin-right
4.3 margin-top
4.4 margin-buttom
注：外边距margin 可以设置负值，即可往反方向移动。
3. 盒子的宽度和高度
通常情况下，盒子的可见宽度和高度，是由内容宽高、内边距大小、边框大小 三部分共同决定的。
以下面div的css样式为例:
div {
width: 300px;
height:300px;
border: 25px solid red;
padding: 25px;
margin: 25px; }
该 div 的宽度为 300（宽）+50（左右内边距padding）+50（左右边框border）+50（左右外边距margin）=450px。
由此可得出盒子宽高的计算规则为：
盒子总宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
盒子总高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
