CSS 基础

1. 简介

1.1 编写位置

行内样式：写在标签的 style 的属性中，只对当前标签有效。

内部样式：写在 <style> 标签内，通常将 <style> 放在 <head> 标签中。

外部样式：写在单独的 .css 文件中，然后在 html 文件中通过 <link> 标签引入，<link> 标签要放在 <head> 标签中。

html

<link rel="stylesheet" href="./main.css">

优先级：行内样式 > 内部样式 = 外部样式。

1.2 规范

CSS 语法由两部分组成：选择器 和 声明块，声明的格式为 属性名：属性值。

注释：/* 注释 */。

2. 选择器

2.1 通配选择器

通配选择器可以选中所有的 html 元素，通常用于清除样式：

css

* {
    /* 选中所有元素 */
    color: orange;
    font-size: 30px;
}

2.2 元素选择器

元素选择器可以为页面中某种元素设置统一样式：

css

/* 选中所有的h1标签 */
h1 {
    color: red;
}

2.3 类选择器

类选择器可以根据标签的 class 值进行选择：

css

/* 选中所有 class值 为 speak 的元素 */
.speak {
    color: red;
}

注意：

一个元素的 class 属性能写多个值，需要用空格隔开。
如果 class 的值由多个单词组成，需要用 - 连接。

2.4 ID 选择器

可以根据元素的 id 属性来精准地选中某个元素：

css

/* 选中id为earthy的元素 */
#earthy {
    color: red;
}

注意：

id 属性值尽量由字母、数字、下划线 和 短杠(-) 组成，最好以字母开头，区分大小写，不能包含空格。
一个元素只能有一个 id 属性值，多个元素的 id 属性值不能相同。
一个元素能同时有 class 和 id 属性。

2.5 交集选择器

可以选中同时符合多个条件的元素，只需要将多个普通选择器紧挨着写：

css

/* 选中类名为beauty的p元素 */
p.beauty {
    color: blue;
}
/* 选中类名包含rich和baeuty的元素 */
.rich.beauty {
    color: orange;
}

注意：

如果有标签名，标签名必须写在前面，且只能写一个，交集选择器中不可能出现两个元素选择器。
经常使用的组合是元素选择器配合类名选择器。

2.6 并集选择器

可以选中多个不同条件的元素，并集就是或者的意思：

css

/* 选择id为people，或者类名为male，或类名为fmale的元素 */
#people,
.male,
.fmale {
    color: red;
}

注意：

并集选择器一般竖着写，用于集体声明，能减少代码量。
任何形式的选择器都能作为并集选择器的一部分。

2.7 后代选择器

可以选中指定元素中符合要求的后代元素：

css

/* 选中ul中的所有li */
ul li {
    color: red;
}
/* 选中类名为subject的元素中所有类名为front-end的li */
.subject li.front-end {
    color: blue;
}

注意：后代选择器仅选中后代，不会选中链路中的祖先。

2.8 子代选择器

选定指定元素中符合要求的直接子元素：

css

/* div中子代a元素 */
div>a {
  color: red;
}

2.9 兄弟选择器

相邻兄弟选择器：选中指定元素后，符合条件的相邻兄弟元素：

css

/* 选中div后相邻的兄弟p元素 */
div+p {
  color: red;
}

通用兄弟选择器：选中指定元素后，符合条件的所有兄弟元素：

css

/* 选中div后的所有兄弟p元素 */
div~p {
  color: red;
}

注意：两种兄弟选择器，都是选择目标元素之后的元素。

2.10 属性选择器

选中属性值符合一定要求的元素：

css

/* 选中具有title属性的元素 */
[title] {
  color: red;
}
/* 选中具有title属性值为hello的div元素 */
div[title="hello"] {
  color: red;
}
/* 选中具有title属性值以h开头的div元素 */
div[title^="h"] {
  color: red;
}
/* 选中具有title属性值以o结尾的div元素 */
div[title$="o"] {
  color: red;
}
/* 选中具有title属性值包含l的div元素 */
div[title*="l"] {
  color: red;
}

2.11 伪类选择器

伪类选择器可以选中特殊状态元素。常用的伪类选择器有：

动态伪类

:link：超链接未被访问的状态。 :visited：超链接访问后的状态。
:hover：鼠标悬浮在元素上的状态。
:active：元素鼠标按下不松开的状态。

css

/* 选中没有访问过的a元素 */
a:link {
  color: orange;
}
/* 选中访问过的a元素 */
a:visited {
  color: gray;
}

必须按上述顺序写，否则可能会失效，lvha，lv只有 <a> 标签有效，ha 所有元素有效。

:focus：获取焦点的状态，表单类元素才能使用。

结构伪类

:first-child：所有兄弟元素中第一个。 :last-child：所有兄弟元素中最后一个。 :nth-child(n)：所有兄弟元素中第 n 个。 :first-of-type：所有同类型兄弟元素中第一个。 :last-of-type：所有同类型兄弟元素最后一个。 :nth-of-type(n)：所有同类型兄弟元素第 n 个。

关于 n 的值：

0 或不写：什么都不选 -- 几乎不用。
n：选中所有 -- 几乎不用。
整数：选中对应序号的子元素。
2n或even：选中序号为偶数的子元素。
2n+1或odd：选中序号为奇数的子元素。
-n+3：选中前三个。

否定伪类

:not(选择器)：排除满足括号中条件的元素。

css

/* 选中div的儿子p元素，但是排除类名为fail的 */
div>p:not(.fail) {
  color: red;
}

UI 伪类

:checked：被选中的复选框或按钮。
:enable：可用的表单元素。
:disabled：不可用的表单元素，有 disabled 属性。

目标伪类

:target：选中锚点指向的元素（了解）。

2.12 伪元素选择器

伪元素选择器可以选中元素的一些特殊位置，常用的有：

::first-letter：选中该元素的第一个文字。
::first-line：选中元素的第一行文字。
::selection：选中被鼠标选中的内容。
::placeholder：选中输入框的提示文字。
::before：在元素最开始的位置创建一个子元素，需要用 content 属性指定内容。
::after：在元素最后位置创建一个子元素，需要用 content 属性指定内容。

css

P::before {
  /* 在p元素前面添加￥ */
  content: '￥'
}

2.13 选择器的优先级

行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式。

详细计算方式：可以根据选择器计算出一组权重，格式为 (a, b, c)，a 代表 ID 选择器的个数，b 代表类、伪类、属性选择器的个数，c 代表元素、伪元素选择器的个数，再按从左到右的顺序依次比较 a，b，c 的大小，前位胜出后面不再比较。

特殊规则：

行内样式权重大于所有选择器。
!important 的权重大于行内选择器，权重最高。
并集选择器每部分权重分开计算。

2.14 CSS 三大特性

层叠性。
继承性：元素自动拥有父元素或祖先元素的某些特性。
规则：优先继承离得近的。常见的可继承属性：text-xxx、font-xxx、line-xxx、color。
优先级。

3. 颜色

3.1 颜色名

直接使用颜色对应的英文单词，编写比较简单，但能表达的颜色比较单一，所以用的不多。

3.2 rgb 或 rgba

使用红、黄、蓝这三种光的三原色进行组合，r 表示红色，g 表示绿色，b 表示蓝色，a 表示透明度。

红色：rgb(255, 0, 0)。
绿色：rgb(0, 255, 0)。
蓝色：rgb(0, 0, 255)。
红色，透明度为 0.5：rgba(255, 0, 0, 0.5)。

若三种颜色值相同，呈现灰色，值越大颜色越浅，rgb(0, 0, 0) 是黑色，rgb(255, 255, 255) 是白色。

三种颜色值，要么都用数值表示，要么用百分比，不能混用。

3.3 HEX 或 HEXA

HEX 的原理与 rgb 一样，依然通过红、绿、蓝进行组合，只不过用6个数字，分为三组来表达（十六进制）。

格式为：#rrggbb。

css

color: #ff0000; /* 红色 */
color: #00ff00; /* 绿色 */
color: #0000ff; /* 蓝色 */

/* 如果每种颜色两位都相同，可以简写 */
color: #ff9988; /* 可简写为#f98 */

/* 如果前三位简写，透明度就要简写 */
color: #ff998877; /* #f987 HEXA */

IE 浏览器支持 HEX，不支持 HEXA。

3.4 HSL 或 HSLA

HSL 是通过色相、饱和度、亮度来表示一个颜色的，格式为：hsl(色相、饱和度、亮度)。

色相：取值范围是0~360度，具体颜色看色相表。
饱和度：取值范围0%~100%（向色相中添加灰色，0% 全灰，100% 没有灰）。
亮度：取值范围 0%~100%（0% 黑色，100% 白色）。

4. 字体属性

4.1 字体大小

属性名：font-size。

不同浏览器默认字体大小不一样，最好给元素设置字体大小，通常给 body 元素设置，其他元素可以继承。

4.2 字体族

属性名：font-family。

css

div {
  font-family: "STCaiyun", "Microsoft YaHei", sans-serif
}

注意：

使用字体的英文名兼容性会更好。
如果字体名包含空格，必须使用引号包裹。
可以设置多个字体，从左到右查找，找到哪个用哪个，通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体），当前面都没找到，则到系统找一个衬线或非衬线字体。

4.3 字体风格

属性名：font-style。

常用值：

normal：正常（默认值）。
italic：斜体（使用字体自带的斜体效果，更推荐）。
oblique：斜体（强制倾斜产生斜体效果）。

4.4 字体粗细

属性名：font-weight。

常用值：

lighter：细。
normal：正常。
bold：粗。
bolder：很粗，很多字体不支持。
也可以用数值100~1000表示，没有单位，数值越大，字体越粗（或一样粗，具体看字体精细程度）。

div {
  font-weight: bold;
  font-weight: 600;
}

4.5 字体复合写法

属性名：font，可以把上述样式合并写。

规则：

字体大小、字体族必须写。
字体族必须是最后一位，字体大小必须是倒数第二位。
各个属性之间空格隔开。

div {
  font: bold italic 100px "STCaiyun","STHupo",sans-serif;
}

5. 文本属性

5.1 文本颜色

属性名：color。

可选值：颜色名、rgb 或 rgba、HEX 或 HEXA、HSL 或 HSLA。

5.2 文本间距

字母间距：letter-spacing。

单词间距：word-spacing （通过空格识别）。

值为 px ，正值让间距变大，负值缩小。

5.3 文本修饰

属性名：text-decoration。

可选值：

none：无装饰线，常用。
underline：下划线。
overline：上划线。
line-through：删除线。

可搭配如下值使用：

dotted：虚线。
wavy：波浪线。
也可以指定颜色。

5.4 文本首行缩进

属性名：text-indent。

属性值：长度单位，如 px 等。

5.5 文本对齐-水平

属性名：text-align。

常用值：

left：左对齐（默认）。
right：右对齐。
center：居中。

5.6 行高

属性名：line-height。

可选值：

normal：浏览器根据字体文字大小决定的一个默认值。
像素。
数字：根据自身 font-size 的倍数（很常用）。
百分比：根据自身 font-size 的百分比。

备注：由于字体设计，文字在一行中并不是绝对垂直居中。

注意事项：

line-height 过小 -- 文字产生重叠，最小值为 0 ，不能为负数。
line-height 可以继承，为了能更好呈现效果，最好写数值。
line-height 和 height 的关系。
1. 设置了 height ，那么元素高度就是 height。
2. 不设置 height ，元素高度会根据 line-height 计算。

应用场景：

对于多行文字：控制行与行之间的距离。
对于单行文字：让 height 与 line-height 相等，可以实现文字垂直居中。

5.7 vertical-align

属性名：vertical-align。

作用：用于指定，或内文字的垂直对齐方式。

常用值：

baseline：默认值，让元素的基线与父元素基线对齐。
top：让元素的与对齐。
middle：让元素的与加上父元素高度对齐。
bottom：让元素的与对齐。

注意：vertical-align 不能控制块元素。

6. 列表属性

列表相关的属性，可以作用在 ul、ol、li 上。

CSS属性名	功能	属性值
`list-style-type`	设置列表符号	`none`：不显示前面的标识，很常用 `square`：实心方块 .....
`list-style-position`	设置列表符号位置	`inside`：在 `li` 元素里面 `outside`：在在 `li` 元素外面
`list-style-image`	自定义列表符号	`url()`
`list`	上面几个属性复合	没有顺序要求

7. 边框属性

属性名	功能	属性值
`border-width`	边框宽度	css中能用的长度值
`border-color`	边框颜色	css中能用的颜色值
`border-style`	边框风格	none：默认值/solid：实线/dashed：虚线/dotted：点线/double：双实线
border	复合属性	顺序没要求

8. 表格独有属性

table-layout：设置列宽度，默认值为 auto，列宽根据内容计算，为 fixed，列宽均分。

border-spacing：单元格间距，生效的前提是单元格边框不能合并。

border-collapse：合并单元格边框，值为 collapse 合并，为 separate 不合并。

empty-cells：隐藏没有内容的单元格，默认为 show，显示，为 hide，隐藏，前提是单元格边框不能合并。

9. 背景属性

属性名	功能	属性值
`background-color`	设置背景颜色	颜色值
`background-image`	设置背景图片	`url()`
`background-repeat`	设置背景重复方式	`repeat`：重复、铺满整个元素、默认 `repeat-x`：只在水平方向重复 `repeat-y`：只在垂直方向重复 `no-repeat`：不重复
`background-position`	设置背景图位置	通过关键字指定位置：写两个值，空格隔开水平：`left`、`center`、`right` 垂直：`top`、`center`、`bottom` 通过长度指定坐标位置：两个值，代表离元素左边、顶部的距离
`background`	复合属性	没有顺序要求

10. 鼠标属性

属性名：cursor。

功能：设置鼠标光标样式。

属性：

pointer：小手。
move：移动图标。
text：文字选择器。
crosshair：十字架。
wait：等待。
help：帮助。

11. 盒子模型

11.1 长度单位

px：像素。
em：相对 font-size 的倍数。
rem：相对于根元素字体的倍数。
% ：根据父元素计算。

11.2 元素的显示模式

块元素 block

特点：

在页面中独占一行，不会与任何元素共用一行，从上到下排列。
默认宽度：。
默认高度：由内容撑开。
可以通过 css 设置宽高。

元素：

主体结构标签：<html>、<body>。
排版标签：<h1> ~ <h6>、<hr>、<p>、<pre>、div。
列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>。
表格相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr>。
<form> 和 <option>。

行元素 inline

特点：

在页面中，一行中不能容纳的行内元素，会在下一行从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
。

元素：

文本标签：<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>。
<a> 与 <label>。

行内块元素 inline-block

特点：

在页面中，一行中不能容纳的行内元素，会在下一行从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
。

元素：

图片：<img>。
单元格：<td>、<th>。
表单控件：<input>、<textarea>、<select>、<button>。
框架标签：<iframe>。

11.3 display

通过 css 的 display 属性可修改元素的默认显示模式，常用值如下：

none：元素被隐藏。
block：块级元素。
inline：行内元素。
inline-block：行内块元素。

11.4 盒子模型的组成

css 会把所有 html 元素看成一个盒子，所有样式也都基于这个盒子。

margin：盒子与外界的距离。
border：盒子的边框。
padding：紧贴内容的补白区域。
content：元素中的文本或后代元素都是它的内容。

盒子的大小 = content + 左右 padding + 左右 border。

注意：外边距不会影响盒子大小，但会影响盒子位置。

11.5 盒子内容区

width：设置内容区域宽度。
min-width：设置内容区域最小宽度。
max-width：设置内容区域最大宽度。
height：设置内容区域高度。
min-height：设置内容区域最小高度。
max-height：设置内容区域最大高度。

11.6 盒子默认宽度

默认宽度就是不写 width 元素呈现的宽度。

总宽度 = 父元素 content 宽度 - 自身左右 margin。

内容区宽度 = 父元素 content 宽度 - 自身左右 margin - 自身左右 border - 自身左右 padding。

11.7 内边距

padding-top：上内边距。
padding-left：左内边距。
padding-right：右内边距。
padding-bottom：下内边距。

padding 复合属性使用规则：

padding: 10px 上下左右都是 10 px。
padding: 10px 20px 上下 10px ，左右 20 px。
padding: 5px 10px 15px 20px 上 5px，右 10px，下 15px，左 20px。

注意：

块元素、行内块元素可以完美设置四个方向 padding ，行内元素可以设置左右 padidng，上下可能会出问题。
不能为负值。

11.8 外边距

margin-top：上内边距。
margin-left：左内边距。
margin-right：右内边距。
margin-bottom：下内边距。
margin 复合属性使用规则同 padding。

注意：

子元素的 margin 是参考父元素的 content 计算的。
上左 margin 影响自己的位置，右下影响兄弟元素的位置。
块元素、行内块元素可以完美设置四个方向 margin ，行内元素可以设置左右 margin，上下不能设置。
margin 值可以为 auto，块级元素左右 margin 都为 auto，则会在父元素水平居中。
值可以是负值。

margin 塌陷问题：第一个元素的上 margin，最后一个元素的下 margin，会作用在父元素上。解决：给父元素设置 overflow: hidden 或给父元素加上边框。

margin 合并问题：上面兄弟元素的下 margin 和下面兄弟的上 margin 会合并，取最大的值，不会相加。
解决：无需解决，布局时只给一个元素设定就行。

11.9 处理内容溢出

属性名：overflow。

可选值：

visible：显示，默认值。
hidden：将溢出内容隐藏，常用。
scroll：显示滚动条，不论溢没溢出。
auto：溢出显示滚动条，不溢出不显示，常用。

11.10 隐藏元素的方式

方式一：visibility 属性，默认值为 show，设置为 hidden，元素会隐藏，但还占有位置。

方式二：display:none 属性，元素隐藏且不占位。

11.11 样式的继承

会继承的属性：字体属性，文本属性（除 vertical-align）、文字颜色等，不会影响布局。

不会继承的属性：边框、内外边距，宽高、溢出方式等。

注意：元素默认样式优先级高于继承的样式。

11.12 布局小技巧

行内元素、行内块元素可以被父元素当作文本处理，即可以使用 text-align、line-height、text-indent等控制行内、行内块在父元素中的对齐。
如何让子元素在父元素水平居中:
- 若子元素为块元素，给子元素加上：margin: 0 auto。
- 若子元素为行内、行内块元素，给父元素加上：text-align: center。
如何让子元素在父元素垂直居中：
- 若子元素为块元素，给子元素加上 margin-top。
- 若子元素为行内、行内块元素：让父元素的 height = line-height，每个子元素都加上 vertical-align: middle，若想绝对垂直居中，父元素 font-size 设置为0。

11.13 元素之间的空白问题

产生的原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

去掉换行和空格（不推荐）。
给父元素设置 font-size: 0 ，再给显示文字的元素单独设置大小（推荐）。

11.14 行内块的幽灵空白问题

产生原因：行内块元素与文本基线对齐，而文本基线与文本最底端有一定距离。

解决方案：

方案一：给行内块设置 vertical-align，值不为 baseline 即可。
方案二：给父元素设置 font-size: 0，给内部文本单独设置文本大小。

12. 浮动

12.1 元素浮动的特点

脱离文档流（飘起来）。
不管浮动前是什么元素，浮动后默认宽高都是被内容撑开，。
不独占一行，可以与其它元素共用一行。
不会 margin 合并，也不会 margin 塌陷，能够完美设置四个方向的内外边距。
不会向行内块一样被当作文本处理。

12.2 浮动后的影响

对兄弟元素的影响：后面的兄弟元素会占据浮动元素之前的位置，在浮动元素的下面，对前面的兄弟元素没有影响。

对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷，但父元素的宽度依然束缚浮动的元素。

12.3 解决浮动的影响（清除浮动）

给浮动元素的父元素，设置伪元素，通过伪元素清除浮动：

css

.parent::after {
  content: '';
  display: block;
  clear: both;
}

布局中的原则：设置浮动时，兄弟元素要么全都浮动，要么都不浮动。

13. 定位

13.1 相对定位

实现相对定位：给元素设置 position: relative ，通过 left、right、top、bottom 四个值调整位置。

相对定位是。

特点：

不会脱离文档流，只是视觉上的变化，不会对其他元素产生任何影响。
定位元素的显示层级比普通元素高，无论什么定位，显示层级是一样的。
1. 定位的元素会盖在普通元素上。
2. 都发生定位的两个元素，后写的盖在先写的之上。
left 不能与 right 一起使用，top 不能与 bottom 一起使用。
绝大多数情况，相对定位会与绝对定位一起使用。

13.2 绝对定位

实现绝对定位：给元素设置 position: absolute，通过 left、right、top、bottom 四个值调整位置。

绝对定位是。

包含块：

对于没有脱离文档流的元素，包含块就是其父元素。
对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素，都没有，则为整个页面。

特点：

脱离文档流，会对父元素、后面的兄弟元素有影响。
left 不能和 right 一起设置，top 不能和 bottom 一起设置。
绝对定位和浮动不能同时设置，如果同时设置，浮动失效。
绝对定位的元素也能通过 margin 调整位置，但不推荐。
定位元素（position: relative/absolute/fixed/sticky）默认宽高都被内容撑开，且能自由设置宽高。

13.3 固定定位

实现固定定位：给元素设置 position: fixed，通过 left、right、top、bottom 四个值调整位置。

固定定位是。

特点：

脱离文档流，会对父元素、后面的兄弟元素有影响。
left 不能和 right 一起设置，top 不能和 bottom 一起设置。
固定定位和浮动不能同时设置，如果同时设置，浮动失效。
固定定位的元素也能通过 margin 调整位置，但不推荐。

13.4 粘性定位

实现固定定位：给元素设置 position: sticky，通过 left、right、top、bottom 四个值调整位置。

粘性定位是。

特点：

不会脱离文档流，是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top。
绝对定位的元素也能通过 margin 调整位置，但不推荐。

13.5 定位层级

定位元素的显示层级比普通元素高，无论什么定位，显示层级一样。
如果发生重叠，默认情况：后面元素会压住前面元素。
可以通过 z-index 调整元素的显示层级，值是数字，没有单位，值越大显示层级越高。
只有定位元素设置 z-index 才有效。
如果 z-index 大的元素没有覆盖小的元素，请检查其包含块的层级。

13.6 定位的特殊应用

让定位元素的宽充满包含块：

块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为0。
高度想与包含块一致，top 和 bottom 设为0。

让定位元素在包含块居中：

css

top: 0;
left: 0;
right: 0
bottom: 0
margin: auto

CSS 基础 ​

1. 简介 ​

1.1 编写位置 ​

1.2 规范 ​

2. 选择器 ​

2.1 通配选择器 ​

2.2 元素选择器 ​

2.3 类选择器 ​

2.4 ID 选择器 ​

2.5 交集选择器 ​

2.6 并集选择器 ​

2.7 后代选择器 ​

2.8 子代选择器 ​

2.9 兄弟选择器 ​

2.10 属性选择器 ​

2.11 伪类选择器 ​

2.12 伪元素选择器 ​

2.13 选择器的优先级 ​

2.14 CSS 三大特性 ​

3. 颜色 ​

3.1 颜色名 ​

3.2 rgb 或 rgba ​

3.3 HEX 或 HEXA ​

3.4 HSL 或 HSLA ​

4. 字体属性 ​

4.1 字体大小 ​

4.2 字体族 ​

4.3 字体风格 ​

4.4 字体粗细 ​

4.5 字体复合写法 ​

5. 文本属性 ​

5.1 文本颜色 ​

5.2 文本间距 ​

5.3 文本修饰 ​

5.4 文本首行缩进 ​

5.5 文本对齐-水平 ​

5.6 行高 ​

5.7 vertical-align ​

6. 列表属性 ​

7. 边框属性 ​

8. 表格独有属性 ​

9. 背景属性 ​

10. 鼠标属性 ​

11. 盒子模型 ​

11.1 长度单位 ​

11.2 元素的显示模式 ​

11.3 display ​

11.4 盒子模型的组成 ​

11.5 盒子内容区 ​

11.6 盒子默认宽度 ​

11.7 内边距 ​

11.8 外边距 ​

11.9 处理内容溢出 ​

11.10 隐藏元素的方式 ​

11.11 样式的继承 ​

11.12 布局小技巧 ​

11.13 元素之间的空白问题 ​

11.14 行内块的幽灵空白问题 ​

12. 浮动 ​

12.1 元素浮动的特点 ​

12.2 浮动后的影响 ​

12.3 解决浮动的影响（清除浮动） ​

13. 定位 ​

13.1 相对定位 ​

13.2 绝对定位 ​

13.3 固定定位 ​

13.4 粘性定位 ​

13.5 定位层级 ​

13.6 定位的特殊应用 ​

CSS 基础

1. 简介

1.1 编写位置

1.2 规范

2. 选择器

2.1 通配选择器

2.2 元素选择器

2.3 类选择器

2.4 ID 选择器

2.5 交集选择器

2.6 并集选择器

2.7 后代选择器

2.8 子代选择器

2.9 兄弟选择器

2.10 属性选择器

2.11 伪类选择器

2.12 伪元素选择器

2.13 选择器的优先级

2.14 CSS 三大特性

3. 颜色

3.1 颜色名

3.2 rgb 或 rgba

3.3 HEX 或 HEXA

3.4 HSL 或 HSLA

4. 字体属性

4.1 字体大小

4.2 字体族

4.3 字体风格

4.4 字体粗细

4.5 字体复合写法

5. 文本属性

5.1 文本颜色

5.2 文本间距

5.3 文本修饰

5.4 文本首行缩进

5.5 文本对齐-水平

5.6 行高

5.7 vertical-align

6. 列表属性

7. 边框属性

8. 表格独有属性

9. 背景属性

10. 鼠标属性

11. 盒子模型

11.1 长度单位

11.2 元素的显示模式

11.3 display

11.4 盒子模型的组成

11.5 盒子内容区

11.6 盒子默认宽度

11.7 内边距

11.8 外边距

11.9 处理内容溢出

11.10 隐藏元素的方式

11.11 样式的继承

11.12 布局小技巧

11.13 元素之间的空白问题

11.14 行内块的幽灵空白问题

12. 浮动

12.1 元素浮动的特点

12.2 浮动后的影响

12.3 解决浮动的影响（清除浮动）

13. 定位

13.1 相对定位

13.2 绝对定位

13.3 固定定位

13.4 粘性定位

13.5 定位层级

13.6 定位的特殊应用