这是我参与[第四届青训营]笔记创作活动的第1天，对于今天的课程，我总结了一些自己认为还不够了解的地方
CSS渲染
CSS渲染的过程分为如下步骤：
- 首先将所有的CSS（内联，内部，外部）都混合在一起，然后和DOM tree一起通过过滤，选择声明有效值
- 根据CSS选择器的优先级，筛选出优先级最高的样式。
- 在筛选出DOM tree的样式后，会对元素没有样式的值设置为默认值或继承父元素的值。
- 在所有元素的样式都确定好后，将相对值进行转化，例如em转化为px
- 之后再将百分比的值转换为绝对值
- 转换后的值可能有小数，这时便会将小数值转换为整数值
属性的继承
定义：特定的一些属性可能会向下传递到子孙元素。
可以继承的属性有:text-indent、text-align、line-hegiht、word-spacing、letter-spacing、text-transform、visibility、color、cursor。
除此之外，还可以利用inherit进行显性继承
/* 设置二级标题的颜色为绿色 */
h2 { color: green; }
/* 但如果h2的父组件颜色是其他颜色，则会继承父组件的颜色 */
#sidebar h2 { color: inherit; }
Border的其他用法
border除了能够设置盒子边框外，还能用于写三角形
在我们通常设置border的时候，最终显示的如下图所示
当我们把border再缩小一点，会发现逐渐呈现为梯形
当我们把大小设置为0时，我们可以看到有4个颜色不同的三角形，那么我们就可以利用这个原理，去控制这四个方向的border，来实现自己想要的三角形
BFC
本质：是块级一种渲染规则,与其他普通元素不在同一个维度空间，元素内的子元素不受外界干扰，同时也不干扰外部
特点:
- 内部的盒子都是呈块状，一个个的放置
- 相邻的box的上下margin会相互合并，取两者的最大值
- 计算高度时，会把浮动元素也计算在内
- 并且不会与外部的float元素重叠
实现方法
- 将盒子设置为浮动元素
- 将元素设置为绝对定位元素(fixed or absolute)
- 将overflow设置成除visible以外的值
