1. 样式继承&样式覆盖

CSS 为一个元素设置的某个样式，如果这个样式是允许继承的，那么这个样式也会应用到它的后代元素上

注意：不是所有样式都会被继承，只有可继承的样式才会从祖先元素基础
样式的继承性建议查阅相应元素的参考手册

当一个元素同时被应用上多个相同的样式属性时，浏览器必须从中选择一个属性值，这个过程就是样式覆盖

样式继承有如下的规则：

• 当元素继承的样式发生冲突时，从最近祖先继承的样式有效
• 继承的样式和元素自身设置的样式冲突时，自身设置的样式有效
• 元素自身设置的样式发生冲突时，样式权值高的有效

样式权值按如下的列表相加确定

• 内联样式： 1,0,0,0
• id 选择器： 0,1,0,0
• 类及伪类选择器： 0,0,1,0
• 标签及伪元素选择器： 0,0,0,1
• 通配选择器： 0,0,0,0

即：内联样式>>id选择器>>类及伪类选择器>>标签及伪元素选择器>>通配选择器

• 样式权值相同时，后设置的有效
• !important的样式属性不被覆盖（除非同样为 !important 时，后设置的起效）

可以使用!important来阻止样式被覆盖

注意：除非不得已，尽量避免使用!important

2. 文档流模型

（1）概念

网页是一个多层结构，通过 CSS 可以给每层设置样式，上层会覆盖下层的内容，覆盖的内容不会被用户看到

这些多层结构中，最底下的一层即为文档流，默认情况下元素都在文档流中排列

（2）元素在文档流中特点

• 块元素

在页面中独占一行

默认情况下，宽度会把父元素撑满，即宽度由父元素宽度决定

默认情况下，高度会被内容撑开，即高度由内容的高度决定

• 行内元素

不会在页面中独占一行，只占自身大小

行内元素在页面中从左至右排列，如果一行不能容下，则换到第二行继续自左往右排列，即会自动换行

默认情况下，宽度和高度都被内容撑开，即宽高均由内容决定

（3）元素脱离文档流特点

元素从文档流中脱离，不占据文档流中位置

元素脱离文档流后，无论块元素和行内元素，均会表现为块元素，有以下特点：

• 不会在页面中独占一行
• 宽高默认被内容撑开

设置 float、position、flex 等属性可使元素脱离文档流

3. 盒模型

（1）盒模型概念

所有 HTML 元素都可以视为一个盒子，在盒子模型中对页面的布局实际上就变成将不同的盒子摆放到不同位置

盒子模型包括：外边距、边框、内边距以及内容

• 内容 content 框的内容，其中显示子元素的内容
• 内边距 padding 内容周围的区域，内边距是透明的
• 边框 border 围绕内边距和内容的边框
• 外边距 margin 边界外与其他元素不覆盖的区域，外边距是透明的

（2）可见框概念

可见框即元素可以看到的区域，由内容区、边框、内边距组成，不包括外边距

4. 内容区-content

（1）width 属性及 height 属性

分别设置内容区的宽度与高度

可以取以下值：

• auto 让浏览器计算高度和宽度【默认】
• length 以 px 等单位定义高度或宽度
• % 以包含块的百分比定义高度或宽度
• initial 将高度或宽度设置为默认值
• inherit 从其父值继承高度或宽度

这也是大多数与长度<length>有关的属性的合法取值

（2）min-width 属性 min-height 属性及max-width 属性 max-height 属性

设置元素的最大/最小的宽度/高度

默认值为none，即表示忽略该属性

5. 内边距-padding

（1）padding 属性

设置四个方向内边距

（i）取值

长度单位，要求为正值

或取值为auto

（ii）值个数

可为1~4，不同数量下取值按如下情况所示

按顺时针顺序依次指定值

• 四个值：上 右 下 左 按顺序分别设置上边距，右边距，下边距，左边距
• 三个值：上 左右 下 按顺序分别设置上边距，左右边距，下边距
• 两个值：上下 左右 按顺序分别设置上下边距，左右边距
• 一个值：上下左右 同时设置上下左右边距

（2）padding-top、padding-right、padding-bottom、padding-left属性

单独设置某方向内边距

6. 边框-border

（1）border-style 属性

指定边框类型，必需，简写属性

（i）取值

• dotted 定义点线边框
• dashed 定义虚线边框
• solid 定义实线边框
• double 定义双边框
• none 定义无边框【默认】
• hidden 定义隐藏边框
• groove 定义 3D 坡口边框，效果取决于 border-color 值
• ridge 定义 3D 脊线边框，效果取决于 border-color 值
• inset 定义 3D inset 边框，效果取决于 border-color 值
• outset 定义 3D outset 边框，效果取决于 border-color 值

（ii）border-top-style、border-right-style、border-bottom-style、border-left-style属性

指定一个方向的边的边框类型

（2）border-width 属性

指定边框的宽度，简写属性

（i）取值

长度，只能为正值

亦可取预设值thin、medium【默认】、strong

（ii）border-top-width、border-right-width、border-bottom-width、border-left-width属性

指定一个方向的边的边框宽度

（3）border-color 属性

指定边框的颜色，简写属性

（i）取值

允许所有颜色模式，如rgb()等
亦可取transparent表示透明色

（ii）border-top-color、border-right-color、border-bottom-color、border-left-color属性

指定一个方向的边的边框颜色

（4）border属性

同时设置四条边框宽度、颜色、样式，是border-width、border-style 以及 border-color 的简写属性

（i）取值

border: width color style

如果不设置其中的某个值也是允许的

（ii）值个数

• 四个值：上 右 下 左 按顺序分别设置上边框，右边框，下边框，左边框
• 三个值：上 左右 下 按顺序分别设置上边框，左右边框，下边框
• 两个值：上下 左右 按顺序分别设置上下边框，左右边框
• 一个值：上下左右 同时设置上下左右边框

（5）border-top、border-right、border-bottom、border-left属性

同时设置一个方向的一条边框宽度、颜色、样式，简写属性

7. 外边距-margin

（1）margin属性

为元素的四周指定外边距的属性

（i）取值

长度单位，允许负值的使用
允许取值为auto

（ii）值个数

• 四个值：上 右 下 左 按顺序分别设置上边距，右边距，下边距，左边距
• 三个值：上 左右 下 按顺序分别设置上边距，左右边距，下边距
• 两个值：上下 左右 按顺序分别设置上下边距，左右边距
• 一个值：上下左右 同时设置上下左右边距

（2）margin-top、margin-right、margin-bottom、margin-left属性

为元素的四周分别指定外边距的属性

8. 块元素盒模型

拥有margin、border、padding、content等结构

（1）水平方向布局

一般而言，子元素在父元素内的元素总宽度应满足公式：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

若不成立，称为过度约束，此时遵循如下规则确定元素的实际宽度

• 如果七个值中没有 auto，则会调整 margin-right 的值使等式成立

比如子元素 width 超过父元素内容区大小，margin-right 会调整为负值，使子元素溢出父元素

• 如果 width、margin-left、margin-right中有一个设置为 auto，则会调整被设置为 auto 的那个值，使等式成立

比如 width 默认值为 auto，所以块元素默认宽会充满整个父元素

• 如果 width、margin-left、margin-right 中有两个及以上设置为 auto

如果 width 设置为固定值，margin-left 和 margin-right 设置为 auto，则同时调整 margin-left 与 margin-right 使等式成立，此时子元素居中
如果 width 设为 auto，则子元素 width 调为最大，其余被设置为 auto 的属性取值为 0

设置 margin: auto 是设置子元素在父元素内水平居中的一种常用方法

（2）垂直方向布局

一般而言，默认情况下父元素高度被内容撑开，子元素在父元素内的元素总高度应满足公式

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

若父元素设置了高度，且子元素高度大于父元素，此时公式不成立，称为溢出，此时子元素会从父元素溢出：

此时可设置overflow属性来处理溢出问题

（3）overflow属性

定义溢出元素内容区的内容的处理方式
是 overflow-x 与 overflow-y 的简写属性

（i）取值

• visible【默认】 内容不会被修剪，会呈现在元素框之外
• hidden 内容会被修剪，并且其余内容是不可见的
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（无论有无溢出都会产生滚动条）
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容（有溢出才会产生滚动条）

（ii）overflow-x 与overflow-y属性

指定元素在x轴上或者y轴上对溢出元素内容区的内容的处理方式

9. 行内元素盒模型

行内元素盒模型的结构和块元素基本相同

但亦存在以下几点区别：

• 行内元素不支持设置 width 和 height，内容区宽高只由其内容决定
• 可以设置 border，但是垂直方向 border 不会影响布局
• 可以设置 padding，但是垂直方向 padding 不会影响布局
• 可以设置 margin，但是垂直方向 margin 不会影响布局

10. 盒子大小-box-sizing属性

默认情况下width属性及height属性指的是内容区的大小

box-sizing属性可以改变盒子尺寸计算方式

取值有

• content-box【默认值】 宽高用来设置内容区大小 width = content
• border-box 宽高用来设置盒子可见框的大小 width = content + padding + border

box-sizing: border-box 在前端开发中应用非常广泛，可以用于 控制盒子的可见区域大小

选择器

选择器用于选取需要设置样式的 HTML 元素

（1）简单选择器

（i）元素选择器

• 作用：根据元素名选中指定元素
• 语法：**elementname {}**

（ii）id 选择器

• 作用：根据元素 id 属性值选中一个元素
• 语法：**#idname {}**

（iii）类选择器

• 作用：根据元素的 class 属性值选中一组元素
• 语法：**.classname {}**

（iv）通配选择器

• 作用：选中页面中所有元素
• 语法：*** {}**

（2）复合选择器

（i）交集选择器

• 作用：选中同时符合多个条件的元素
• 语法：**_selector1selector2selector3 _{}**

注意：交集选择器中如果有元素选择器，必须以元素选择器开头

（ii）并集选择器

• 作用：同时选中多个选择器对应的元素
• 语法：**_selector1，selector2，selector3 _{}**

1
2
3
4
5
6
7
8
9
10
11
12

/*
 * 选择器1 * {}
 * 选择器2 span {}
 * 选择器3 .outer {}
 * 选择器4 #inner {}
 * 选择器5 span.inner {}
 * 选择器6 .outer, .inner {}
 */
<div class="outer">  /* 选中的选择器：1|3|6 */
  <span class="inner"></span>  /* 选中的选择器：1|2|5|6 */
  <div class="inner" id="inner"></div>  /* 选中的选择器：1|4|6 */
</div>

（3）关系选择器

关系选择器根据元素之间的关系选取元素，一般直系后代选择器与后代选择器使用的较多一些

（i）直系后代选择器

• 作用：选中指定父元素的指定子元素
• 语法：father > son

（ii）后代选择器

• 作用：选中指定元素的指定后代元素
• 语法：ancestor progeny

（iii）相邻兄弟选择器

• 作用：选择下一个相邻兄弟元素
• 语法：prior + next

注意：一定是选中下一个、相邻的兄弟弟元素

（iv）通用兄弟选择器

• 作用：选择之后所有兄弟元素，不包括自己本身
• 语法：elderbrother ~ youngerbrother

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<main>
  <p>我是p元素</p>
  <div>
    <span>span0</span>
  </div>
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
</main>

<style>
  /* 样式1 没有元素字体变红色 */
  p + span {
    color: red;
  }
  /* 样式2 span1 字体变红色 */
  div + span {
    color: red;
  }
  /* 样式3 span1、span2、span3 字体变红色 */
  p ~ span {
    color: red;
  }
  /* 样式4 span1、span2、span3 字体变红色 */
  main > span {
    color: red;
  }
  /* 样式5 span0、span1、span2、span3 字体变红色 */
  main span {
    color: red;
  }
</style>

（4）属性选择器

属性选择器根据 HTML 元素具有的 HTML 属性选取相应的元素

一般属性选择器使用相对较少，通常用于根据表单元素的type属性选取相应的元素以设置样式

以下 attribute 代表 HTML 属性，value 代表 HTML 属性值

（i）[attribute] 选择器

选取带有指定属性的元素

（ii）[attribute=”value”] 选择器

选取带有指定属性和值的元素（值必须是完整或单独的单词）

（iii）[attribute~=”value”] 选择器

选取属性值包含指定词的元素

（iv）[attribute|=”value”] 选择器

选取指定属性以指定值开头的元素（值必须是完整或单独的单词）

（v）[attribute^=”value”] 选择器

选取指定属性以指定值开头的元素（值不必是完整单词）

（vi）[attribute$=”value”] 选择器

选取指定属性以指定值结尾的元素（值不必是完整单词）

（vii）[attribute*=”value”] 选择器

选取属性值包含指定词的元素（值不必是完整单词）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

a {
  color: blue;
}

/* 包含href属性的超链接元素 */
a[href] {
  background-color: white;
}

/* href属性以 "#" 开头的超链接元素 */
a[href^="#"] {
  background-color: gold;
}

/* href属性包含 "example" 的超链接元素 */
a[href*="example"] {
  background-color: silver;
}

/* href属性包含 "insensitive" 的超链接元素,，不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* href属性包含 "cAsE" 的超链接元素，区分大小写 */
a[href*="cAsE" s] {
  color: pink;
}

/* href属性以 ".org" 结尾的超链接元素 */
a[href$=".org"] {
  color: red;
}

（5）伪类选择器

伪类选择器是用于选择处于特定状态的元素的选择器

（i）子元素的伪类（序号）

• :first-child 选中父元素的第一个子元素
• :last-child 选中父元素的最后一个子元素
• :nth-child() 选中父元素的第 n 个子元素

特殊值：

• n 选中父元素的所有子元素
• 2n 或 even 选中父元素的所有偶数个子元素
• 2n+1 或 odd 选中父元素的所有奇数个子元素
• :nth-last-child() 选中父元素从末尾开始数的第n个元素
• :only-child 选取没有任何兄弟元素的元素

（_以上伪类根据父元素的所有子元素排序计数_）

（ii）子元素的伪类（类型）

• :first-of-type 选中父元素中第一个同类的子元素
• :last-of-type 选中父元素中最后一个同类的子元素
• :nth-of-type() 选中父元素中第 n 个同类的子元素
• :nth-last-of-type() 选中父元素中第 n 个同类的子元素
• :only-of-type 选取没有任何相同类型的兄弟元素的元素

（_以上伪类根据父元素的同类子元素排序计数_）

（iii）超链接的伪类

建议按LVHA 顺序 :link — :visited — :hover — :active 声明超链接样式，否则可能会覆盖预期的样式

• :link 选取表示没访问过的链接（正常链接）
• :visited 选取表示访问过的链接

由于隐私原因，这个伪类只能修改链接的文字颜色、背景颜色、边框颜色、轮廓颜色，且无法修改链接的透明度

• :any-link 选取任一具有href属性的链接

实际效果相当于同时匹配 :link 或 :visited

（iv）用户交互相关伪类

• :hover 选取处于鼠标移入状态的元素

注意这个伪类在触摸屏上使用会存在一些问题，不建议在触摸屏设备上使用

• :active 选取表示鼠标点击状态的元素，即鼠标点击至松开之间的阶段

（v）表单相关伪类

• :checked 选取被选中的input:radio元素或input:checkbox元素或option元素
• :focus 选取获得焦点的input元素

常见的情形如表单输入时显示提示性的样式

• :focus-within 选取自身或自身子元素获得焦点的元素

相当于其自身或其子元素匹配到:focus伪类的元素

• :indeterminate 选取处于不确定状态的input元素

不确定状态如存在未选中的相同name的input:radio元素或input:checkbox元素的indeterminate设定为true或不确定的progress元素

• :default 选取默认状态的input元素

允许在input:radio元素或input:checkbox元素或option元素或button元素上使用

• :placeholder-shown 选取placeholder文本起效时的input或textarea元素
• :disabled 选取被禁用的input元素
• :enabled 选取被启用的input元素

以上两个属性可能需要使用input元素或form元素的disabled属性

• :in-range 选取值在规定范围内的input元素
• :out-of-range 选取值超出规定范围内的input元素

一般需要规定input的type属性为number
以上两个属性需要规定input元素的min属性或max属性以确定数值范围，否则没有意义

• :invalid 选取具有非法值的input元素
• :valid 选取具有合法值的input元素或form元素
• :optional 选取非必须的input元素或select元素或textarea元素
• :required 选取必须的input元素或select元素或textarea元素

以上两个属性可能需要使用input元素或form元素的required属性

• :read-only 选取规定只读的元素
• :read-write 选取规定可写的元素

以上两个属性可能需要使用表单元素的readonly属性或其他元素的contenteditable属性

（vi）类函数伪类

• :not() 接收一个选择器参数，将符合条件的元素从原选择器选中元素中去除
• :is() 接收任意数量的选择器参数，匹配符合任一选择器的元素
• :where() 接收任意数量的选择器参数，匹配符合任一选择器的元素

:where() 和 :is() 的不同之处在于:where() 的优先级总是为 0 而 :is() 的优先级总是由它的选择器列表中优先级最高的选择器决定的

（vii）其他伪类

• :root 选取文档的根元素

通常网页中指html元素，且优先级较高
通常用于声明全局 CSS 变量

• :scope 匹配选择器应匹配的参考点的元素

在样式表使用时，等价于:root
在 DOM API 使用时，等价于调用 API 的元素

• :target 选取唯一的页面元素(目标元素)，其id 与当前URL片段匹配

如https://www.baidu.com.html#p2，:target可以匹配到id为p2的任意类型的元素

• :empty 匹配没有子元素或内部没有文本的每个元素
• :lang() 根据元素的语言属性选取元素

lang可能由元素的 lang 属性决定或文档head标签内的 meta 标签规定的 lang 属性决定

• :fullscreen 选取处于全屏状态的元素
• :defined 选取已定义的元素：包括原生元素以及自定义元素

可以用于控制复杂的自定义组件加载完成前的显示，使其仅在加载完成后显示

（6）伪元素选择器

伪元素选择器用于选取页面中一些特殊的并不存在的元素或是特殊的位置

• ::first-letter 选择文本第一个字母

只适用于块状元素

• ::first-line 选择文本第一行
• ::placeholder 选取表单元素的placeholder属性规定的文本
• ::selection 表示选中的内容
• ::marker 选取列表项目的符号或是数字

注意：以上四个伪元素选择器仅允许使用特定的CSS属性

• ::before 选择元素的开始，可以在元素开始插入一些内容

必须结合 content 属性使用

• ::after 选择元素的最后，可以在元素结束插入一些内容

必须结合 content 属性使用

• ::backdrop 选取全屏模式下的元素的背景，会在当前元素之下但在其他元素之上

可以用于在一些元素的全屏模式下修改默认的背景表现

1. CSS简介

CSS 即层叠样式表 (Cascading Style Sheets)，用于设置网页中元素的样式
最新的CSS版本为CSS3

2. CSS 基本语法

（1）CSS 结构

• 选择器 选择器用于选中页面中指定元素
• 声名块 声名块内包含为元素设定的样式
  • 声名 声名组成声名块，声明是键值对的形式

（2）CSS 注释

1
2
3
4
5

/* 这是一条CSS注释 */

/*
 * 这也是一条CSS注释
 */

可以在代码中的任何位置添加注释，注释可以横跨多行

（3）HTMLclass属性与id属性

**class** 属性规定元素的一个或多个 class 名称
**id** 属性规定元素的唯一 id 值
两者都是 HTML 元素的全局属性
区别在于，同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用

（4）CSS 样式表插入位置

有三种插入样式表的方法：

• 内联样式，在标签内通过 style 属性设置元素样式
• 内部样式表，将样式写在 head 标签的 style 标签里
• 外部样式表，在外部 CSS 文件中写样式，再通过 link 标签导入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE HTML>

<html>

  <head>
    <meta charset="utf-8">
    <title>css</title>

    <!-- 外部样式表 -->
    <link rel="stylesheet" type="text/css" href="example.css">

    <!-- 内部样式表 -->
    <style type="text/css">
      div {
        width: 100px;
      }
    </style>
  </head>

  <body>
    <!-- 内联样式 -->
    <div class="e" id="e0" style="height: 100%"></div>
  </body>

</html>

3. CSS 颜色

在HTML中，我们已经了解了一些颜色使用方式，如

• 颜色关键字，如 white 等
• 十六进制颜色，如 #de34e3
• rgb 函数及 rgba 函数，如 rgb(12,34,250)

与之对应的是RGB颜色模式，取值均从0至255

• 红色（red）
• 绿色（green）
• 蓝色（blue）

以下是其他一些在CSS中的颜色使用方法

• hsl函数及hsla函数 hsl(hue, saturation, lightness) hsla(hue, saturation, lightness, alpha)

与之对应的是HSL颜色模式

• 色相（hue）是色轮上从 0 到 360 的度数，0 是红色，120 是绿色，240 是蓝色

• 饱和度（saturation）是一个百分比值，可以认为是颜色的强度，0％ 表示灰色阴影，而 100％ 是全色

• 亮度（lightness）也是百分比，可以认为是应为颜色赋多少光，0％ 是黑色，50％ 是既不明也不暗，100％是白色

• transparent 关键字 | 指定透明色

• currentColor 关键字 | 指定从当前元素的文字颜色获取当前属性应指定的颜色

4. CSS 单位

许多 CSS 属性接受“长度”值，长度是一个后面跟着长度单位的数字，数字和单位之间不能出现空格；但若数字为 0，则可以省略单位

长度单位有两种，分别是绝对单位和相对单位

• 绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸
• 相对长度单位规定相对于另一个长度属性的长度

其中最常用的是px