这是我参与第五届青训营伴学笔记创作活动的第3天
CSS
属性选择器
- [name] 选中带有该属性名的标签
- [name=”value”] 选中属性值为value的标签
- [name^=”v”] 选中属性值开头为v的标签
- [name$=”v”] 选中属性值结尾为v的标签
初始值
每个属性都有一个初始值，如果它继承了父级的属性值，可以使用initial设置为原来的值
CSS获取值的过程
被解析的DOM树与编写好的样式规则，通过选择器等方式筛选，选择得到的声明值根据层叠关系，得到层叠值，作为指定值，指定该属性唯一要渲染到浏览器的值。当层叠值为空的时候，会使用默认值，即继承或初始值。
如果指定值为相对值，则会转化为绝对值，例如em转为px，得到计算值。计算值经过formatting将关键字、百分比等转化为绝对值，成为使用值。使用值不再有相对值或者关键字，但是会有浏览器无法渲染的小数像素。使用值将小数转化为整数之后，成为实际值。
constraining也会对属性之间的限制进行计算。比如，max-width和百分比width，当宽度扩大到max-width的值就不会再扩大。
如果标签有继承的值，为父元素的计算值。
布局
Flex布局和Grid布局是目前用到的最多的两个布局，Flex布局能够将UI组件沿主轴和侧轴两个方向有序的排版；Grid能够更方便地自定义UI组件的排版，类似手机的填俄罗斯方块的小组件。
Flex布局
Flex有两个方向，主轴和侧轴，可以通过flex-direction属性调整主轴和侧轴的方向。
justify-content是主轴排列的属性
align-items是侧轴排列的属性
Flex的UI组件可以按比例伸缩
Flex是伸缩简写形式
Grid布局
Grid布局是自定义的一个一个网格的布局，可以将UI组件放入网格布局中，占一个或多个网格。
网格的划分是通过grid-template属性，设置行列大小来划分。其中，1fr是代表占剩余空间的一份。
网格的位置标记可以按二维坐标点理解，从1开始。
可以通过设置所占网格的4个顶点，将UI组件放入不同的位置。
总结
这节课学到了CSS获取值并且渲染的原理，以及实用的grid布局，期待能够实战中丝滑地编写CSS代码，创造美观的UI。
标题：走进前端技术栈 - CSS - 掘金
