盒模型基础

一、盒模型的概念
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括边距、边框、实际内容和填充。盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。

二、盒模型具体的属性
magin：外边距
border：边框
padding：内边距
content：内容
计算整个区域的大小：
宽=内容的width+border左右值+padding左右值+margin左右值
高=内容的height+border上下值+padding上下值+margin上下值
三、margin的用法
1.长在盒子外围
2.主要控制当前元素与其他同级元素的位置关系
3.不会改变盒子内部大小
4.给当前元素的一个方向设置margin值：margin-left/right/top/bottom: ;
5.margin的设置方法
margin：一个值 表示四周
margin：二个值 表示上下 左右
margin：三个值 表示上 左右 下
margin：四个值 表示上 右 下 左（即顺时针方向）
6.可以设置负值
7.margin常出现的BUG：①同级元素上下之间的margin值不会叠加，会重合；②当父元素和第一个子元素都没有浮动时，给第一个子元素添加margin-top，margin-top添加到父元素上面
四、盒边框border
1.语法：border：border-style | border-color | border-width
border-style 用于定义页面中边框的风格，常用属性值：
none 没有边框（默认值）
solid 边框为实线
dashed 边框为虚线
dotted 边框为点线
double 边框为双实线
2.圆角边框：border-radius： ；
3.合并相邻边框：border-collapse:collapse;
五、padding的用法
1.长在内容和盒子之间的距离，即内填充
2.是长在盒子里面的
3.主要控制子元素在盒子内部的位置关系
4.添加在父元素上面
5.可以把盒子撑大，如果想要让盒子保持原有大小，需要在宽高的基础上，减掉padding；如果一个盒子没有固定大小（被内容撑开），添加padding。
6.单一方向上设置padding值，如padding-left/right/top/bottom:10px;
7.padding的设置方法
padding：一个值 表示四周都有padding
padding：二个值 表示上下 左右 有padding
padding：三个值 表示上 左右 下 有padding
padding：四个值 表示上 右 下 左（即顺时针方向）有padding