对CSS更为深入地理解，涉及盒模型等
这是我参与「第四届青训营 」笔记创作活动的的第2天
- 晚上终于把深入CSS看完了，又获得了不少感触
选择器的优先次序
选择器优先次序有如下两个规律：
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照”就近原则”来判断
继承
即某些元素，如<strong>标签里面的元素，当没有显式地指定标签样式时，其会继承父类元素样式，例如继承<p>内的元素样式。当某些元素不能隐式继承父类元素样式时，可以通过inherit来显式继承费雷元素样式。当没有可以继承的值（当继承时会一层一层向上寻找可以继承的值），其会应用初始值。
若要显式应用初始值，应使用initial关键字。
CSS渲染的流程
CSS渲染其实可以简单理解为以下几步：
- 将DOM树和CSS样式规则合并为一个渲染树
- 第二步根据讲师的图，拆分成了很多个步骤，但实际上就是根据每个节点值来计算几何信息，其中还需要考虑数据的合理性等，总之最后会生成实际值
- 最后一步也就是把每个节点绘制到屏幕上
布局
布局大概是我认为CSS最重要的内容之一了，布局的好坏直接影响了整个页面的直观性和美观性。好的布局能让人一目了然网站的用处，同时也知道自己如何去获取自己想要的东西。
所有的HTML元素都可以视为盒子，它包含了：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。可以调整距离。
- Border(边框) - 围绕在内边距和内容外的边框。可以调整样式。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。可以调整距离。
- Content(内容) - 盒子的内容，显示文本和图像。可以调整高度和宽度
使用margin:auto可以实现水平居中的效果（left和right都设置成auto）。
当文字超出盒子的大小时，可以使用overflow属性来改变超出部分的可浏览性。当设置为visible时，超出部分时直观可见的，但是这样不美观；当设置为hidden时，超出部分被全部隐藏，但是这样会造成可读性降低；因此最好是设置成scroll，这样读者可以滚动显示超出部分文字内容，既兼顾了盒模型的不变，又兼顾了文本的可读性。
盒子包含了块级盒子和行级盒子，而HTML里的块级元素生成块级盒子，行级元素则生成行级元素。常见的块级元素即为body、article、div、main、section、h1-h6、p、ul、ol等；而常见的行级元素即为span、em、strong、cite、code等。
块级（Block Level Box）不和其它盒子并列拜访，适用于所有的盒模型属性。
行级（Inline Level Box）和其它行级盒子一起放在一行或拆分成多行，盒模型中的width和height属性不适用。
盒模型的呈现使用display属性来体现：
block：块级盒子inline：行级盒子inline-block：本身是行级，可以放在行级中，也可以设置宽和高，但无法被拆分。这个概念其实也比较好理解，讲师用图片类比说明了这一概念，即：一行可以放多行图片，但是不可能把一张图片拆分成两块放在不同的地方去了none：排版时完全忽略
布局有三大方法：
常规流
只有根元素、浮动和绝对定位的元素会脱离常规流，其它元素都在常规流之内（in-flow），在常规流的盒子，会依照某种排版上下文完成布局
行级排版上下文
- 只包含行级盒子的盒子会创建一个IFC（Inline Formatting Context），其排版规则：
- 盒子在一行内水平摆放
- 一行放不下时换行显示
text-align属性决定水平对齐vertical-align属性决定垂直对齐- 避开浮动元素
- 只包含行级盒子的盒子会创建一个IFC（Inline Formatting Context），其排版规则：
块级排版上下文
- 某些容器会创建一个BFC（Block Formatting Context），其排版规则：
- 盒子从上到下摆放
- 垂直margin合并
- 不会和浮动元素重叠
- BFC内盒子的margin不会和外部的合并
- 某些容器会创建一个BFC（Block Formatting Context），其排版规则：
当行级元素里面包含块级元素等冲突时，CSS会帮我们生成两个匿名的盒子包围住行级盒子，从而实现正常排版。
- 使用Flex Box（display：flex），一种新的排版上下文，实现自定义排版：
- 摆放流向
- 摆放顺序
- 盒子的高度和宽度
- 水平和垂直方向的对齐
- 是否允许折行
Flex Box拥有灵活的对齐方式。
- Gred布局方式（display：gred）
可以将Flex理解为一维的布局，而把Gred视为二维的布局。
使用grid-template相关属性来将容器划分为网格，然后设置每个子项占哪些行/列。
浮动
形象地来说，可以把浮动元素比作成水，其可以围绕着别的元素浮动。
浮动元素还有一个重要的应用，就是在浏览器的大小不够时，浮动元素会自动调整自己的位置，以便能够全部显示出来。
设置float:left或float:right后，一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
实际上有了Flex和Gred之后，可以用前两者代替很多float实现的布局效果。
绝对位置
position有如下属性：
static：默认值，非定位元素relative:相对自身原本位置偏移，不脱离文档流。使用top、left、bottom、right设置偏移长度absolute:绝对定位，相对于最近的非static祖先元素（若没有定义其它任何非static元素，则根据根元素定位）定位。其脱离了常规流，不会影响其它元素的布局fixed:相对视口绝对定位。同样脱离常规流，不会影响其它元素的布局
总结
学习CSS的几点建议：充分利用MDN和W3C CSS规范，不断学习。
今天的课程算是比较长的，并且干货满满，我算是重新学习了一遍CSS，又学到了很多新的知识，对CSS有了不少新的理解和体会，希望接下来的青训时光能学到更多东西，真正做到项目驱动学习，实现技术上的增长。