CSS选择器的特异度（Specificity）

特异度用于确定样式规则应用于哪个元素，当多个规则应用于同一个元素时，特异度决定了哪些规则具有更高的优先级。 特异度可以用a,b,c,d四个值来表示：

• a代表内联样式的特异度
• b代表id选择器的特异度，#a
• c代表类选择器、伪类选择器和属性选择器的特异度，.,:,[]
• d代表元素选择器和伪元素选择器的特异度,::

特异度计算的比较方式是先比较a的值，再比较b的值，然后是c的值，最后是d的值。

继承

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

当属性不自动继承父元素时，可以使用inherit等显示继承

初始值

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

CSS求值过程

CSS盒子模型

width/height

• 指定content box长和宽
• 取值为长度、百分数、auto
• auto由浏览器根据其它属性确定
• 百分数相对于容器的content box宽度

padding

• 指定元素四个方向的内边距
• 百分数相对于容器宽度

border

• 指定容器边框样式、粗细和颜色
• 三种属性
  • border-width
  • border-style
  • border-color
• 四个方向
  • border-top
  • boder-right
  • border-bottom
  • border-left

通过透明，减小间隔，可以制作出三角形

margin

• 指定元素四个方向的外边距
• 取值可以是长度、百分数、auto
• 百分数相对于容器宽度

	margin-left: auto;
	margin-right: auto;

块级和行级

Block Level Box

• 不和其它盒子并列摆放
• 适用所有的盒模型属性
• 生成块级盒子
• body、article、div、main、section、h1-6、p、ul、li等
• display: block

Inline Level Box

• 和其它行级盒子一起放在一行或拆开成多行
• 盒模型中的width、height不适用
• 生成行级盒子
• 内容分散在多个行盒中
• span、em、strong、cite、code等
• display: inline

display

• block：块级
• inline：行级
• inline-block：本身是行级，可以放在行盒中，作为一个整体
• none：排版时被忽略

flex

• 摆放的流向（→←↑↓）
• 摆放顺序
• 盒子宽度和高度
• 水平和垂直方向的对齐
• 是否允许折行

Flexibility

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

grid

• display:grid使元素生成一个块级的Grid容器
• 使用grid-template相关属性将容器划分为网格
• 设置每一个子项占哪些行列

position

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