文章更新于 2020.11.25

一、简介

全称 Cascading Style Sheets —— 层叠样式表，是一种样式表语言，用来描述 HTML 或 XML 文档的呈现。

层叠的几层含义：

样式层叠——可以多次对一个元素进行样式声明
选择器层叠——可以用不同选择器对同一个元素进行样式声明
文件层叠——可是使用多个文件对同一个元素进行样式声明

二、体系化学习

2.1 语法

语法1

选择器 ｛
	属性名：属性值
  /*注释*/
｝

注意事项

区分大小写
符号要是英文
没有//的注释
最好不要省略最后的分号

语法2

@charset "UTF-8";
@import url(2.css); 
@media (min-width: 100px) and (max-width: 200px) { 
	语法一
｝

注意事项

@charset 必须放在第一行
前两个at语法必须以分号结尾
@media 语法会单独教学
charset是字符集的意思，但UTF-8是字符编码encoding，这是历史遗留问题，因为UTF出现之前，字符集和字符编码名称相同

2.2 调试方法

使用 W3C 验证器（在线 / 命令行工具）——不方便
使用 VSCode 看颜色——没webstorm好用
使用 WebStorm 看颜色——打开有点慢，但是功能更强大
使用开发者工具看警告

border调试法

怀疑某个元素有问题，就给这个元素加 border border 没出现？说明选择器错了或者语法错了 border 出现了？看看边界是否符合预期 bug 解决了才可以把 border 删掉

低级错误

选择器拼写错误
属性名拼写错误
属性值拼写错误
大小写错误
没写分号
中文冒号
没写反花括号
没加单位

2.3 资料来源

Google 搜索关键词时加 MDN
CSS tricks（英文）
张鑫旭的博客

2.4 标准

w3c文档

三、关键知识点

3.1 文档流

Normal Flow ，文档流的知识，回答了默认情况下，页面元素是如何布局的，主要涉及到默认的宽度、高度的计算方法，换行逻辑。

换行逻辑

inline 元素从左到右，到达最右边才会换行
block 元素从上到下，每一个都另起一行
inline-block 也是从左到右，但是不会被切断

宽度

inline 宽度为内部 inline 元素的和，不能用 width 指定
block 默认自动计算宽度，值是auto(不是100%)，默认能有多宽展示多宽，可用 width 指定
inline-block 结合前两者特点，默认宽度就是内部元素的宽度，可用 width

高度

inline 高度由 line-height 间接确定，跟padding margin无关，为什么是间接决定，因为还和字体有关（行盒）
block 高度由内部所有文档流元素决定（脱离文档流后就包不住了），可以设 height
inline-block 跟 block 类似，可以设置 height

3.2 盒模型

盒模型让我们知道每个元素都有哪些看得见、或者看不见的东西“组成”，知道了组成要素，我们才能去控制他们的样式。

两种盒模型：

content-box 内容盒 - 内容就是盒子的边界
border-box 边框盒 - 边框才是盒子的边界

公式

content-box width = 内容宽度

border-box width = 内容宽度 + padding + border （用这种）

图示

margin的合并

哪些情况会合并

父子 margin 合并，只有上下合并，左右不合并
-兄弟 margin 合并

如何阻止上下合并

父子合并用 padding
父子合并用 overflow: hidden 挡住
父子合并用 display: flex，不知道为什么
兄弟合并是符合预期的
兄弟合并可以用 inline-block 消除

总之要一条一条死记。而且 CSS 的属性逐年增多，每年都可能有新的

3.3 布局

布局的分类：

固定宽度布局，一般是960 1000 1024px，多用于桌面
不固定宽度布局，主要靠文档流的原理来布局，多用于手机

写布局的两种思路：

新手建议从小到大，小布局然后组成大布局
老手可以从大到小，先定大局，然后完善每个小部分

float 布局

子元素上加上float：left 盒和width

在父元素上加 .clearfix 属性

.clearfix {
    content:'' ;
    display:block ;
    clear: both ;
}

flex 布局、grid 布局

待完善

3.4 定位

定位关注的是元素的纵向层级，而布局关注的是元素在平面上的位置。

position 属性

static 默认值，待在文档流里

relative 相对定位，实际位置没有变，只是眼睛看起来有点偏移，实际上没有脱离文档流

absolute 绝对定位，定位基础是祖先里第一个非static元素

fixed 固定定位，定位基准是 viewport （有诈）

sticky 粘连定位，当滚动出屏幕时，可以吸顶，兼容性较差

3.5 动画

浏览器的渲染过程

根据HTML构建HTML树（DOM）
根据CSS构建CSS树（CSSOM）
将两棵树合并成一个渲染树（render tree）
Layout 布局（文档流、盒模型、计算大小和位置）
Paint 绘制（把边框颜色、文字颜色、阴影等画出来）
Composite 合成（根据层叠关系展示画面）

transform 属性

四个常用功能：

位移 translate
缩放 scale
旋转 rotate
倾斜 skew

animation 属性

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

初始值：

as each of the properties of the shorthand:
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

一个前端新手的 CSS 知识汇总