Day5、盒模型

作用：

        规定元素之间的位置关系

---

 组成：        

        content(内容)、padding(内边距)、margin(外边距)、border(边框)，   

---

使用：

padding：内边距

        调整父级元素与子级元素的位置关系

padding的添加位置：

        通常添加到父级元素上的 会撑大当前容器大小 为保证盒子的页面布局，需要减去相应的padding值。

        添加到子级元素上，也会撑大容器大小。

padding属性值：

        padding的方向为顺时针（top、right、bottom、left），属性值设置-->一个值：上下左右，两个值：上下 左右，三个值：上 左右 下，四个值：         上 右 下 左。

padding不能设置为负值

---

margin ：外边距

        margin设置元素与元素之间的位置关系、哪个元素需要移动就给哪个元 素设置margin值。margin值不会撑大当前的盒子大小。

margin属性值:

        margin的方向为顺时针（top、right、bottom、left），属性值设置-->一个值：上下左右，两个值：上下 左右，三 个 值：上 左右 下，四个值：上 右 下 左。

margin可以为负值

重点：设置margin的时候必须要有包含框的接触

{margin:0,padding:0}浏览器默认样式

设置版心居中 版心选择器(margin:0 auto)

margin常见bug：

盒子大小的计算：

盒子实际占有的宽度区域：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

盒子实际占有的高度区域：

margin-top + border-top + padding-top +height + padding-bottom + border-bottom + margin-bottom