1、CSS之选择器及其优先级
!important > (权重1000)内联样式 > (权重100)ID选择器 > (权重10)类选择器、属性选择器、伪类选择器 > (权重1)元素选择器、伪元素选择器；
CSS权重：https://www.w3cplus.com/css/css-specificity-things-you-should-know.html
通配选择器 `*` 对权重没有任何贡献；
混合选择器权重叠加。例 #id .class的权重为 110；
属性选择器：
伪类选择器：
2、常见的伪类选择器
参考链接：https://blog.csdn.net/weixin_44570988/article/details/88931559
2、CSS之定位
Position的属性值有：
1. Absolute：绝对定位，脱离文档流，是相对于最近的且不是static定位的父元素来定位。
2. Fixed：绝对定位，脱离文档流，是相对于浏览器窗口的可视区域来定位的，是固定的，不会跟屏幕一起滚动。
3. Relative：相对定位，不脱离文档流，是相对于其原本的位置来定位的。
4. Static：默认值，没有定位。
5. Inherit：继承父元素的position值。
3、CSS之Flex布局
flex布局：
6个设置在flex容器上的属性：flex-direction、flex-wrap、flex-flow、justify-content、align-item、align-content；
6个设置在flex容器里元素的属性：flex-grow、flex-shrink、flex-basis、flex、order、align-self；
4、CSS之三类元素
4.1块元素
块元素的特性
1.独霸一行，总是在新行上开始
2.宽度缺省是它父级元素的100%，除非设定一个宽度
3.高度、行高、外边距、内边距都可以设置
4.可以容纳其他内联元素或者其他块元素
常见的块元素：div，p，h1-h6，hr，table
4.2行内元素 inline element
行内元素的特性
1.和其他元素都在一行上，遇到父级元素边界会自动换行
2.高、行高以及内外边距都不可以改变
3.宽度与内容一样宽，且不可改变
4.行内元素只能容纳文本或者其他行内元素
对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效
常见的行内元素：a，span，q，input，select
4.3行内块元素
行内块元素的特性
1.元素排列在一行
2.宽度默认由内容决定
3.元素间默认有间距
4.支持宽高、外边距、内边距的所有样式的设置
常见的行内块元素：img，button
5、CSS之动画
css实现动画效果分为两步：
1.使用@keyframs + 动画名 定义动画，如下图。
2.在需要动画的样式中定义属性animation使用动画；
6、CSS之过渡
过渡属性transition，例transition:width 2s,height 2s;
7、CSS之2D/3D转换
8、Less
1.变量
@valueName:1px;
.style1{
width:@valueName;
}
2.嵌套
编译前：
#a {
margin: 10
.b {
padding: 20
}
}
编译后：
#a {
margin: 10
}
#a .b {
padding: 20
}
3.Mixin
普通混合：编译后定义的混合(本例中.center )会输出到css文件中
.center {
text-align: center
}
.a {
.center
}
不带输出的混合：混合后加一个括号()，编译后定义的混合(本例中.center )不会输出到css文件中
.center() {
text-align: center
}
.a {
.center
}
带参数的混合：可以在定义时加入参
.m($a, $b) {
}
带参数并且有默认值的混合
.m($a:10px, $b:pink) {
}
命名参数：对于多参数混合的调用，可以通过@b:red的方式指定要给那个参数赋值
.m($a:10px, $b:pink) {
}
.n {
.m(@b:red)
}
arguments变量：用@arguments表示mixin的所有入参
.b(@a, @b, @c) {
border: @arguments
}
.c {
.b(1px, solid, black)
}
4.运算
在Less中可以进行加减乘除的运算，计算双方只有一方带单位(px)即可
.a {
width: (100 + 100px)
}
5.继承
.a {
}
.b {
$:extend(.a)
}
性能比混合高
灵活度比混合低: 不支持参数
6.避免编译、!important
通过~""将不想被编译的Less代码放到双引号中，这样编译器会讲内容默认输出到编译后的css文件中
!important直接加在样式后面即可9、css渲染规则
css的渲染规则，是从上到下，从右到左渲染的。
.main h4 a { font-size: 14px; }
渲染过程是这样的：首先先找到所有的 a，沿着 a 的父元素查找h4，然后再沿着 h4，查找.main。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素的 html 都没有匹配，则这条路径不再遍历。下一个 a 开始重复这个查找匹配，直至没有a继续查找。
10、选择器等级
选择器是不分上下级的。只管优先级。
第一等：内联样式，如: style=””，权值为1000。
第二等：ID选择器，如：#content，权值为0100。
第三等：伪类选择器>属性选择器>类选择器，如.content，权值为0010。
第四等：类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
权值相同时后定义的覆盖先定义的。
权值是可以叠加的，但是不能越界。意思是及时你有11个标签选择器一起，也不如一个类选择器。
