前端与CSS的深入学习1 | 青训营笔记
这是我参与 [第五届青训营] 伴学笔记创作活动的第 2 天。这节课学习CSS的特异度，继承，计算及布局，布局中需要的一些相关技术，加深对CSS进一步认识。
一、CSS选择器的特异度Specificity
在遇到多个选择器中匹配同一个内容，需要根据特异度的值来确定，及根据选择器的特殊程度来选择，越特殊的选择器他的特异度越高。按照id（#）、（伪）类（.）、标签（E）进行分类比较。
二、CSS继承
在CSS中某些属性会自动继承其父元素的计算值，除非显式指定一个值。注：在CSS中与文字相关内容是可以继承的，但是和模型相关的是不能继承的，例如像素。在继承中，是继承父级的计算值。
- 情况一：当遇到不可继承的模型，我们要让他继承父结点的值，这时我们可以使用inherit来显示的继承。具体操作是使用*通配符对全局内容进行显式继承，使用语句box-sizing:inherit;
- 情况二：当一层层找上去后，找不到父元素的值，或者模型本身不能继承也没有设置他的样式，这时就需要初始值。在CSS中，每个属性都有一个初始值，例如background-color 的初始值为transparent，margin-left的初始值0；也可以使用initial关键字显示重置为初始值，例如 background-color：initial
三、CSS求值
求值过程是浏览器在打开HTML文件时，会解析CSS中的样式，对每一个元素进行一系列复杂计算，求出最后的实际值。具体步骤见下面的链接
由于在听课中，求值过程比较复杂，因此直接调用学习资料的链接。
注意计算值和使用值是不同的，使用值中不会再有相对值或关键字的。
四、CSS布局Layout
在使用CSS进行页面布局时，要确定内容的大小和位置的算法，并依据元素、容器、兄弟节点和内容等信息来计算盒子的具体样式。
CSS在布局中主要使用3个相关的技术，分别是常规流、浮动和绝对定位。常规流包括了行级、块级、表格布局、FlexBox、Grid布局；浮动是产生图片和文字的一种浮动效果；绝对定位可以在常规流的上面改变元素的位置，不会对常规流有什么影响。
在一个box中有他的margin,border,padding,height,width及content。
- width：指定content box 宽度，取值为长度、百分数、auto，auto由浏览器根据其他属性确定，百分数相对于容器的content box宽度；
- heigth：指定content box 高度，取值为长度、百分数、auto，auto取值由内容计算得来，百分数相对于容器的content box高度，容器有指定的高度时，百分数才生效；
- padding：指定元素四个方向的内边距，百分数相对于容器宽度
- border：指定容器边框样式、粗细和颜色，他有三种属性和四个方向。三种属性分别是：border-width、border-style、border-color。四个方向：border-top、border-right、border-bottom、border-left
- margin：指定元素四个方向的外边框，取值可以是长度、百分数、auto，百分数相对于容器宽度，并且可以使用margin:auto水平居中
- box-sizing:border-box，他是包含border在内的box，使用偏多
- overflow，固定box属性后，当box中输入内容过多发生溢出，就可以使用overflow属性，当属性值是visible是讲所有内容展示出来，hidden是隐藏掉多余的部分，scroll是当内容超出时进行滚动浏览。
五、个人总结
这一节课，学习了CSS的特异度，继承，求值，布局。特异度是针对于多个选择器对应同一内容时应选择哪一个选择器的样式；继承是当一些元素没有对应的样式时，就会寻找上一级的父节点的样式进行继承；求值过程是浏览器在打开HTML文件时，会解析CSS中的样式，对每一个元素进行一系列复杂计算，求出最后的实际值；布局对盒子设置它的外框、内框、高，宽，边距等。这节课不但学习了文本如何设置样式，还讲到了整体的布局该如何设计，总体对css有了较深一步的了解。
