这是我参与2022首次更文挑战的第12天
页面布局要学习三大核心：盒子模型、浮动和定位。学习好盒子模型能非常好的帮助我们布局压面。
1.看透网页布局的本质
网页布局过程：
1）先准备好相关的网页元素，网页元素基本都是盒子Box。
2）利用CSS设置好盒子样式，然后摆放到相应的位置。
3）往盒子里面装内容。
网页布局的核心本质：就是利用CSS摆盒子。
2.盒子模型（Box Model）组成
所谓盒子模型：就是把HTML页面中的布局元素看成是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。
3.边框（border）
border可以设置元素的边框。边框由三部分组成：边框宽度、边框样式和边框颜色。
1）语法：
border:border-width || border-style || border-color
CSS边框属性允许你指定一个元素边框的样式和颜色。
2）边框缩写语法：
border: 1px solid red；没有顺序
3）边框分开写法：（注意边框的层叠性，简化代码）
border-top: 1px solid red；没有顺序。只设定上边框，其余方向同理。
top-上； bottom-下； left-左； right-右
4.表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
1）语法：
border-collapse：collapse；表示相邻的边框会合并到一起
2）注意：
collapse单词是合并的意思。
5.边框会影响盒子实际大小
边框会额外增加盒子的实际大小，有以下两种解决方案：
1）测量盒子大小的时候，不量边框。
2）如果测量的时候包含了边框，则需要width/height减去边框宽度。
6.内边距（padding）
1）padding属性用于设置内边距，即边框与内容之间的距离。
2）padding属性(简写属性)可以有四个值。(四个均为重点)
3）当我们给盒子指定padding值之后，发生了两件事情：
a.内容和边框有了距离，添加了内边距。
b.padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
解决方案：如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
4）如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小；若加了其中一个属性值，那么盒子会被撑开。
