盒子模型
页面布局三大核心：盒子模型，浮动，定位。学好盒子模型能非常好的帮助我们在布局页面。
1.1看透网页的布局本质
网页布局过程：
1.先准备好相关的网页元素，网页元素基本都是盒子Box.
2.利用CSS设置好盒子样式，然后摆放到相应的位置。
3.往盒子里面装内容
网页布局的核心：就是利用CSS摆盒子
1.2盒子模型组成
一个矩形的盒子，它就是所谓盒子模型：就是把html页面中的布局元素看做是
也就是盛装内容的容器，css盒子模型本质上是一个盒子。封装周围的html元素
它包括：边框，外边距，内边距 和实际内容。
记忆：竹板一打啊，别的咱不夸。盒子模型实际开发用处非常大 。border是边框，padding内边距，非常重要啦，边框与内容的距离主要就靠它。margin外边距，它是干啥哒，盒子与盒子的距离就靠它说话，盒子模型掌握了，你乐的像朵花
1.3边框
border可以设置元素的边框。边框有三部分组成：边框宽度，边框粗细样式，边框颜色。
border：border-width || border-style || border-color.
border-style: solid实线边框
border-style: dashed虚线边框
border-style: dotted 点线边框
边框简写：
border 5px solid red 这里面的顺序可以随意更改。
边框分开写
border-top /bottom /left / : 5px solid red;
1.4 表格的细线边框
border-collapse:collapse;
- collapsej就是合并的意思
- border-collapse:collapse 表示相邻边框合并在一起
1.5边框会影响盒子实际大小
边框会额外增加盒子的实际大小，因此我们有两种方案解决：
1.测量盒子大小的时候，不量边框。
2.如果测量的时候包含了边框，则需要width/height减去边框宽度。
1.6内边距
padding属性用于设置内边距，即边框与内容之间的距离
padding-left 左内边距
padding-right 右内边距
padding-top 上边距
padding-bottom 下内边距
1.7padding复合属性的写法
padding: 5px 表示上下左右都是5像素内边距 。
padding :5px 10px 表示上下内边距5px ,左右内边距都是5
padding:5px 10px 20px 表示上边距5px,左右边距10px,下边距20ppadding:5px 10px 20px 30px 表示上5排序，右内标边距10px，下边距20px;左边距30px
注意：
内容和边框有了距离，发生了2件事情
1.内容与内边距添加了内边距
2.padding影响盒子实际大小。
结局方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的边距大小即可
1.7外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件
1.盒子必须指定了宽度
2.盒子左右的外边距都设置为0
常见的有三种：
margin: 0 auto;
margin :auto;
1.8嵌套元素垂直外边距的塌陷
使用margin定义块级元素的垂直外边距时，可能会出现外边距的合并。
2、嵌套元素垂直外边距的塌陷
对于两个嵌套关系（父子）的块级元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 为父元素添加边框（恩断义绝框）
- 可以为父元素添加上内边距
- 可以为父元素添加 overflow:hidden
1.9清除内外边距
网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致。因此我们在布局面前，首先要清除下网页元素的内外边距。
*{
margin: 0px;
padding: 0px;
}
