margin 的取值规律与 padding 相同
示例代码：margin
margin-top 传递：
- 如果块级元素的顶部线和块级父元素的顶部线重叠，那么这个块级元素的 margin-top 值会传递给父元素
margin-bottom 传递：
- 如果块级元素的底部线和块级父元素的底部线重叠，并且父元素的高度是 auto，那么这个块级元素的 margin-bottom 值会传递给父元素
注：水平方向上的 margin 永远不会发生传递现象
如何防止出现传递问题？
-
给父元素设置
padding-top\padding-bottom -
给父元素设置
border -
给父元素或者子元素设置
display: inline-block -
以后理解得更深入，还会学到其他解决方法
建议：使用相应的属性去做对应的事情
-
margin 一般是用来设置兄弟元素之间的间距
-
padding 一般是用来设置父子元素之间的间距
代码：上下margin传递_01、上下margin传递_02
垂直方向上相邻的 2 个 margin (margin-top、margin-bottom) 有可能会合并为 1 个 margin，这种现象叫做collapse（折叠）
水平方向上的 margin (margin-left、margin-right) 永远不会 collapse
折叠后最终值的计算规则：
-
如果都是正数，最终值是：绝对值最大的那个正数值
-
如果都是负数，最终值是：绝对值最大的那个负数值
-
如果正数、负数都有，最终值是：最大正数和最小负数相加
如何防止 margin collapse？
-
只设置其中一个元素的 margin
-
条件允许的话，使用 padding 取代 margin
-
以后理解得更深入，还会学到其他解决方法
两个兄弟块级元素之间上下 margin 的折叠：
无内容块级元素内部 margin 的折叠：
无内容块级元素之间 margin 的折叠（折叠是可以连续的）：
块级元素折叠问题看似有点莫名其妙，实际上还是有实用之处的
- 比如连续段落之间的 margin，恰好需要这种折叠效果
============================================================================
边框很常见：
CSS属性 - border-width、border-color、border-style
边框宽度：border-*-width
-
border-top-width、border-right-width、border-bottom-width、border-left-width -
border-width是上面 4 个属性的简写属性
边框颜色：border-*-color
-
border-top-color、border-right-color、border-bottom-color、border-left-color -
border-color是上面 4 个属性的简写属性
边框样式：border-*-style
-
border-top-style、border-right-style、border-bottom-style、border-left-style -
border-style是上面 4 个属性的简写属性 -
边框样式的取值：
none：没有边框，边框颜色、边框宽度会被忽略
hidden：与 “none” 类似，多用在表格上，用于解决边框冲突
dotted：边框是一系列的点
dashed：边框是一条虚线
solid：边框是一条实线
double：边框有两条实线。两条线宽和其中的空白的宽度之和等于 border-width 的值
groove：边框看上去好象是雕刻在画布之内
ridge：和 grove 相反，边框看上去好象是从画布中凸出来
inset：该边框使整个框看上去好象是嵌在画布中
outset：和 inset 相反，该边框使整个框看上去好象是从画布中凸出来
示例代码：边框
CSS 属性 - border-top、border-right、border-bottom、border-left、border
border-top、border-right、border-bottom、border-left：分别设置 4 个方向的边框
边框颜色、宽度、样式的编写顺序任意
border：统一设置 4 个方向的边框
边框的形状可能是：矩形、梯形、三角形 等形状
实现三角形：
实现双色平分：
以下属性对行内级非替换元素不起作用：
width、height、margin-top、margin-bottom
以下属性对行内级非替换元素的效果比较特殊：
padding-top、padding-bottom、border-top、border-bottom
示例代码：行内级元素注意点_1、行内级元素注意点_2
圆角的应用十分广泛：
圆角半径相关的属性：border-*-*-radius
-
border-top-left-radius左上角 -
border-top-right-radius右上角 -
border-bottom-right-radius右下角 -
border-bottom-left-radius左下角
border-*-*-radius 定义的是四分之一椭圆的半径：
- 可以设置 2 个值，分别是 水平半径 和 垂直半径（不设置，就跟随水平半径的值）
border-top-left-radius: 55pt 25pt效果如下：
- 还可以设置百分比
参考的是 border-box 的宽度和高度（即元素实际占用尺寸 border + padding + width\height）
border-radius 是一个缩写属性：
斜线 / 前面是水平半径，后面是垂直半径
4 个值的顺序是 top-left、top-right、bottom-right、bottom-left（顺时针方向）
-
如果 bottom-left 没设置，就跟随 top-right
-
如果 bottom-right 没设置，就跟随 top-left
-
如果 top-right 没设置，就跟随 top-left
注：border-radius 大于或等于 50% 时，就会变成一个圆：
示例代码：border-radius
===================================================================================
outline 表示元素的外轮廓
-
不占用空间
-
默认显示在 border 的外面
-
每个部位都是完整连接的，不会像 border 那样有可能会断开（比如行内级非替换元素的换行）
outline 相关属性：
-
outline-width -
outline-style：取值跟 border 的样式一样，比如 solid、dotted 等 -
outline-color -
outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似 -
outline-offset：设置 outline 和 border 之间的间距
outline 应用实例：
- 去除 a 元素、input 元素的 focus 轮廓效果
示例代码：outline
======================================================================================
box-shadow 属性可以设置一个或者多个阴影
-
每个阴影用
<shadow>表示 -
多个阴影之间用逗号
,隔开，从前到后叠加 -
<shadow>的常见格式如下：
-
第 1 个
<length>：水平方向的偏移，正数往右偏移 -
第 2 个
<length>：垂直方向的偏移，正数往下偏移 -
第 3 个
<length>：模糊半径 (blur radius) -
第 4 个
<length>：延伸距离 -
<color>：阴影的颜色，如果没有设置，就跟随 color 属性的颜色 -
inset：外框阴影变成内框阴影
box-shadow 示例：
示例代码：box-shadow
练习：
=======================================================================================
text-shadow 用法类似于 box-shadow，用于给文字添加阴影效果
text-shadow 同样适用于 ::first-line、::first-letter
示例代码：text-shadow
======================================================================================
box-sizing 用来设置盒子模型中宽高的行为
- content-box
padding、border 都布置在 width、height 外边
元素的实际占用宽度 = border + padding + width
元素的实际占用高度 = border + padding + height
- border-box
padding、border 都布置在 width、height 里边
元素的实际占用宽度 = width
元素的实际占用高度 = height
总结
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
