css整理之-----------基本知识

css 解析

　　css 从右边往左开始解析，过多的嵌套会影响性能，最好不要超过三层。css 尽量的复用代码块，减小重复代码

css 优先级

　　css Specificity中文通常译为css优先级、css权重。相比权重，优先级更好理解。简单理解就是一个DOM元素有多个css样式设置，优先级高的那个样式被应用，其余css设置不生效的问题，这是由于在其余地方定义了一个更高的优先级样式，从而致使其余地方设置的样式不生效。

根据w3c标准 这个优先级是根据计算选择者的特性来决定，能够理解为根据选择器的类型来决定，他们的类型分为a、b、c，他们的数目计算规则以下，在比较权重时, 按照 a => b => c 的顺序进行比较。

计算规则

• 计算选择器中ID选择器的数量（= a）
• 计算选择器中的类选择器，属性选择器和伪类的数量（= b）
• 计算选择器中类型选择器和伪元素的数量（= c）
• 忽略通用选择器、not()伪类
• 给元素添加的内联样式 (例如，style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，所以可看做是具备最高的优先级。
• !important 例外规则，当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其余声明

1 * / * a = 0 b = 0 c = 0->特异性= 0 * /
2 LI / * a = 0 b = 0 c = 1->特异性= 1 * /
3 UL LI / * a = 0 b = 0 c = 2->特异性= 2 * /
4 UL OL + LI / * a = 0 b = 0 c = 3->特异性= 3 * /
5 H1 + * [REL = up] / * a = 0 b = 1 c = 1->特异性= 11 * /
6 UL OL LI.red / * a = 0 b = 1 c = 3->特异性= 13 * /
7 LI.red.level / * a = 0 b = 2 c = 1->特异性= 21 * /
8 ＃x34y / * a = 1 b = 0 c = 0->特异性= 100 * /
9 ＃s12：not（FOO）/ * a = 1 b = 0 c = 1->特异性= 101 * /

1. 当有重复的选择器会累加计算 如 LI.red.level / * a = 0 b = 2 c = 1->特异性= 21
2. !important > 行内 > a > b > c
3. 若是a、b、c 相同权重，后面的覆盖全面的样式

不太严谨的理解

根据最新的标准这个是错误的

css继承

　　有些样式能够直接继承父元素的样式，不能继承的默认是初始值。常见可继承属性以下

一、字体系列属性

　　font-family：字体系列

　　font-weight：字体的粗细

　　font-size：字体的大小

　　font-style：字体的风格

二、文本系列属性

　　text-indent：文本缩进

　　text-align：文本水平对齐

　　line-height：行高

　　word-spacing：单词之间的间距

　　letter-spacing：中文或者字母之间的间距

　　text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）

　　color：文本颜色

三、元素可见性

　　visibility：控制元素显示隐藏

四、列表布局属性

　　list-style：列表风格，包括list-style-type、list-style-image等

五、光标属性

　　cursor：光标显示为什么种形态

css 自定义属性

　　css 能够自定义属性（一般叫css 变量），好比： --main-color: black; 由var() 函数用于读取值

1 color: var(--main-color);

• 声明一个自定义属性，属性名须要以两个减号（--）开始，属性值能够是任何有效的CSS值
• 声明的变量存在做用域，属性仅在匹配当前选择器及其子孙能够访问，因此通常全景变量在跟伪类 :root {} 中声明，局部变量在某个特定的选择器声明
• 自定义属性能够继承，在子、孙元素中能够直接使用
• var()函数还可使用第二个参数，表示变量的默认值，color: var(--xxx, #7F583F)
• 可使用js来操做这个变量

 1 // 获取任意 Dom 节点上的 CSS 变量
 2 getComputedStyle(element).getPropertyValue("--my-var");
 3 // 修改一个 Dom 节点上的 CSS 变量
 4 element.style.setProperty("--my-var", jsVar + 4);
 5 
 6 //读取全局
 7 let root = getComputedStyle(document.documentElement);
 8 let color = root.getPropertyValue('--color').trim();
 9 console.log(color);
10 
11 //改变
12 document.documentElement.style.setProperty('--color', 'yellow');
13 let color = root.getPropertyValue('--color').trim();
14 console.log(color); 
15 //删除
16 document.documentElement.style.removeProperty('--color');
17 let color = root.getPropertyValue('--color').trim();
18 console.log(color);

若是变量值带有单位，就不能写成字符串

1 :root {
2   --bg1: red;
3   --mt1: 20; // 数值须要与calc*()函数拼接
4   // --ml1: "20px"; // 无效，带有单位不要写成字符串
5   --ml1: 20px; // 带有单位时不要写成字符串 
6 }

若是变量值是数值，不能与数值单位直接连用

1 .wrap2 {
2   // 无效
3   // margin-top: var(--mt1)
4   margin-top: calc(var(--mt1) * 1px);
5   margin-left: var(--ml1);
6 }

codePen

与传统 LESS 、SASS 等预处理器变量比较

相较于传统的 LESS 、SASS 等预处理器变量，CSS 变量的优势在于:

1. CSS 变量的动态性，能在页面运行时更改，而传统预处理器变量编译后没法更改
2. CSS 变量可以继承，可以组合使用，具备做用域
3. 配合 Javascript 使用，能够方便的从 JS 中读/写

CSS 自定义属性可让 JavaScript 与 CSS 通讯了。

css 重绘、回流/重排

重绘

　　当咱们对 DOM 的修改致使了样式的变化、却并未影响其几何属性（好比修改了颜色、背景色等），浏览器不需从新计算元素的几何属性、直接为该元素绘制新的样式，这个过程叫作重绘。  

回流

　　当咱们对 DOM 的修改引起了 DOM 几何尺寸、结构的变化（好比修改元素的宽、高或隐藏元素等），浏览器须要从新计算元素的几何属性（其余元素的几何属性和位置也会所以受到影响）从新生成渲染树，而后再将计算的结果绘制出来，这个过程就是回流（也叫重排）

 

回流必定会产生重绘，重绘不必定会回流，好比只有颜色改变就只会发生重绘而不会引发回流，每一个页面至少经历一次回流（在页面第一次加载）

哪些实际操做会致使回流与重绘

1. 添加、删除元素 (回流+重绘)   
2. 隐藏元素，display:none(回流+重绘)，visibility:hidden (只重绘，不回流)  
3. 改变元素位置，如改变top、left或移动元素到另外1个父元素中 (重绘+回流)   
4. 改变浏览器大小 (回流+重绘)   
5. 改变浏览器的字体大小 (回流+重绘)   
6. 改变元素的padding、border、margin (回流+重绘)   
7. 改变浏览器的字体颜色（只重绘，不回流）   
8. 改变元素的背景颜色（只重绘，不回流）
9. 改变元素尺寸 如边距、填充、边框、宽度和高度 (回流+重绘) 
10. 页面开始渲染 (回流+重绘)

规避回流与重绘

1. 避免在循环中一条一条的修改样式
2. 最好使用类名去切换样式
3. 对于复杂的dom操做，能够考虑将DOM结点设为none 在操做，操做完成以后在显示出来

css 经常使用单位

1. px：相对单位，页面按精确像素展现
2. em：相对单位，基准点为父节点字体的大小，若是自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
3. rem：相对单位，相对根节点html  font-size字体大小来计算
4. vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%
5. vh：viewpoint height，视窗高度，1vh等于视窗高度的1%
6. %：百分比，相对父元素的尺寸来计算
7. vmin：vw和vh中较小的那个
8. vmax：vw和vh中较大的那个

作移动页面开发时，若是使用 vw、wh 设置字体大小（好比 5vw），在竖屏和横屏状态下显示的字体大小是不同的。

因为 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就能够用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。