选择器的特异度

用于决定声明冲突时哪个声明优先级更高

特异度考虑以下四个因素,按照从低到高的顺序:

通配选择器 (*) 的特异度为 0
元素(标签)选择器的特异度为 1 (例如 div)
类选择器的特异度为 10 (例如 .class)
ID 选择器的特异度为 100 (例如 #id)
内联样式的特异度为 1000
!important 声明的特异度最高,覆盖一切规则

另外,相同特异度的情况下,源代码顺序在后的声明会覆盖前面的声明。

所以通常 ID 选择器 > 类选择器 > 元素选择器,越具体的选择器特异度越高,这样可以实现对CSS样式的精确控制。

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

文字相关（如color,font-size）的可以继承，宽度不能继承

显式继承

* {  
box-sizing: inherit;  
/*box-sizing本身是不可继承的属性*/  
/*这里通过inherit关键字使得原本不可继承的属性变得可继承*/  
}  
  
html {  
box-sizing: border-box;  
}  
  
.some-widget {  
box-sizing: content-box;  
}

首先,box-sizing: inherit; 在html元素上设置盒模型为inherit。
然后,box-sizing: border-box; 在全局(html)设置盒模型为border-box。
最后,.some-widget 选择器指定某个元素使用content-box盒模型。

这样设置可以使大部分元素采用border-box盒模型从而更方便布局,同时也可以通过单独指定来实现需要content-box盒模型的效果。

初始值

CSS中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
可以使用 initial 关键字显式重置为初始值
- background-color : initial

CSS求值过程

子元素继承的是父元素的计算值

布局 Layout

确定内容的大小和位置的算法
依据元\容器\兄弟节点和内容等信息来计算

常规流

元素按照 HTML 的顺序依次垂直排列,块级元素独占一行,行内元素排在一起。这是元素的默认定位方式。

浮动

元素使用 floa t属性脱离常规流,向左或右浮动,直到碰到父元素边界或另一个浮动元素。常用于图片文字混排等布局。

绝对定位

元素使用 absolute 或 fixed 定义绝对定位,使元素脱离常规流,相对于最近的已定位祖先元素进行定位。可以重叠其他元素。

盒模型

width
height
padding

指定元素四个方向的边距

百分数相对于容器的宽度

border

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

三种属性
border-width
border-style
border-color

四个方向
border-top
border-right
border-bottom
border-left

margin

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

取值可以是长度、百分数、auto（水平居中）

百分数相对于容器宽度

margin collapse
垂直方向上，取两个块的 margin 边距中的最大的一个
border-box
包含 border 和 padding 的宽度
overflow
控制溢出的部分

块级 vs 行级

块级	行级
不和其他盒子并列摆放	和其他行级盒子一起放在一行或者拆开成多行
适合所有的盒模型属性	和模型中的width、height不适用

块级元素	行级元素
body、article、div、main、section、h1-6、p、ul、li、display:block	span、em、strong、cite、code、display:inline

Inline-block
本身是行级，可以放在行盒中;可以设置宽高;
作为一个整体不会被拆散成多行

行级排版上下文

Inline Formatting Context

IFC排版规则

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

块级排版上下文

Block Formatting Context

BFC排版规则

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

Flex Box

一种新的排版上下文
它可以控制自己盒子的

摆放的流向

摆放顺序

盒子的宽高

水平和垂直方向的对齐

是否允许折行

主轴：justify-content
侧轴：alien-items

Flexibility

可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

Grid

Position 属性

static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute 绝对定位，相对于最近的非 static 祖先元素定位
fixed 相对于视口绝对定位

深入CSS | 青训营