CSS 基础不能忘

来杯卡布奇洛

已于 2022-03-26 10:56:03 修改

阅读量191

点赞数

分类专栏： CSS 文章标签： css css3 前端

于 2020-11-25 15:55:22 首次发布

本文链接：https://blog.csdn.net/lan123456_/article/details/109719828

版权

CSS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

CSS 复习手册，基础不能忘

1. CSS 简介

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。有时我们也会称之为 CSS 样式表或级联样式表。

CSS 是也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML，让 HTML 更漂亮，让页面布局更简单。

CSS 最大价值： 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

2. CSS 语法规则

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
css组成

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文 “:” 分开。
多个“键值对”之间用英文 “;” 进行区分。

所有的样式，都包含在 <style></style> 标签内，表示是样式表，写在 <head></head> 中，一般写到 </head> 上方。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<style>
		p {
			color: red;
			font-size: 16px;
		}
	</style>
</head>

3. CSS 风格

3.1 样式格式书写

紧凑格式
```
p { color: red; font-size: 16px;}
```
展开格式
```
p {
	color: red;
	font-size: 16px;
}
```

推荐第二种格式，因为更直观。

3.2 样式大小写

全小写
```
p {
	color: red;
}
```
全大写
```
P {
	COLOR: RED;
}
```

推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

3.3 空格规范

属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格
```
p {
	color: red;
}
```

3.4 CSS注释

在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/” 结束。

/*  需要注释的内容  */

示例

p {
 /* 所有的字体是14像素大小*/
  font-size: 14px;                 
}

3.5 选择器规范

使用并集选择器时，每个选择器声明独占一行。

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login  input {}
.comment div * {}

3.6 属性规范

属性定义另起一行。

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

属性定义后必须以分号结尾。

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

3.7 CSS 属性书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

3.8 页面布局流程

为了提高网页制作的效率，布局时通常有以下的布局流程：

必须确定页面的版心（可视区），我们测量可得知。
分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成的。
制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块。

4 CSS 引入方式

按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全是实现结构和样式相分离	需要引入	最多	控制多个页面

4.1 行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

<div style="color: red; font-size: 12px;">行内样式示范</div>

style 其实就是标签的属性
在双引号中间的样式，写法要符合 CSS 规范
可以控制当前的标签设置样式
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
使用行内样式表设定 CSS，通常也被称为行内式引入

4.2 内部样式表

内部样式表（内嵌样式表）是写到html页面内部。是将所有的 CSS 代码抽取出来，单独放到一个

<style>
	p {
		color: red;
		font-size: 16px;
	}
</style>

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有实现结构与样式完全分离
使用内部样式表设定 CSS，通常也被称为嵌入式引入

4.3 外部样式表

实际开发都是外部样式表，适合于样式比较多的情况。

核心是：样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。

引入外部样式表分为两步：

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

在 HTML 页面中，使用<link> 标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

属性	说明
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

使用外部样式表设定 CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式

5. CSS选择器

选择器分为基础选择器和复合选择器两个大类。

5.1 CSS 选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

p {
	color: red;
}

上面 CSS 做了两件事：

找到所有的 p 标签。
设置这些标签的样式，字体颜色为红色。

5.2 CSS 基础选择器

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

5.2.1 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

语法：

标签名{
 属性1: 属性值1; 
 属性2: 属性值2; 
 属性3: 属性值3; 
 ...
}

作用

标签选择器可以把某一类标签全部选择出来，比如所有的

标签和所有的标签。
优点

能快速为页面中同类型的标签统一设置样式。
缺点

不能设计差异化样式，只能选择全部的当前标签。

5.2.2 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 “.” 号显示。

语法

.类名 {
 属性1: 属性值1; 
 ...
}

注意点

① 类选择器使用 “.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。

② 可以理解为给这个标签起了一个名字来表示。

③ 长名称或词组可以使用中横线来为选择器命名，比如 .sub-nav。

④ 不要使用纯数字、中文等命名，尽量使用英文字母来表示。

⑤ 命名要有意义，尽量使别人一眼就知道这个类名的目的。

⑥ 命名规范：后续补充。

5.2.3 类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。

多类名使用方式
```
<div class="red font20">亚瑟</div>
```
(1) 在标签 class 属性中写多个类名

(2) 多个类名中间必须用空格分开

(3) 这个标签就可以分别具有这些类名的样式

多类名开发中使用场景

(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面

(2) 这些标签都可以调用这个公共的类，然后再调用自己独有的类

(3) 从而节省CSS代码，统一修改也非常方便

<style>
	.pink {
		color: pink;
	}

	.font20 {
		font-size: 
	}

	.fontWeight {
		font-weight: 700;
	}
</style>

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安琪拉</div>
<div class="font14">貂蝉</div>

5.2.4 id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 “#" 来定义。

语法
```
#id名 {
 属性1: 属性值1; 
 ...
}
```

注意：

id 属性只能在每个 HTML 文档中出现一次。

	<div id="box"></div>
	<!-- 下面的语句是错误的，同一个类名只能对一个标签使用 -->
	<p id="box"></p>

id 选择器和类选择器的区别

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。

③ id 选择器和类选择器最大的不同在于使用次数上。

④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

5.2.5 通配符选择器

在 CSS 中，通配符选择器使用 “*” 定义，它表示选取页面中所有元素（标签）。

语法
```
* {
	 属性1: 属性值1; 
	 ...
}
```
通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，比如下面是清除所有的元素标签的内外边距
```
* {
	 margin: 0;
	 padding: 0;
}
```

5.3 CSS 复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态	与链接相关	较多	重点记住 a{} 和 a:hover 实际开发的写法
:foucs 选择器	选择获得光标的表单	与表单相关	较少	input:focus 记住这个写法

5.3.1 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法
```
元素1 元素2 { 样式声明 }
```

示例

/* 选择 ul 里面所有的 li标签元素 */
ul li {
	color: red; 
}

注意点
- 元素1 和元素2 中间用空格隔开
- 元素1 是父级，元素2 是子级，最终选择的是元素2
- 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
- 元素1 和元素2 可以是任意基础选择器

5.3.2 子选择器

子元素选择器（子选择器）只能选择某元素的最近一级子元素。简单理解就是选亲儿子元素。

语法
```
元素1 > 元素2 { 样式声明 }
```

示例

/* 选择 div 里面所有最近一级 p 标签元素 */
div > p {
	color: red; 
}

注意点
- 元素1 和元素2 中间用大于号（>）隔开
- 元素1 是父级，元素2 是子级，最终选择的是元素2
- 元素2 必须是亲儿子，其孙子、重孙之类都不归他管

5.3.3 并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法
```
元素1, 元素2 { 样式声明 }
```

示例

/* 同时选择 div 和 p 标签元素 */
div, p {
	color: red; 
}

注意点
- 元素1 和元素2 中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明

5.3.4 交集选择器

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

语法
```
标签名.类名 { 样式声明 }
```

示例

/* 选择类名为 nav 的 div 标签 */
div.nav {
	color: red; 
}

注意点
- 第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
- 用的相对来说比较少，不太建议使用。

5.3.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

因为伪类选择器很多，比如有链接伪类、结构伪类等。

5.3.6 链接伪类选择器

a:link：未访问的链接
a:visited：已访问的链接
a:hover：鼠标移动到链接上
a:active：选定的链接
链接伪类选择器注意事项：
- 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
- 记忆法：love hate 或者 lv 包包 hao 。
- 因为叫链接伪类，所以都是利用交集选择器 a:link a:hover。
- 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器实际工作开发中的写法：

/* a 是标签选择器 所有的链接 */
a {
	color: gray;
}

/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
	color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

5.3.7 :foucs 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

示例

/* 当输入框获取焦点时，背景变黄色 */
input:focus {
	background-color:yellow;
}

6. CSS 字体属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

属性	表示	注意点
font-size	字号	经常使用的单位是 px，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	加粗是 700 或 bold；不加粗是 400 或 normal；不需要跟单位
font-style	字体样式	倾斜是 italic；不倾斜是 normal；工作中最常用 normal
font	字体连写	必须按照规定顺序来写；字号、字体必须有，其他可省略

6.1 字体系列

CSS 使用 font-family 属性定义文本的字体系列。

p { font-family: "微软雅黑";} 
div {font-family: Arial, "Microsoft Yahei", "微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果是由空格隔开的多个单词组成的字体，加引号使用
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: ‘Microsoft YaHei’, tahoma, arial, ‘Hiragino Sans GB’; }

6.2 字体大小

CSS 使用 font-size 属性定义字体大小。

p { 
	font-size: 20px; 
}

px（像素）是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小

6.3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p { 
	font-weight: bold;
}

属性值	作用
normal	默认值，不加粗
bold	定义粗体，加粗
100 ~ 900	逐渐加粗，400 相当于 normal，700 相当于 bold，注意使用时后面不跟单位

可以让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
实际开发时，我们更喜欢用数字表示粗细

6.4 文字样式

CSS 使用 font-style 属性设置文本的风格。

p { 
	font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

6.5 字体复合属性

可以使用 font 属性将字体属性写在一起，这样可以更节约代码。

语法

body { 
	font: font-style font-weight font-size/line-height font-family; 
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

7. 文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

属性	用途	注意点
color	文本颜色	通常用十六进制，也可以简写，比如 #ff0000 简写为 # f00
text-align	文本对齐	只能设置文字水平对齐方式
text-indent	文本缩进	通常用于段落首行缩进两个字的距离，单位用 em
text-decoration	文本修饰	重点记住添加下划线 underline 和取消下划线 none
line-height	行高	控制行与行之间的距离

7.1 文本颜色

color 属性用于定义文本的颜色。

div { 
	color: red;
}

表示方式	属性值
预定义的颜色值	red、green、blue等
十六进制	#F00、#00a4ff、#a5a5a5等
RGB 代码	rgb(255, 0, 0) 或 rgb(100%, 0, 0)

注意：开发中最常用16进制。

7.2 对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。

div { 
	text-align: center;
}

属性值	作用
left	左对齐
center	居中对齐
right	右对齐

7.3 装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div { 
	text-decoration：underline;
}

属性值	作用
none	默认值，没有装饰线（最常用）
underline	装饰下划线（常用）
overline	上划线（几乎没用过）
line-through	删除线（不常用）

7.4 文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

div { 
	text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p { 
	text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小，如果当前元素没有设置大小，则会按照父元素的 1 个文字大小缩进。

7.5 行间距

line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。

div { 
	line-height: 16px;
}

行间距

7.6 行间距（行高）测量

行高的测量方法：

测量行高时使用两个顶线之间的距离或两个底线之间的距离最方便。

7.7 单行文本垂直居中

行间距（行高）我们利用最多的一个地方是：可以让单行文本在盒子中垂直居中对齐。

方法： 文字的行间距（行高）等于盒子的高度。
原因：

行高 = 上间距 + 内容高度 + 下间距

上间距和下间距总是相等的，因此文字看上去是垂直居中的。
行高和高度的三种关系
- 如果行高 = 高度文字会垂直居中
- 如果行高 > 高度文字会偏下
- 如果行高 < 高度文字会偏上

8. CSS 的元素显示模式

什么是元素的显示模式？

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
作用：

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素的类型(分类)

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

8.1 块元素(block-level)

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

（1）自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器级盒子，里面可以放行内元素或者块级元素。
注意：
- 文字类的元素内不能放块级元素
- <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
- 同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

8.2 行内元素(inline-level)

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个

（2）高、宽直接设置是无效的

（3）默认宽度就是它本身内容的宽度

（4）行内元素只能容纳文本或其他行内元素
注意：
- 链接里面不能再放链接
- 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

8.3 行内块元素（inline-block）

在行内元素中有几个特殊的标签 —— <img />、<input />、<textarea>、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）

（2）默认宽度就是它本身内容的宽度（行内元素特点）

（3）高度，行高、外边距以及内边距都可以控制（块级元素特点）

8.4 三种模式总结区别

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级，可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

9. 标签显示模式转换 display

特殊情况下，我们需要元素模式的转换。

简单理解: 一个模式的元素需要另外一种模式的特性。

转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块：display: inline-block;

10. CSS 背景

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat / no-repeat / repeat-x / repeat-y
background-position	背景位置	length/position 分别是 x 和 y 坐标。切记，如果有精确数值单位，则必须按照先 X 后Y 的写法
background-attachment	背景固定还是滚动	scroll（背景滚动）/ fixed（背景固定）
背景简写	书写更简单	背景颜色背景图片地址背景平铺背景滚动背景位置; 他们没有顺序
背景透明	背景颜色半透明	background: rgba(0, 0, 0, 0.3); 后面必须是 4个值，0.3 可以简写为 .3

10.1 背景颜色

background-color 属性定义了元素的背景颜色。

语法：
```
background-color: 颜色值;
```
注意：一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。
```
background-color: transparent;
```

10.2 背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）。

语法：
```
background-image : none | url (url) 
```
参数作用
none 无背景图（默认的）
url 使用绝对或相对地址指定背景图像

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

示例

background-image : url(images/demo.png);

注意

背景图片后面的地址，千万不要忘记加 url，同时里面的路径不要加引号。

10.3 背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

语法：
```
background-repeat : repeat | no-repeat | repeat-x | repeat-y 
```
属性值作用
repeat 背景图像在纵向和横向上平铺（默认的）
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺

属性值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

10.4 背景位置

利用 background-position 属性可以改变图片在背景中的位置。

语法：
```
background-position: x y;
```
参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位

参数值值
精确单位百分数 | 由浮点数字和单位标识符组成的长度值
方位名词 top | center | bottom | left | right
参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
- 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值必须是 x 坐标，第二个值必须是 y 坐标，否则无效

参数值	值
精确单位	百分数 \| 由浮点数字和单位标识符组成的长度值
方位名词	top \| center \| bottom \| left \| right

10.5 背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 可以制作视差滚动的效果。

语法：
```
background-attachment : scroll | fixed
```
参数作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

10.6 背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中，从而节约代码量。

这是实际开发中，我们更提倡的写法。
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

语法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

10.7 背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

语法：
```
background: rgba(0, 0, 0, 0.3);
```
最后一个参数是 alpha 透明度，取值范围 0~1 之间
我们习惯把 0.3 的 0 省略掉，这样写 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3 新增属性，是 IE9+ 版本浏览器才支持的
但是现在实际开发，我们不太关注兼容性写法了，可以放心使用

11. CSS 三大特性

css 有三个非常重要的特性：层叠性、继承性、优先级。

11.1 CSS层叠性

概念：

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力，如果一个属性通过多个相同选择器设置到同一个元素上，那么这个时候一个其中属性就会将另一个属性层叠掉（覆盖掉）。
原则：
- 样式冲突，遵循的原则是就近原则。 哪个样式离着结构近，就执行哪个样式。
- 只层叠相同属性，其他属性依然会生效。
- 样式不冲突，不会层叠。

示例

p {
	font-size: 16px;
	color: red;
}

/* 根据层叠性的就近原则，会执行下面 color: yellow; ，但是会保留 font-size: 16px; */
p {
	color: yellow;
}

11.2 CSS继承性

概念：

子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。
注意：
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
- 子元素可以继承父元素的样式（text-，font-，line- ，background- 这些元素开头的可以继承，以及color属性）

行高的继承性

行高可以跟单位，也可以不跟单位，不跟单位表示倍数
如果子元素没有设置行高，则会继承父元素行高
继承行高的最大优势就是子元素可以根据自己的文字大小自动调整行高

body {
	color: pink;
	/* font: 12px/24px 'Microsoft YaHei'; */
	font: 12px/1.5 'Microsoft YaHei';
}

div {
	/* 子元素继承了父元素 body 的行高 1.5 */
	/* 这个1.5 就是当前元素文字大小 font-size 的1.5倍，所以当前div 的行高就是 14 * 1.5 = 21 */
	font-size: 14px; 
}

p {
	/* 子元素继承了父元素 body 的行高 1.5 */
	/* 如果没有手动指定文字大小，则会继承父亲的文字大小，所以 p 的文字大小为 12px，当前 p 的行高就是  12 * 1.5  =  18 */
}

11.3 CSS优先级

概念：

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时：
- 选择器相同，则执行层叠性。
- 选择器不同，则根据选择器权重执行。

11.3.1 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）。

标签选择器	计算权重公式
继承或者 *	0,0,0,0
标签选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important	∞ 无穷大

div {
	color: pink!important;  
}

值从左到右，左面的最大，一级大于一级，数位之间没有进制
级别之间不可超越，即ID选择器永远大于类选择器，类选择器永远大于标签选择器

11.3.2 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
注意：

数位之间没有进制，比如说： 0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0, 0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况，即级别之间不可超越。

11.3.3 继承的权重是0

这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

如果选中了，那么以上面的公式来计权重。谁大听谁的。
如果没有选中，那么权重是0，因为继承的权重为0。

body {
	color: red;
}

/* a 链接虽然继承了body的color属性，但是 a 链接浏览器默认制定了一个样式：蓝色的、有下划线，相当于 a {color: blue; text-decoration: underline;}，权重大于继承，所以继承过来的color属性没有作用 */
/* 下面使用a标签再设置一下color属性，根据层叠性的原则，下面的color属性会覆盖默认的color属性 */
a {
	color: green;
}

12. 盒子模型（Box Model）

页面布局三大核心：盒子模型、浮动、定位。

12.1 看透网页布局的本质

网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子 Box 。
利用 CSS 设置好盒子样式，然后摆放到相应位置。
往盒子里面装内容。

网页布局的核心本质：就是利用 CSS 摆盒子。

盒子是网页布局的关键点，所以我们更应该弄明白这个盒子有什么特点。

12.2 盒子模型组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

盒子模型（Box Model）的组成
- 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
- 盒子里面的文字和图片等元素是内容区域
- 盒子的厚度，我们称之为盒子的边框
- 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
- 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
标准盒子模型

标准盒子模型

12.3 盒子边框（border）

border 可以设置元素的边框。边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色。

语法：
```
border : border-width || border-style || border-color 
```
属性作用
border-width 定义边框粗细，单位是px
border-style 边框的样式
border-color 边框颜色
边框样式 border-style 可以设置如下值：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

12.3.1 边框综合设置

CSS 边框属性允许你指定一个元素边框的样式和颜色。

边框简写：

 border: 1px solid red;  /* 没有顺序 */

边框分开写法：：

border-top: 1px solid red; /* 只设定上边框， 其余同理 */

12.3.2 盒子边框写法总结表

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度样式颜色;	border-bottom:宽度样式颜色;	border-left:宽度样式颜色;	border-right:宽度样式颜色;

12.3.3 表格的细线边框

通过表格的cellspacing="0"，将单元格与单元格之间的距离设置为0。

但是两个单元格之间的边框会出现重叠，从而使边框变粗。

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：
```
border-collapse: collapse;
```
- collapse 单词是合并的意思
- border-collapse: collapse; 表示相邻边框合并在一起。

示例

<style>
	table {
		width: 500px;
		height: 300px;
		border: 1px solid red;
	}
	td {
		border: 1px solid red;
		text-align: center;
	}
	table, td {
		border-collapse: collapse;  /*合并相邻边框*/
	}
</style>

12.3.4 边框会影响盒子的实际大小

边框会额外增加盒子的实际大小，对此我们有两种方案解决:

测量盒子大小的时候，不量边框
如果测量的时候包含了边框，则需要 width/height 减去边框宽度

12.4 内边距（padding）

padding 属性用于设置内边距， 是指边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

当我们给盒子指定padding值之后，发生了2件事情：

内容和边框有了距离，添加了内边距。
盒子变大了。

注意：

如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。
如果想要盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
如何盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

我们分开写有点麻烦，我们可以不可以简写呢？

属性值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距左右内边距；
3个值	padding：上内边距左右内边距下内边距；
4个值	padding: 上内边距右内边距下内边距左内边距；

12.4.1 导航案例

导航案例

<head>
	<meta charset="UTF-8">
	<title>导航栏案例</title>
	<style>
		/*清除元素默认的内外边距*/
		* {
			margin: 0;
			padding: 0;
		}
		.nav {
			height: 41px;
			background-color: #FCFCFC;
			/*上边框*/
			border-top: 3px solid #FF8500;
			/*下边框*/
			border-bottom: 1px solid #EDEEF0;
		}
		.nav a {
			/*转换为行内块*/
			display: inline-block;
			height: 41px;
			line-height: 41px;
			color: #4C4C4C;
			/*代表 上下是 0  左右是 20 内边距*/
			padding: 0 20px;
			text-decoration: none;
			font-size: 12px;
		}
		.nav a:hover {
			background-color: #eee;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">设为首页</a>
		<a href="#">手机新浪网</a>
		<a href="#">移动客户端</a>
		<a href="#">博客</a>
		<a href="#">微博</a>
		<a href="#">关注我</a>
	</div>
</body>

12.4.2 内边距会影响盒子的实际大小

问题

如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。
解决：

通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

12.4.3 padding不影响盒子大小情况

如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

12.5 内盒尺寸计算（盒子实际大小）

宽度

Element Height = content height + padding-top + padding-bottom + border-top + border-bottom （Height为内容高度）
高度

Element Width = content width + padding-left + padding-right + border-left + border-right （Width为内容宽度）
盒子的实际的大小 = 内容的宽度或高度 + 内边距 + 边框

12.6 外边距（margin）

margin 属性用于设置外边距，margin就是控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin 简写方式代表的意义跟 padding 完全一致。顺序为：上右下左。

12.6.1 块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了宽度（width）
- 盒子左右的外边距都设置为 auto

实际工作中常用这种方式进行网页布局，示例代码如下：

/* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */
.header{ width:960px; margin:0 auto;}

常见的写法，以下三种都可以：
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;

12.6.2 行内元素、行内块元素以及文字居中

盒子内的文字、行内元素、行内块元素水平居中给其父元素添加 text-align:center 即可。

/*  文字 行内元素 行内块元素水平居中 */
text-align: center;

12.6.3 插入图片和背景图片移动位置的方式

插入图片：我们用的最多，比如产品展示类，移动位置只能靠盒模型 padding margin。
背景图片：我们一般用于小图标背景或者超大背景图片，背景图片只能通过 background-position。

 img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置，可以用 margin 或padding 盒模型 */
		margin-left: 50px; /* 插入的图片也是一个盒子 */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景图片更改位置，我用 background-position */
	}

12.6.4 清除元素的默认内外边距

默认内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意：

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

12.6.5 外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和，取两个值中的较大者。

解决方案：
1. 尽量只给一个盒子添加margin值。
嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：
1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加 overflow: hidden 属性。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题。

12.7 盒子模型布局稳定性

学习完盒子模型，内边距和外边距之后，什么情况下用内边距，什么情况下用外边距？

大部分情况下是可以混用的。

就是说，用内边距也可以，用外边距也可以。哪个方便，就用哪个。
根据稳定性来分，建议如下：

按照优先使用宽度（width），其次使用内边距（padding），再次外边距（margin）。
```
  width >  padding  >   margin   
```
原因：
- margin 会有外边距合并，还有 ie6 下面 margin 加倍的bug，所以最后使用。
- padding 会影响盒子大小，需要进行加减计算，其次使用。
- width 没有问题，经常使用宽度剩余法，高度剩余法来做。

12.8 盒子模型总结

布局为什么用不同盒子，难道不能只用div？

标签都是有语义的，合理的地方用合理的标签。比如产品标题就用 h 标签，大量文字段落就用 p 标签。
为什么用这么多类名？

类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也方便。
到底用 margin 还是 padding？

大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。

13. 浮动(float)

13.1 传统网页布局的三种机制

网页布局的核心——就是用 CSS 来摆放盒子。

CSS 提供了 3 种机制 来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

标准流（普通流/文档流）
- 块级元素会独占一行，从上向下顺序排列
  - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
  - 常用元素：span、a、i、em等
浮动
- 让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示。
定位
- 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

13.2 为什么需要浮动？

我们首先要思考以下2个布局中最常见的问题？

如何让多个盒子(div)水平排列成一行？
如何实现盒子的左右对齐？

虽然我们前面学过行内块（inline-block）但是他却有自己的缺陷：

虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。
它不能实现以上第二个问题，盒子左右对齐。

总结：

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
网页布局第二准侧：先设置盒子的大小，之后设置盒子的位置。

13.3 什么是浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

作用：

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
可以实现盒子的左右对齐等等。
浮动最早是用来控制图片，实现文字环绕图片的效果。

语法：

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

13.4 浮动的特性

脱离标准流的控制（浮），移动到指定位置（动），俗称脱标。
- 浮动的盒子不再保留原先的位置。
- 浮动会让盒子漂浮在标准流的上面，所以后面标准流的盒子会跑到浮动盒子原先的位置。
浮动的元素会一行内显示并且元素顶部对齐。
- 这些元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
浮动的元素会具有行内块元素的特性。
- 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽。但是添加浮动后，它的大小根据内容来决定。
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的。
- 行内元素同理。

13.5 浮动小结

使用浮动的核心目的——让多个块级盒子在同一行显示，因为这是我们最常见的一种布局方式。

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特	特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙

13.6 浮动和标准流的父盒子搭配

浮动是脱标的，会影响下面的标准流元素。此时，我们需要给浮动的元素添加一个标准流的父亲。这样，最大化的减小了对其他标准流的影响。
浮动搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

13.7 浮动布局注意点

浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠，也不会超过父盒子的内边距
浮动元素与兄弟盒子的关系

在一个父级盒子中，如果当前盒子的前一个兄弟盒子是：
- 浮动的，那么当前盒子会与前一个兄弟盒子的顶部对齐
- 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
一个元素浮动了，理论上其余的兄弟元素也要浮动

如果一个盒子里面有多个子盒子，如果其中一个子盒子浮动了，其他兄弟也应该浮动，防止引起问题。

13.8 清除浮动

13.8.1 为什么要清除浮动

因为父级盒子很多情况下不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为 0，就影响了下面的标准流盒子。

总结：
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
- 准确地说，并不是清除浮动，而是清除浮动后造成的影响

13.8.2 清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

父级有了高度，就不会影响下面的标准流了。

如果父盒子本身有高度，则不需要清除浮动。

13.8.3 清除浮动的策略

清除浮动的策略是：闭合浮动，即只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

语法：
```
选择器{clear: 属性值;}
```
属性值描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

但是我们实际工作中，几乎只用 clear: both;

13.8.4 额外标签法(隔墙法)

额外标签法也称为隔墙法，是 W3C 推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签。

例如 <div style=”clear: both”></div>，或者其他标签（如<br />等）。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
注意

要求这个新的空标签必须是块级元素。

13.8.5 父级添加overflow属性方法

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

使用方法：
```
overflow: hidden;
```
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示溢出的部分

13.8.6 使用 :after 伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了。

也是给父元素添加属性，不过习惯给父元素添加一个类名 .clearfix，然后用这个类名添加清除浮动的属性。

使用方法：

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix { /* IE6、7 专有 */
	*zoom: 1;
}

优点：没有增加标签，结构更简单。符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1 触发 hasLayout
代表网站：百度、淘宝网、网易等

13.8.7 使用双伪元素清除浮动

也是给父元素添加属性，不过习惯给父元素添加一个类名 .clearfix，然后用这个类名添加清除浮动的属性。

使用方法：

.clearfix:before,
.clearfix:after { 
	content: "";
	display: table; 
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

优点：代码更简洁
缺点：由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout
代表网站：小米、腾讯等
添加 .clearfix:before，是为了使这个类同时能够解决外边距塌陷的问题

13.8.8 清除浮动总结

什么时候用清除浮动？

父级没高度
子盒子浮动了
影响下面布局了，就应该清除浮动。

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

14. 定位 (position)

14.1 为什么使用定位

首先提出几个问题，以下情况使用标准流或者浮动能实现吗？

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
当我们滚动窗口的时候，盒子是固定屏幕某个位置的

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。

所以：

浮动可以让多个块级盒子在一行没有缝隙排列显示，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

三种布局机制的上下顺序：

标准流在最底层（海底）------- 浮动的盒子在中间层（海面）------- 定位的盒子在最上层（天空）

14.2 定位的组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移 。

定位模式用于指定一个元素在文档中的定位方式。

边偏移则决定了该元素的最终位置。

14.3 边偏移

边偏移就是定位的盒子移动到最终位置。

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离。

定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。

14.4 定位模式 (position)

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

语法
```
选择器 { position: 属性值; }
```
属性值语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位

属性值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

14.5 静态定位 (static)

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的 none，不要定位的时候用。

语法
```
选择器 { position: static; }
```
静态定位的特点
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在布局时很少用到

14.6 相对定位 (relative)

相对定位是元素相对于它原来在标准流中的位置来说的。

语法
```
选择器 { position: relative; }
```
相对定位的特点：
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。

14.7 绝对定位 (absolute)

绝对定位的元素相对带有定位的父级元素来移动位置。

语法
```
选择器 { position: absolute; }
```
绝对定位的特点：
- 脱标：不占有原先的位置
- 父元素（祖先）没有定位，则以浏览器为准定位（Document 文档）
- 父元素（祖先）如果有定位（相对、绝对、固定定位），将依据最近的已经定位的父元素（祖先）进行定位

14.8 定位口诀 —— 子绝父相

绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？

子绝父相：子级是绝对定位，父级要用相对定位。

① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

② 父盒子需要加定位限制子盒子在父盒子内显示。

③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。

子绝父相

方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
如果父级盒子也使用绝对定位，会完全脱标，那么后面的盒子会上移，这显然不是我们想要的。

结论：

父级要占有位置，子级要在父级中任意摆放，这就是子绝父相的由来。

14.9 固定定位 (fixed)

固定定位是元素固定于浏览器可视区的位置。

语法
```
选择器 { position: fixed; }
```
固定定位的特点：
- 脱标，不占有原先的位置。
- 以浏览器的可视窗口为参照点移动元素
  - 跟父元素没有任何关系
  - 不随滚动条滚动
主要使用场景

可以在浏览器页面滚动时使元素的位置不改变。
提示

IE 6 等低版本浏览器不支持固定定位。

14.10 固定定位小技巧：元素固定在版心右侧位置

让固定定位的盒子 left: 50%; 走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

14.11 粘性定位 (sticky)

粘性定位可以被认为是相对定位和固定定位的混合。

语法

选择器 { position: sticky; top: 10px;}

粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加 top 、left、right、bottom 其中一个才有效
- 跟页面滚动搭配使用，兼容性较差，IE 不支持。

14.12 定位的扩展

14.12.1 绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin: 0 auto; 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

绝对定位居中

left: 50%; ：让盒子的左侧移动到父级元素的水平中心位置。
margin-left: -100px; ：让盒子向左移动自身宽度的一半。

盒子居中定位示意图：

14.12.2 堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。

同样加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

z-index

z-index 的特性如下：

属性值：正整数、负整数或 0。默认值是 0，数值越大，盒子越靠上。
如果属性值相同，则按照布局时书写顺序，后来居上（与样式定义顺序无关）。
数字后面不能加单位。
z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

14.12.3 定位改变display属性

前面讲过， display 是显示模式，有以下方式可以改变显示模式：

可以用 inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似，默认转换为行内块。
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

14.12.4 定位解决外边距合并

解决外边距合并的方法：

父盒子添加 padding-top 属性，例如：padding-top: 1px;
父盒子添加 border-top 属性，例如： border-top: 1px solid #fff;
父盒子添加 overflow 属性
父盒子添加浮动属性
父盒子添加绝对定位或固定定位属性

14.12.5 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。

14.12.6 定位小结

定位模式	是否脱标	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对带有定位的父级位置移动	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	浏览器可视区	能	单独使用，不需要父级
粘性定位	不脱标	浏览器可视区	能	兼容性差