这是我参与「第四届青训营」笔记创作活动的的第3天
1、选择器的优先级
我们来看下面这段代码，这里我们对同一个标签通过不同的选择器使用了两种不同颜色的样式表，那么实际上这个样式表到底是什么颜色呢？
<article>
<h1 class="title">字节跳动青训营</h1>
</article>
<style>
.title{
color : blue ;
}
article h1 {
color : red ;
}
</style>
选择器优先级的原则是：特殊级别越高的选择器优先级越高，即id选择器大于伪类选择器大于标签选择器，多个class的选择器大于较少个class的选择器,优先去执行元素中特有的部分。
2、选择器的继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。 在HTML标准中，如果一个元素找不到样式表，就把其父元素的样式应用于该元素。
3、属性的初始值
所有的属性都有一个默认的初始值，如果一个标签没有继承到任何一个样式表，那么就使用的是初始值。
属性设置为initial就可以将其显示设置为初始值。
4、CSS的求值过程
CSS样式表的求值过程如下所示：
5、盒模型
标准盒模型组成如下图：
margin，也就是外边距。外边距规定了两个盒模型之间的距离.border，也就是边界。边界决定了一个盒模型的最外层。边界里面的就是padding，即内边距。内边距决定了内容到边框中间的距离.content就是实际的内容。
常规流布局模式——块元素与行元素
在盒模型布局中，一般分为两种，一种叫做块级（Block Level Box），一种叫做行级（Inline Level Box）。块级元素不能和其他的盒模型并列摆放，但可以使用所有的盒模型属性；行级元素需要和其他的行级元素放在一行或者放在几行中呈现，不能使用width和height属性。
行元素的排版
如果一个盒模型内只有行元素，那么就会创建一个行内格式化上下文（Inline Formatting Context，简称IFC）。一个IFC的排版规则是这样的：里面所有的元素会在一行内水平摆放，一行放不下的时候则换行显示；text-align属性决定了一行内盒模型的水平对齐；vertical-align属性则决定了一个元素在行内的垂直对齐；并且其会避开浮动元素。
块元素的排版
当我们创建某些块元素的时候，就会创建一个块级格式化上下文（Black Foamattting Context）。这些块元素可以是根元素、也可以是浮动元素/绝对定位元素/inline-block、也可以是Flex子项和Grid子项、还可以是overflow属性不为visible的块元素、也可以是display属性为flow-root的元素，其中有些我们之后再讲。
Flex Box
Flex Box是一种新的盒模型，它可以用来控制子盒模型的摆放朝向、摆放顺序、每个盒子的宽高、水平和垂直对齐以及是否允许折行等属性。
