一、选择器的特异度（Specificity）

eg1:

1、 #nav .list li a:link

2、 .hd ul .links a

在 1 中，id选择器有 1 个，#nav，（伪）类有 2 个， .list与 :link，标签有 2 个， li 与 a，所以 1 的特异度是 122。

在 2 中，id选择器有 0 个，（伪）类有 2 个， .hd 与 .links ，标签有 2 个，ul 与 a，所以 2 的特异度是 22。

1中的特异度大于2中的特异度，所以，2中的选择器的优先级更高。

eg2：

<button class="btn">普通按钮
</button>
<button class="btn primary">主要按钮
</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

运行结果：

二、继承

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

文字、字体等相关属性都可以继承，容器宽度、高度、边距等都不可以继承

1、显式继承

如果一个属性不能继承，可以使用 inherit 这个关键字让其从父级继承

* {
  box-sizing:inherit; 
}

html {
  box-sizing;border-box;
}

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

2、初始值

在 CSS 中，每一个属性都有一个初始值

· background-color 的初始值是 transparent

· margin-left 的初始值是 0

可以使用 initial 关键字显式重置为初始值

· background-color : initial

三、求值过程解析

四、布局方式及相关技术

1、布局

· 确定内容的大小和位置的算法

· 依据元素、容器、兄弟节点和内容等信息来计算

2、相关技术

eg：盒模型

width

· 指定 content box 宽度

· 取值为长度、百分数、auto

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

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

height

· 指定 content box 宽度

· 取值为长度、百分数、auto

· auto 1取值由内容计算得来

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

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

padding

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

· 百分数相对于容器宽度

border

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

· 三种属性：border-width、border-style、border-color

· 四个方向：border-top、border-right、border-bottom、border-left

块级 vs. 行级

display 属性

常规流 Normal Flow

行级排版上下文

块级排版上下文

BFC内的排版规则

Flex Box

深入CSS笔记