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

重点内容

CSS 选择器的特异度
CSS 继承
CSS 求值过程解析
CSS 布局方式及相关技术
CSS 盒模型 - 行级
CSS 盒模型 - 块级

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

当不同选择器定位到同一种元素时，通过计算特异度来判断优先级
将选择器分成id、（伪）类和标签三类分别计数

- 示例代码：.btn.primary 优先级高于 .btn，样式会进行覆盖

<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>

二、继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值
示例代码：<strong> 没有设置样式，则继承父元素 <p> 的样式

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

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

显式继承：某些元素不可继承父元素时，可以使用 inherit 表示该元素样式继承父元素的

三、初始值

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

四、CSS求值过程

五、布局（Layout）

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

1. 布局相关技术

2. 盒模型

width

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

height

指定 content box 宽度
取值为长度、百分数 、auto
auto 由内容计算得来
百分数相对于容器的 content box 宽度
容器有指定的高度时，百分数才生效

padding

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

border

指定容器边框样式、粗细及颜色
三种属性
- border-width
- border-style
- border-color
四个方向
- border-top
- border-right
- border-bottom
- border-left
示例：cdpn.io/webzhao/deb…

margin

指定元素四个方向的外边距
取值可以是长度、百分数 、auto
百分数相对于容器的 content box 宽度
auto 表示水平居中
示例：codepen.io/webzhao/emb…

box-sizing

示例：codepen.io/webzhao/emb…

overflow

使用overflow处理溢出元素内容区的内容
示例：cdpn.io/webzhao/deb…

3. 块级和行级

display属性

行级排版上下文

Inline Formatting Context（IFC）
只包含行级盒子 的容器会创建一个IFC
IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素
示例代码

<div>
 This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
 <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
 And <em>Inline Block</em>
</div>

<style>
 div {
   width: 10em;
   //overflow-wrap: break-word;
   background: #411;
 }

 em {
   display: inline-block;
   width: 3em;
   background: #33c;
 }
</style>

块级排版上下文

Block Formatting Context（BFC）
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是 visible 的块盒
- display: flow-root;
BFC内的排版规则
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC 内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠
示例代码

<span>
This is a text and
<div>block</div>
and other text.
</span>

<style>
span {
 line-height: 3;
 border: 2px solid red;
 background: coral;
}

div {
 line-height: 1.5;
 background: lime;
}
</style>

4. Flex Box 是什么？

一种新的排版上下文
它可以控制子级盒子的：
- 摆放的流向（↑ ↓ ← →）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

示例代码

<div class="container">
 <div class="a">A</div>
 <div class="b">B</div>
 <div class="c">C</div>
</div>
<style>
 .container {
   display: flex;
   border: 2px solid #966;
 }

 .a, .b, .c {
   text-align: center;
   padding: 1em;
 }

 .a {
   background: #fcc;
 }

 .b {
   background: #cfc;
 }

 .c {
   background: #ccf;
 }
</style>