1-2-2【CSS核心样式】盒模型
老铁们，本节课中有许多案例不方便通过图片展示，希望老铁们自己动手实战，印象更深刻~
文章内容输出来源：拉勾教育大前端就业集训营
1.盒模型
- 概述：所有的HTML元素都可以看作盒子，CSS中用盒模型来对元素进行设计和布局。
- 属性：由5个属性来描述盒子的位置及尺寸，分别是宽度width，高度height，内边距padding，边框border，外边距margin。
| 属性 | 作用 |
|---|---|
| width | 描述盒子书写内容区域的宽度 |
| height | 描述盒子书写内容区域的高度 |
| padding | 描述盒子内边距的厚度 |
| border | 描述盒子边框线的厚度 |
| margin | 描述盒子外边距的厚度 |
2.盒模型区域划分
- 概述：盒模型的属性中，根据不同属性的效果，可以划分4个区域。
- 区域划分：
- 书写内容区域：盒子内展示文本or图片的区域，由width和height控制区域大小。
- 内边距区域：包裹盒子“书写内容”的第1层区域，由padding控制区域厚度。
- 边框区域：包裹盒子“书写内容&内边距”的第2层区域，由border控制边框的颜色、样式、厚度等。
- 外边距区域：包裹盒子所有其他区域的最外层区域，由margin控制区域厚度，此区域实际存在但不可见。
3.盒模型属性——width宽度
- 作用：设置书写内容区域的宽度。
- 属性值：
| 属性值 | 效果 |
|---|---|
| auto | 默认值，浏览器自动计算出实际宽度 |
| px为单位的数字 | 用像素值定义区域的宽度 |
| %为单位的数字 | 参考父元素宽度的百分比，定义区域的宽度 |
- 不设置width：浏览器根据标签的不同，会自动计算出实际的宽度。
说明：div等元素独占一行，则width的值会自动撑满父元素的宽度区域；span等元素不独占一行，则width的值根据其内部元素内容宽度决定的。
- <body>元素：该元素比较特殊，不需要设定width的属性，宽度会自动适应浏览器窗口的宽度。
4.盒模型属性——height高度
- 作用：设置书写内容区域的高度。
- 属性值：
| 属性值 | 效果 |
|---|---|
| auto | 默认值，浏览器自动计算出实际高度 |
| px为单位的数字 | 用像素值定义区域的高度 |
| %为单位的数字 | 参考父元素高度的百分比，定义区域的高度 |
- 不设置height：与width略有不同，元素的高度自适应内部元素内容的高度。
说明：在div属性中，我并没有设置高度，但实际上div的高度被里面的内容“撑起来”了。
- 注意：自动计算的高度，并不会将div里面盒子的外边距计算进来，其他的（边框、内边距、内容高度）都会计算进去。
说明：d1类盒子没有设置高度，d2类盒子5个属性都设置了，但是只有外边距没有撑开d1类盒子的高度。
5.盒模型属性——padding内边距
- 作用：设置元素的边框内部到书写内容区域之间的距离。
- 特点：可以去加载背景颜色，不能书写嵌套的内容。
- 属性值：常用以px为单位的数值。
padding: 20px;
说明：若如上述示例设置外边距，则4个方向（上下左右）的厚度是一样的。
- 分方向设定：padding是一个复合属性，可以根据内边距的方向不同划分为4个方向的单一属性。
| 单一属性 | 作用 |
|---|---|
| padding-top | 上方内边距宽度 |
| padding-right | 右侧内边距宽度 |
| padding-bottom | 下方内边距宽度 |
| padding-left | 左侧内边距宽度 |
说明：如图所示，4个方向设定不同的数值，对应不同宽度的内边距。
- 属性合写——四值法：
padding: 10px 20px 30px 40px;
说明：按照“上、右、下、左”的顺序，依次书写对应方向的内边距值。
- 属性合写——三值法：
padding: 10px 20px 40px;
说明：按照“上、右(左)、下”的顺序，依次书写对应方向的内边距值，其中，左右共享一个属性值。
- 属性合写——二值法：
padding: 10px 20px;
说明：按照“上(下)、右(左)的顺序，依次书写对应方向的内边距值，其中，上下、左右分别共享一个属性值。
- 属性合写——单值法：
padding: 10px;
说明：上下左右共享一个属性值，四个方向厚度相同。
6.盒模型属性——border边框
- 作用：设置的是内边框外面的边界区域，作为盒子实体化的最外层。
- 属性值：border是一个复合属性，且根据划分依据不同可以有两种单一属性的划分方式。
- 按照属性类型分：
- 边框宽度：border-width，常用px为单位。
- 边框形状：border-style，属性值为单词。
| 属性值 | 效果 |
|---|---|
| none | 定义无边框 |
| solid | 定义边框为实线 |
| dashed | 定义边框为虚线 |
| dotted | 定义点状边框 |
| double | 定义双线样式边框 |
| groove | 定义3D凹槽边框 |
| ridge | 定义3D垄状边框 |
| inset | 定义3D内容凹陷效果 |
| outset | 定义3D内容突出效果 |
说明：
- 工作中常用的有：solid和dashed（图中案例）；
- 3d效果有一些兼容问题，所以基本上是不用的。
- 按照边框的方向分：
| 属性名 | 作用 |
|---|---|
| border-top | 上边框属性 |
| border-right | 右边框属性 |
| border-bottom | 下边框属性 |
| border-left | 左边框属性 |
说明：每个方向的边框属性和border属性的设置方式类似，不同点在于，单个方向只负责对应方向边框的属性。
- 属性合写：可一次定义三个属性值，分别是“边框厚度、边框形状、边框颜色。
说明：如图所示，某个方向的属性值设定与border属性值设定是类似的，只是负责的方向不同而已。
7.盒模型属性——margin外边距
- 作用：设置的是盒子与盒子之间的距离。
- 特点：不能渲染背景，外边距占领的位置是透明的。
- 属性值：常以px为单位的数值。
margin的属性设置方式与padding一模一样，这里就不加以赘述了。
8.盒模型拓展——清除默认样式
- 作用：大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。
- 盒模型默认样式：
- 说明：大部分容器级标签都有默认内外边距，要么用标签选择器的并集方式，要么用通配符进行清除。
<style>
* {
margin: 0;
padding: 0;
}
body,div,h1,h2,h3,p{
margin: 0;
padding: 0;
}
</style>
说明：大型项目不使用通配符进行默认样式清除，建议使用并集选择器清除样式。
- ul和ol默认样式：
- 说明：有序（无序）列表中存在默认的前缀。
<style>
ol,ul {
margin: 0;
padding: 0;
list-style: none;
}
</style>
说明：list-style属性控制了列表中项的前缀样式，none则不展示任何前缀。
- a标签默认样式：
- 说明：a标签中存在字体颜色&下划线的默认样。
<style>
a {
color: skyblue;
text-decoration: none;
}
</style>
说明：工作中经常清除a标签的默认颜色和下划线属性，清除后可制作样式精美的超链接元素。
9.盒模型拓展——height的应用
- 高度的设定：根据不同的需求，高度属性可以设置也可以不设置。
- 不设置高度：会根据标签内部内容高度自动撑开。
- 设置高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。
说明：设定高度后，一旦内容高度超出盒子高度，就会出现显示问题，所以必须根据需求决定是否设置高度。
- 处理溢出——overflow属性
- 作用：设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。 可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。
- 属性值：
| 属性值 | 效果 |
|---|---|
| visible | 默认值，可见的，溢出部分直接显示 |
| hidden | 溢出部分直接隐藏，隐藏超出边框范围的内容 |
| scroll | 溢出部分出现滚动条，可以拖动滚动条查看隐藏内容，多出盒子的部分被隐藏，不论是否溢出，水平和垂直方向都会出现滚动条 |
| auto | 如果没有溢出就正常显示，有溢出则对应方向出现滚动条 |
说明：visible，也是溢出属性的默认值，默认溢出部分正常显示。
说明：hidden，溢出部分隐藏，无法查看。
说明：scroll，溢出部分隐藏，但可以通过拖动滚动条来查看。
说明：auto，溢出部分隐藏，存在溢出的方向才会出现进度条。
10.盒模型拓展——居中设置
- 文本水平居中
- text-align属性：设置为center则文本水平居中。
上节课讲过，这里不再赘述了。
- 文本垂直居中
单行文本：让文字行高line-height等于盒子高度 height。
多行文本：让元素高度自适应或者正好等于多行文字的高度，设置父元素内边距上下值相同。
- 元素水平居中
- 方法：针对类似<div>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。
说明：auto只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是auto，两边都要无限大，只能达到一个平衡，两边距离相同，所以盒子水平居中。
- 元素垂直居中
- 方法：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下内边距。
11.盒模型拓展——父子盒模型
- 概述：一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够(不考虑溢出情况)，需要遵循一个设置尺寸的规律:所有子元素的宽度加在一起不能大于父元素的宽度 width。
说明：
- 这里说的宽度，是子元素的width+padding+border+margin的加和。
- 为了避免错误的出现，计算or量取宽度时，一个像素都不能出错。
说明：如图所示，div宽度设置为350px，三个p标签盒子的宽度是360px，因为差了10px，所以第三个p盒子跑到了下一行。
- 特殊情况——盒模型自动内减：父子盒模型中，只有一个子元素，且子元素是类似 <div> 标签必须占一行的。不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。
说明：子盒子div并没有设置width属性，就算配置了内外边距&边框，width依然会自动缩减，保证盒子整体宽度=父盒子宽度。
12.盒模型拓展——margin塌陷现象
-
概述：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
-
同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。
说明：
- 第1个盒子下外边距为20px，第2个盒子上外边距为10px，你会发现第1、2个盒子之间的距离，实际上只有20px，这就是塌陷现象。
- 同级元素的塌陷，只存在于上下关系中。
- 父子元素塌陷：父子元素之间也会出现margin塌陷，父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin塌陷。
说明：父盒子上外边距为0px，但由于子盒子的上外边距为200px，发生了塌陷，所以父盒子跟着子盒子一起向下移动了200px。
- 解决方案：
- 同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
- 父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开;更加常用的方法，父子盒模型之间的距离就不要用儿子的margin，而是父级的padding挤出来。
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语：一花一世界，一木一浮生，诸君共勉！
