认识盒模型

盒模型

一、盒模型的概念

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距、边框、填充和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

二、盒模型的属性及其用法：

1、属性：
Margin：外边距
Padding：内填充
Border：边框

2、属性的用法：
1）、Margin：盒子外边框和其他盒子之间的距离。
作用：让两个同级的盒子之间产生一定距离。
用法：margin：属性值；
注意：margin不会改变盒子内部的大小，并且margin是可以设置为负值的！
margin设置方法：
margin:一个值 四周
margin:两个值 上下 左右
margin:三个值 上 左右 下
margin:四个值 上 右 下 左（顺时针）
也可以给元素的单一一个方向设置margin值:
margin-right:/ margin-left:/ margin-top:/ margin-bottom: ；
margin常出现的BUG:
a: 同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。
b: 当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面

3)、Padding：内容到盒子盒子边框之间的区域。
作用：控制元素在盒子内部的位置关系。
用法：padding：属性值；
注意：padding会把盒子撑大，且不能为负值，如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding 的值，如果一个盒子没有固定大小（被内容撑开），添加padding 不用减。
padding设置方法：
padding:一个值 四周
padding:两个值 上下 左右
padding:三个值 上 左右 下
padding:四个值 上 右 下 左（顺时针）
也可以给元素的单一一个方向设置padding值：
padding-left: / padding-right: / padding-top: / padding-bottom:

3）、Border：是环绕内容区和填充的边界。
作用：给盒子加边框。
用法：border：属性值1 属性值2 属性值3；
例：border:1px solid red; 表示添加的边框样式为：1像素的红色的实线
也可以在单一方向上设置边框：
border-left / border-right / border-top / border-bottom

三、盒模型实际所占空间的大小

宽： width + border-left + border-right + padding-left + padding-right + margin-left + margin-right;
高： height + border-top + border-bottom + padding-top + padding-bottom + margin-top +margin-bottom;