本节课主要介绍了 CSS 的概念、CSS 如何使用以及如何工作、选择器、颜色、字体、继承、CSS 的求值过程以及三种布局。这里进行了简要的总结。
了解 CSS
CSS 是什么
CSS 是层叠样式表，用于定义元素的样式。
在页面中使用 CSS
三种方法：外链、嵌入、内联。
CSS 如何工作
选择器
- 通配选择器、标签选择器、id 选择器、类选择器
- 属性选择器：通过元素的属性或属性值来选择元素
[disabled] {color: red} - 伪类选择器
- 状态伪类
a:hover {color: red} - 结构伪类 根据 DOM 结点在树中的位置
li:first-child {color: red}
- 状态伪类
- 伪元素选择器
::before，::after
组合
颜色
RGB
三个数字分别表示红、绿、蓝，可以用 16 进制数表示。
HSL
关键字
透明度
准确地说是不透明度，值越大越不透明。
字体
h1 {
font-family: Optima, Georgia, serif;
}
通用字体族
字体的匹配是从前到后依次匹配，若都找不到就使用默认字体。
使用 Web Fonts
不仅可以使用本地的字体，还可以将字体当做资源存放在服务器中。
字符资源可能较大，可以将常用的字符裁出来单独做一个子包：
font-size
如果使用 em 单位，子类的字体大小会根据父类的 font-size 计算
ol {
font-size: 14px;
}
li {
font-size: 1.5em; // 21px
}
spacing
控制字母间距 letter-spacing 和单词间距 word-spacing。
white-space
默认情况下，HTML 中多个连续的空白符会合并为一个空白符。该属性控制是否合并空格和是否换行。
选择器的特异度
高优先级的选择器会覆盖低优先级选择器的属性值。
深入 CSS
继承
与文字相关的属性一般是可以继承的，与盒模型相关的属性一般是不可继承的。
注意继承的是计算值，也就是说：
.grandfather {
font-size: 10px;
}
.father {
font-size: 2em; // 20px
}
.son {
// font-size 继承 20px，而不是 2em(40px)
}
显示继承
初始值
initial 和 unset 的区别：initial 将属性值恢复为默认值；unset 只在没有属性值继承的情况下将属性恢复为默认值，能继承则继承。
CSS 求值过程
布局（Layout）
盒子模型
content
padding
border
通过这个特性可以产生三角形。
margin
margin 的含义是，当前元素与其他元素至少要保持的距离，根据这种思想产生了 margin collapse。
块级 & 行级
块级元素和块级盒子是不同的概念，块级元素会默认为块级盒子display: block。
常规流
行级排版上下文 IFC
div 元素内的标签都是行级盒子，所以 div 中会默认创建一个 IFC，默认根据基线对齐 vertical-align: base-line。
如果在其中加入一个块级盒子，则会生成三个排版上下文：
块级排版上下文 BFC
inline-block 本身是行级盒子，它会给内部创造块级上下文。
上面的代码产生了三个 IFC。
Flex Box
Flex Box 是很常用的布局，这里通过几张图片了解它的用法。
flex 盒子的子项会创建一个 BFC。
Grid 布局
1fr（fraction）是指一份。
float 浮动
早期引入 float 是用来做图文环绕的效果，现在也应当回归它本来的用途。
绝对定位
若没找到非 static 祖先，则以 html 根元素定位。
