深入了解CSS

选择器的优先级

id > . > 标签

选择器的特异度

特异度指的是不同种类选择器的数量可以将选择器结合使用

<button class="btn"> 普通按钮</button>
<button class="btn primary"> 主要按钮</button>
<style>
 .btn{
  display: inline-block;
  color: #333;
 }
 .btn.primary{
  color: #fff;
  background: #218de6;
 }
</style>

结合使用的情况下，如果有相同的属性，就会更改属性值。

继承：某些元素会自动继承父元素的特性，而有些元素则不会。
显示继承：

* {
 box-sizing: inherit;
}
html{
 box-sizing: border-box;
}
.some-widget{
 box-sizing: content-box;
}

这样可以使用特定的格式进行显示，方便自定义和引用外部格式。

CSS求值过程

1.首先将样式规则和dom树一起传到filtering中

filtering: 筛选，将样式规则通过一些特定的条件进行筛选，得出声明值
Declared Values,一个元素的某些属性可能有多个声明值

2.将这些传入到cascading(就是通过样式规则中的选择器的优先级中将这些声明值里优先级最高的选择出，最为最终的属性值）

3.将上述的层叠值传入defaulting(初始值) 如果这个层叠值是空值，则将初始值赋给他。

4.再将这些不为空的指定值传到resolving(将一些相对值或者关键字转化为绝对值，如em转为px）

5.将这些计算值传到 formatting (将计算值进一步进行转化，关键字，百分比等等转化为绝对值)

6.将这些实际使用的值传到constraining (将小数像素值转为整数)

7.最终产生实际值

布局

布局相关技术
- 常规流
  - 块级
  - 行级
  - 表格布局
  - flexbox
  - grid布局
- 浮动
- 绝对定位
  
  布局示意图

width

指定content box 宽度

取值为长度百分数 auto

auto是浏览器根据其他属性确定

百分数是相对于容器的content box宽度

height

指定content box 高度

取值为长度百分数 auto

auto是根据其内容计算的

百分数是相对于容器的content box高度

容器有指定高度时，百分数才生效

padding

指定元素四个方向的内边距

border

指定容器边框样式，粗细和颜色

margin

指定元素四个方向的外边距

取值可以是长度，百分数，auto

青训营笔记