前端基础之盒子嵌套

附上知识点：

1、网页布局的过程
    先准备好相关的网页元素，网页元素基本都是盒子box
    利用css设置好样式，摆放到合适的位置上去
    往盒子里面装内容
    
    本质就是利用css摆放盒子
2、盒子模型的组成（Box Model）
border 边框
content 内容
padding 内边距
margin 外边距

3、边框border
边框有三部分组成：宽度、样式、颜色
border-width:单位一般是px
border-style：solid、dotted、dashed、double
border-color：颜色

边框的复合写法
border：1px solid red ;没有顺序

边框分开写法：
border-top:1px solid red;//只设定上边框，其余的同理
border-bottom:10px dashed purple
边框会影响实际盒子的大小

padding 内边距
边框和内容区之间的距离
padding-left
padding-right
padding-top
padding-bottom

padding简写：
1、一个值：上下左右
2、两个值：上下、左右
3、三个值：上，左右，下
4、四个值：上、右、下、左

padding也会影响盒子的实际大小

margin 外边距，控制黑子和盒子之间的距离
margin-left
margin-right
margin-top
margin-bottom
margin的简写意义和padding完全一样

块级元素水平居中
margin:0 auto

行内元素和行内块元素的水平居中：给父元素添加text-align:center

相邻块元素垂直外边距合并：
当上下相邻的两个块元素（兄弟关系）相遇时，如果过上面的元素的有margin-bottom,下面的元素有上外边距margin-top,
则他们之间的垂直距离不是两者之和，而是取较大的那个值，这就是相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：
1、为父元素设置上外边框
2、为父元素设置上内边距
3、为父元素设置overflow:hidden

清除内外边距：
*{
    margin:0;
    padding:0;
}

运行代码：

成品展示：