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

深入CSS

选择器的特异度

<article>
  <h1 class="title">拉森火山国家公园</h1>
</article>

<style>
  .title {
    color: blue;
  }
  
  article h1 {
    color: red;
  }
</style>

以上那个样式会生效呢？通常选择器的特异度(优先级)决定了那个样式会生效。

计算方法：数出选择器中 id 、（伪）类、标签的个数，从左往右（特殊性依次减小）排成三位数。这个三位数就是选择器的特异度。如果特异度相同顺序靠后的规则生效。

继承

某些属性会自动继承父元素的计算值，除非显式地赋值。

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

上面的例子中，strong标签会继承p标签的color属性，所以在显示时，我们发现strong标签中的文字显示为蓝色。

和盒模型相关的样式不可继承。

显式继承

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}

使用 inherit 属性值设置，可以使不可继承的元素变为可继承。

初始值

CSS中每个属性都有对应的初始值，例如：background-color的初始值为transparent，margin-left的初始值为0，等等。

除此之外，我们还可以借助关键字initial显式地将某个属性赋为初始值。

CSS求值过程

确定声明值（包括作者样式表，就是自己写的，还有浏览器默认样式表）这一步会参考样式表中没有冲突的声明作为css属性值
层叠冲突第一步有冲突的声明，会使用层叠规则确定css属性值
- 比较重要性重要性从高到低：作者样式表(我们自己写的)中的! importment(不推荐使用)>作者样式表中的普通样式(不加! importment)>浏览器中的默认样式
- 比较特殊性（比较权重） ID选择器:100类选择器或伪类选择器：10 元素选择器或属性选择器或伪元素选择器：1通配符选择器*:0
- 比较源次序当权重一样时，后面写的会把前面的覆盖掉
继承对还没有值的属性，若该属性可以被继承，则继承父元素的
使用默认值对还没有值的属性会使用默认值，如background-color这个属性就不可以被继承，如果前三部都没有确定background-color的属性值就会使用默认值，他的默认值是透明色

布局相关技术

常规布局、浮动、绝对定位

盒模型

padding：指定元素四个方向的内边距
margin：指定元素四个方向的外边距
- margin: auto 水平居中
- margin collapse 外边距合并
box-sizing：border-box 指定盒子占比为100%，如果默认情况下则会进行相加。
overflow：visible/hidden/scroll

行级 vs 块级

块级：不和其他盒子并列摆放、适用于所有的盒模型属性

行级：和其他行级盒子一起放在一行或拆分开成多行，盒模型中的height、width不适用

块级元素：body、article、div、main、section、h1-6、p、ul、li等，display：block

行级元素：span、em、strong、cite、code等，display：inline

display属性：block、inline、inline-block：本身是行级，可以放在行盒中，可以设置行高；作为一个整体不会被拆成多行，none：排版时完全被忽略

行级排版上下文

只包含行级盒子的容器会创建一个IFC

IFC排版规则：

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

块级排版上下文

会创建BFC的容器：

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display：flow-root；

BFC排版规则：

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

Flex Box 是什么？

一种新的排版上下文规则
他可以控制子级盒子的：
- 摆放的流向
- 摆放的顺序
- 盒子的宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行

Grid 布局

display：grid

划分网格：

通过grid-template-columns 和 grid-template-rows 来划分

指定位置

通过grid-area属性指定元素的位置例如 1/1/3/3 那么就表示该元素所在位置是占满第一行

绝对定位

position属性：

static 默认值，非定位元素

relative 相对自身原本位置偏移，不脱离文档流

absolute 绝对定位，相对非static祖先元素定位

fixed 相对于视口绝对定位

深入CSS ｜ 青训营笔记