盒模型

盒模型

1.定义

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。 盒子模型分别由外边距、边框、内边距和标签内容组成。

2.外边距

1.属性：margin（是长在盒子外围的，是完全透明的）
2.作用：调整标签与标签之间的距离

注：
	1）margin:0; 取消默认外边距
	2）margin:0 auto;左右自动外边距，实现标签在父标签范围内水平居中
	3）margin:-10px;标签反方向的微调

3.单方向外边距：只取一个值

 - margin-left： 左边距
 - margin-right：右边距
 - margin-top：上边距
 - margin-bottom：下边距

4.margin同时设置四条边的宽度

margin:一个值  四周
margin:两个值  上下  左右	
margin:三个值  上 左右 下
margin:四个值  上右下左

5.margin常出现的BUG

A: 同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。
B: 当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面

3.内填充

1.属性：padding（padding不是只能完全透明的，可以设置背景颜色和图片）
2.作用：控制子元素在父元素里面的位置关系

注：
	1）padding会把盒子撑大
	2）如果想让盒子保持原有的大小：在宽高基础上减掉
	3）如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开，不用减掉
	4）padding不会对背景图的位置造成影响
	5）padding不能为负值

3.单方向内边距：只取一个值

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充

4.padding同时设置四条边的宽度

padding:一个值  四周
padding:两个值  上下  左右	
padding:三个值  上 左右 下
padding:四个值  上右下左

4.边框

1.属性：border(表示盒子的边界)
2.border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置
3.单方向边框：

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界