CSS | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第一天 CSS 是如何工作的选择器 Selector

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

CSS 是如何工作的

选择器 Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id·按照属性
- 按照DOM树中的位置

通配选择器

* {样式}

标签选择器

label {样式}

id选择器

#id {样式}

类选择器

.class {样式}

属性选择器

[key = value] {样式}  
= 完全匹配
*= 包含
^= 开头
$= 结尾

伪类 (pseudo-classes)

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

选择器组

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

颜色 - HSLA

Hue

色相(H)是色彩的基本属性, 如红色、黄色等; 取值范围是0-360。

Saturation

饱和度(S)是指色彩的鲜艳程度，越高约鲜艳；取值范围0-100%。

Lightness

亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

alpha 透明度

font-family使用建议

字体列表最后写上通用字体族
英文字体放在中文字体前面

CSS生效规则

CSS生效取决于选择器的特异度(Specificity)

CSS继承

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


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

输出结果：

显式继承

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

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

块级元素行内元素对比

块级元素	行级元素
生成块级盒子	- 生成行级盒子 - 内容分散在多个行盒 (line box) 中
body、article、div、main、section、h1-6、p、ul、li 等	span、em、strong、cite、code 等
display: block	display: inline

行级排版上下文

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

块级排版上下文

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>