---

第1章 CSS基础知识

1.1 CSS简介

• CSS全称是“Cascading Style Sheets”，中文译为“层叠样式表”
• 1996年CSS 1.0横空出世，提供了文本、颜色等功能，1998年推出的2.0版本和随后推出的2.1修正版本，支持了定位、盒模型等功能，2001年开始制定3.0规范，支持动画、变形等丰富的视觉效果。

1.2 在页面中应用CSS

1.2.1 内联样式¹

把样式属性写在HTML标签的style属性里。

1.2.2 style元素²

把网页中所有元素的样式都集中写到一个名为<style>的标签里，放在页面的DOM结构之前。因为样式不是写在元素的属性里，为了区分不同元素的样式，就要分别为各元素指定名字，然后在<style>标签里按元素的名称逐个书写样式。

1.2.3 link标记³

把<style>标签的内容单独存放到扩展名为.css的文件中，然后在HTML文件中用<link rel="stylesheet" href="file-name.css">标记导入这个CSS文件。

1.3 常用CSS属性一览

1.4 选择器

1.4.1 标签选择器⁴

顾名思义，但是：

• 颗粒度不够
• 语义化不够

1.4.2 类选择器⁵

• 为每个元素起不同的类名来区分每个元素
• 通常ID属性是配合JavaScript动态程序使用的

1.4.3 后代选择器⁶

父在子前，空格隔开

1.4.4 伪类选择器

① :first-child和:last-child⁷

首尾元素

② :nth-child()⁸⁹

:nth-child(odd)
:nth-child(even)

③ :not()¹⁰

:not()伪类用于排除掉一些元素，例如

• :not(:first-child)表示排除掉第1个元素，
• :not(:nth-child(3))表示排除掉第3个元素。

④ :hover¹¹

:hover表示当鼠标指针悬停在元素上时的状态

1.5 单位

1.5.1 长度

① px¹²

px就是指像素点的数量，100px就是100个像素点的长度。

• 绝对尺寸，调整起来很麻烦

② em¹³

和绝对尺寸相对的一个概念是相对尺寸，也就是它先确定一个基准，然后其他尺寸都以这个基准来计算大小，当要修改时，只要改一下基准值，其他尺寸就都按比例自动改变了。

em是指相对于font-size的大小，例如一个元素有属性font-size:10px，那么1em就等于10px，1.5em就等于15px，5em就等于50px。如果一个容器内所有的子元素都使用em单位，那么，当要调整容器的大小时，只要调整font-size的值即可。

能使用em的时候，要尽量使用em

1.5.2 颜色

① 颜色名称

② HSL

HSL是用色相（hue）、饱和度（saturation）和亮度（lightness）调配出的颜色


其中色相也就是我们日常说的“颜色”，左边的圆环就是色相，它的值是从0°到360°，也就是一个圆周角的角度，按彩虹色的顺序从0°开始排列，0°是红色，30°是橙色，60°是黄色，120°是绿色，180°是青色，240°是蓝色，300°是紫色，360°又回到红色。

饱和度是指纯色与灰色混合之后，纯色的占比，取值是0%到100%，100%表示未混入任何灰色的纯色，0%表示全灰。

亮度的取值范围也是从0%到100%，表示从暗到明的程度，0%表示全黑，100%表示全白，50%表示纯色。

因为纯色的饱和度是100%，亮度是50%，所以只要调整色相的度数，就可以得到不同的纯色，例如红色是hsl(0, 100%, 50%)，绿色是hsl(120, 100%, 50%)，蓝色是hsl(240, 100%, 50%)。

③ RGB¹⁴

RGB颜色模式是用红色、绿色、蓝色3色调配出的颜色，RGB色值是以#号开头的6个十六进制数，每种颜色用2位十六进制表示，取值范围是从#00到#ff

红色（red）是#ff0000，
绿色（green）是#00ff00，
蓝色（blue）是#0000ff，
黄色是#ffff00（红色和绿色混合）

同比例的R、G、B颜色混合之后呈灰色

④ HSLA/RGBA¹⁵

HSLA/RGBA比HSL/RGB多出的最后一个A，学名叫“alpha”通道，实践中我们把它当作一个不透明度值对待，取值范围是从0到1，0表示完全透明，1表示完全不透明，0.5表示半透明了。

⑤ transparent

transparent关键字表示透明色，单独使用color: transparent的意义不大，因为有不止一种方法可以实现相同的效果

1.6 盒模型

1.6.1 内边距、边框和外边距

1.6.2 box-sizing¹⁶

两个可选的值。一个值是content-box，表示盒子的width和height以content的边界计算，这也就是上面讲的经典的盒模型；
另一个值是border-box，表示盒子的width和height以border的边界计算，也就是盒子的整体尺寸是content+padding+border占据的空间。

1.7 定位

1.7.1 相对定位¹⁷

相对定位是指以元素默认位置为起点，移动元素到一个新的位置，此时的top、left、right、bottom都是相对于元素默认位置计算的。

1.7.2 绝对定位¹⁸

绝对定位是以它的父元素的位置作为起点计算的，而它的父元素，必须是被定位过的（被相对定位过或者被绝对定位过），如果父元素没被定位过，那就看父元素的父元素（也就是祖父元素）是否被定位过，直至找到一个被定位过的祖先，要是全找遍了都没有，那就以整个窗口body为父元素。

因为绝对定位首先要有一个被定位过的父元素，所以绝对定位是作用在子元素上的，也就是说，我们要先选定一个容器，然后再对容器里的子元素进行绝对定位。

1.8 布局

1.8.1 flex布局

若要使用flex布局，需先在父元素上声明display: flex;，这样它的所有直系子元素就成为flex元素。

① 居中¹⁹

• align-items: center;表示垂直居中；
• justify-content: center;表示水平居中；
• align-items: center; justify-content: center;就表示垂直水平居中（居于容器正中）。

② 横向排列元素²⁰

• justify-content:flex-start表示居左；
• justify-content: flex-end表示居右；
• justify-content:space-between表示首尾的两个元素挨着容器边缘，中间的其他元素平均排列；
• justify-content: space-around表示首尾的两个元素与容器边框的距离是元素之间间距的一半，各元素平均排列。

③ 纵向排列元素²¹

当子元素纵向排列时，在容器中增加flex-direction: column;属性即可。

④ 轴

flex布局没有使用left、right、top、bottom这些方位词，而是引入了轴的概念。

所谓轴，就是像数轴那样的有方向的线，用两条数轴可以定义一个平面直角坐标系，所以flex布局就有了“主轴”和“交叉轴”的概念，“主轴”是子元素延伸的方向，“交叉轴”是与“主轴”垂直的轴。

在一条轴上，flex-start代表轴的起点位置，flex-end代表轴的终点位置。如果轴是从左到右方向的，那么flex-start和flex-end就分别代表左端和右端，而如果轴是从上到下方向的，那么flex-start和flex-end就分别代表顶端和底端。

flex-direction的用途是设置主轴的方向，默认值是row，表示从左到右延伸，另一个常用值就是column，表示从上到下延伸，定义了主轴的方向，同时也就定义了交叉轴的方向。

严格地说，justify-content: center;表示子元素在主轴方向上居中，而align-items: center;表示子元素在交叉轴方向上居中。随着主轴方向的变化，这两个属性的含义会发生变化。

1.8.2 grid布局²²

可看做是table布局升级版

要使用grid布局，需先在父元素上声明display: grid;，这样它的所有直系子元素就会成为grid元素

grid-template-columns用于规定每一行要分成几列，以及每列的尺寸，repeat(4, 1fr)表示把一行平均分成4份，1fr是一个长度单位，表示平分之后的1份的宽度。

grid布局的体系比flex布局复杂得多

flex布局和grid布局不是互相替代的关系，而是互相合作的关系，在一个复杂的页面中，通常用grid做全局化粗粒度的布局，然后再用flex布局对每个网格进行细粒度的布局。

1.9 重叠

z-index

1.9.1 元素之间的重叠关系²³

使z-index生效的前提是元素要被定位过（被相对定位或被绝对定位），这和left、right、top、bottom要生效，也需要元素被定位过是一样的。

z-index属性的默认值是auto，所有未设置z-index属性的元素并非位于同一平面内，事实上，元素在DOM文档中出现的顺序，即是它们的叠加次序。

1.9.2 含有子元素的容器之间的重叠关系²⁴

同一个父元素下的子元素之间才能比较z-index的大小

1.9.3 主元素与子元素（伪元素）之间的重叠关系²⁵

一个主元素可以有两个伪元素，这样加上主元素本身一共是3个元素，它们在DOM中的顺序为主元素、::before伪元素、::after伪元素，所以这3个元素默认的叠加关系是：主元素在最下面，中间是::before伪元素，最上面是::after伪元素。

主元素和伪元素因不是同级关系，所以它们之间的z-index不能比较，一旦主元素设置为z-index值，不论值是多少，主元素都作为整个容器最下面的一层，其子元素均位于主元素之上。

1.10 继承和引用

1.10.1 继承²⁶

有些CSS属性的属性值默认采用父元素的属性值，如color属性，这称为继承，还有一些CSS属性值是不继承的，如margin。

1.10.2 引用颜色²⁷

关键字currentColor表示使用“当前”颜色，“当前”颜色是指color的属性值。currentColor的用途是为了在边框、背景、渐变函数中使用与前景色一致的颜色。

1.10.3 引用尺寸²⁸

常用百分比赋值

---

1. 案例1
   ↩︎

2. 案例2，效果同上 ↩︎

3. 案例3，效果同上上 ↩︎

4. 案例4
   ↩︎

5. 案例5 升级版
   ↩︎

6. 案例6
   ↩︎

7. 案例7
   ↩︎

8. 案例8
   ↩︎

9. 案例9
   ↩︎

10. 案例10
    ↩︎

11. 案例11
    ↩︎

12. 案例12
    ↩︎

13. 案例13 效果同上 ↩︎

14. 案例14
    ↩︎

15. 案例15
    ↩︎

16. 案例16
    ↩︎

17. 案例17
    ↩︎

18. 案例18
    ↩︎

19. 案例19
    ↩︎

20. 案例20
    ↩︎

21. 案例21
    ↩︎

22. 案例22
    ↩︎

23. 案例23
    ↩︎

24. 案例24
    ↩︎

25. 案例25
    ↩︎

26. 案例26
    ↩︎

27. 案例27
    ↩︎

28. 案例28 效果同案例1 ↩︎