深入理解CSS 笔记｜青训营本文总结归纳前端课程《深入CSS（上）》、《深入CSS（下）》与《理解CSS》，将部分常

CSS基础知识

Casading规则（层叠规则）

层叠三大规则（优先程度递减）

1、样式表来源

用户代理样式表：浏览器提供的默认样式。

用户样式表（很少有）

作者样式表：自己设置的样式。

作者样式表中的!important

用户样式表中的!important

用户代理样式表中的!important

2、选择器优先级

选择器，CSS用于对HTML页面中的元素实现一对一，一对多或者多对一的控制

选择器类型

基础选择器
- 内联选择器
直接在 html 标签内部通过 style 属性写 css 代码，如：
```
<h style="color:red">内联选择器</h>
```
- ID选择器 #myidname
- 类选择器 .myclassname
- 交集选择器
- 格式：<元素1><元素2>
- 并集选择器
  
  格式：<元素1>,<元素2>

属性选择器

语法	用法
[属性]	选中含有指定属性的元素
[属性=属性值]	选中含有指定属性和指定属性值的元素
[属性名^=属性值]	选择属性值以指定值开头的元素
[属性名$=属性值]	选择属性值以指定值结尾的元素
[属性名*=属性值]	选择属性值含有指定值的元素

例子

p[title]{color:red}
p[title="01"]{font-size:25px}
p[title^='0']{font-weight: 1000;}

伪类选择器 pseude-class
- 伪类（不存在的类，特殊的类）
  
  伪类:用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素等
  
  伪类一般情况下都是使用:开头
伪元素选择器 pseude-element
用法：

::first-letter 表示第一个字母

::first-line 表示第一列

::selection 表示选中的内容

使用 before 或 after 需要结合content 属性使用
逻辑选择器
选择器优先级：

内联 > id > class = attribute = pseude-class > type = pseude-element

3、源码位置

最后生成的生效（可理解为值被覆盖）

Casading引申出的建议

选择器尽量少用id

大量使用不利于CSS复用

优先级较高，不宜后续覆盖
尽量不用!important

级别过高，不利于后续扩张和灵活性
自己的样式加载在引用库样式的后面
保证自己的样式

继承

大部分具有继承特性的属性与文本相关

如：color、font、line-height、letter-spacing\text-align、word-spacing等

盒模型

CSS将页面中的所有元素都设置为一个矩形盒子，然后将盒子摆放到不同的位置
每个盒子的组成部分：

内容区(content)

内边矩(padding)

边框(border)

外边矩(margin)
盒子的（可见框）大小由content、padding、border共同决定
只有margin可以设置负值，实现元素向左或向上移动
当数值取百分比时，是相对于容器的宽度

width & height

两者指定的是content box 的宽度和高度
两者取值可为 长度、百分数、auto
auto的取值，width是由浏览器根据其他属性确定的，height是由内容计算得来
两者的百分比都是相对于容器的content box宽度

布局

常规流 Normal Flow

块级盒子
- BFC(block formatting context)，块级格式化上下文
内联盒子
- IFC(inline formatting context)，内联级格式化上下文
常规流中，盒子只属于一个格式化上下文（BFC or IFC）

BFC,block formatting context

块级格式化上下文，按序垂直排列

外边距塌陷
会发生外边距塌陷的情况：

两个兄弟元素之间、父子元素之间、内容为空元素自己的相邻的上下外边距

消除外边距塌陷的方法：

1、使相邻的上下边距不相邻，增加border padding 或者 内联元素

2、在父子元素重叠时，还可设置父元素为BFC,使得父子不在同级BFC中

IFC,inline formatting context

内联级格式化上下文，按序水平排列

内联格式区域中，包含一串盒子的矩形区域即为线条框(line box)

line box 的高度为所包含的位置最高的元素的顶端到最低的元素的底端的距离

若为lnline-block 替换元素等类型，则按margin-box高度

技巧：
单行文字垂直居中（利用line-height垂直居中的特性）
```
line-height:10px;
```
文字与icon垂直对齐（设置父元素font-size:0 使得基线和中线重叠，即居中对齐）

弹性盒子布局

Flexible Box Layout ，是CSS3新增的一种布局方式

作用于父元素（flex container）

建立一个弹性盒子：display:flex | inline-flex;

规定盒子的主轴方向：flex-direction:row | column | …
作用于子元素（flex items）

网格布局

Grid Layout,用于定义由行和列组成的二维布局

Grid和Flex布局的区别

Flex	Grid
一维布局	二维布局
基于内容	基于布局
推荐用于小面积or组件（小的页面布局）上	推荐用于大面积or整体布局（大的页面布局）上

两者可结合使用

定位position

一种更加高级的布局手段，使用position 属性来设置定位

可选值：

static:默认值,未开启状态
relative：开启元素的相对定位

1.以元素在文档流中的位置为参照定位

2.不会使元素脱离文档流

3.不改变元素的性质(块元素与行内元素)
absolute：开启元素的绝对定位

1.以包含块(最近的非static祖先)为参照定位

2.使元素脱离文档流

3.改变元素的性质(行内元素变为块元素)
fixed：开启元素的固定定位
特点同absolute，唯一不同的是以浏览器的视口为参考定位
sticky：开启元素的粘滞定位

特点同relative，唯一不同的是可以在指定位置固定

层叠上下文

The stacking context，对HTML元素的三维构想

z-index
该属性来指定元素的层级

值越大元素,层级越高,越优先显示

变形、过渡、动画

transform 变形

transform 变形3d

transition 过渡

animation 动画

响应式设计

原则

优先选用流式布局，如flex、grid等
使用响应式图片，匹配尺寸、节省带宽
使用媒体查询，为不同的设备类型做适配
给移动端设备，设置简单统一的视口
使用相对长度、em、rem、ve做为长度度量

媒体查询

设备像素

DPI && PPI

DPI，dots per inch , 点/英寸
PPI，pixels per inch，像素数/英寸

CSS像素

一个视角单位
1css像素为一臂之遥看96DPI的设备输出时，1点的视角，即1/96英寸的视角

DPR设备像素比

DPR = 设备像素 / CSS像素

移动端的布局视口

布局视口（viewport）是页面中html元素（根元素）的包含块
默认情况下，window.document.documentElement.clientWidth 为viewport的宽度
用<meta> 标签对 viewport 进行设定来完成移动端设备的适配
常用的移动端viewport的设置：
- 保持scale为1
- 保持scale放缩参数是1/dpr

相对长度的使用

`em`

在非font-size 属性中使用，相当于自身的字体大小

可使得展示区域根据展示字号大小进行缩放调整，即根据字号改变展示区域
在font-size 属性中使用，相当于父元素的字体大小

`rem`

根元素的字体大小（根元素的font-size）
与em相比较，不会出现多重嵌套的问题，减少复杂性
可用于适配缩放，可用来做响应式布局

`vw` 和 `vh`

vw：视窗宽度的1%
vh：视窗高度的1%
两者皆可作为响应式布局的基准单位

学习CSS的建议

充分使用 MDN 与 W3C （可用W3Cschool）CSS规范文档
保持好奇心，不断探索了解相关知识
持续学习，CSS新特点不断出现、更新

总结

本文总结归纳前端课程《深入CSS（上）》、《深入CSS（下）》与《理解CSS》，将部分常见的CSS知识点进行收集整理。

CSS相关知识点许多，一两天是不能完全认识掌握。

我认为比较好的方法是，在做网页设计或项目的过程中，从需求出发，充分运用自己所学，并不断认识掌握新的知识。

在实践中加深旧的知识点掌握，认识新的知识点。

深入理解CSS 笔记 ｜ 青训营