这是我参与「第五届青训营」伴学笔记创作活动的第3天

CSS

选择器的特异度

CSS的选择器根据特殊值来排名，越特殊排名越前。选择器的特异度是（Specificity），计算出每一个选择器的特殊值进行比较。

继承

某些元素会自动继承其父元素的计算值，除非显式制定一个值。如果一个元素没有设定例如颜色，那么就找其父级相关的设定。一般和文字相关例如颜色，字体大小的是可以继承的，但是和模型相关的属性例如宽度，是不可以继承的。而对于一些不可继承的属性，可以用*(通配选择器)和inherit。

*{
box-size:inherit;   //所有元素从父级去继承
}

如果一直往父级找都没有找到可以继承的话，或者是不可继承的但是又没有设定的，考虑初始值的设定。 CSS中每个属性都有一个初始值（例如backgroud-color的初始值为transparent,margin-left的初始值为0），可以使用initial关键字显式重置为初始值。

CSS的求值过程

求值的过程可能是空的，此时考虑默认值策略：继承或者使用初始值。因此计算完成后会有一个唯一的值

计算值和使用值有区别，浏览器拿到CSS的时候会马上可以计算出一个基本的值是计算值。但是有些时候有些值不能直接计算出来，需要实际值，考虑实际布局渲染的时候根据打开的页面才能计算出来的值。一般的继承是继承父级的计算值

布局

布局是指确定内容的大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算。
布局有三种相关技术：常规流，浮动，绝对定位
在常规流中有：行级、块级、表格布局、FlexBox、Grid布局
块级布局不会和其他盒子并排摆放，行级的盒子可以和其他级的盒子放在一行或者拆开成多行。块级适用于所有的盒模型属性，行级中盒模型的weigh,height不适用。
CSS的盒式布局：border-box

padding :指定元素四个方向的内边距，百分数相对于容器宽度
border: 有三种属性：border-width border-style border-color; 有四个方向：border-top,border-right, border-bottom,border-left
margin:指定元素四个方向的外边距，margin:auto,代表居中。margin在垂直方向上有距离的合并，不会相加，而是选择的最大值。

可以用overflow控制超出的部分

行级排版

Inline Formatting Context(IFC), 只包含行级盒子的容器会创建一个IFC
行级有：span,em,strong,cite,code等
display:block
IFC内的排版规则：

盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动（float）元素

块级排版

Block Formatting Context(BFC),某些容器会创建一个BFC
块级有：body,article,div,main,section,h1-6,p,ul,li等
display:inline
BFC内的排版规则：

盒子从上到下摆放
垂直的margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动的元素重叠

Flex Box

这是一种新的排版上下文的方式，它可以控制子级盒子的摆放流向、摆放顺序、盒子的宽度和高度、水平和垂直方向的对齐、是否允许折行。引入主轴和侧轴的概念，主轴可以用justify-content控制flex布局上下文的布局关系；侧轴可以用align-items来控制对齐关系。
通过Flexbility可以设置子项的弹性neng里

当容器有剩余空间的时候会伸展，当容器空间不够的时候，会收缩
flex-grow空间剩余时的伸展
flex-shrink空间不足时收缩的neng
flex-basis没有伸展或者收缩时的基础长度

Grid布局

相比于Flex Box的单一布局，Grid布局是一个二维的布局。
display:grid

grid-template-columns: 100px 100px 200px  //3列
grid-template-rows: 100px 100px  //2行

通过grid line的网格线来划分元素

.a{
grid-row-start:1;
grid-column-start:1;
grid-row-end:3;
grid-column-end:3;
}
//或者写成下面的形式
.a{
grid-area:1/1/3/3
}

定位

position的属性：

static:默认值，非定位元素
relative:相对自身原本位置的偏移不脱离文档流
- 在常规流里布局
- 相对于自己本应该在的位置进行偏移
- 使用top,left,bottom,right设置偏移长度
- 流内其他元素当它没有偏移一样布局
absolute:绝对定位，相对非static祖先元素定位

脱离了常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响

fixed:相对于窗口绝对定位

建议:学习CSS多看MDN和W3C CSS的规范

前端技术CSS-2|青训营笔记

CSS