字符实体与语义标签

1. 实体

有些时候，在HTML中不能直接书写一些特殊符号，如：

• 多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）

• 比如字母两侧的大于小于号（可能会被认为是标签并解析）

如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）

实体的语法：&实体的名字;，如

实体名称	显示结果	描述
 		空格
>	>	大于号
&lt;	<	小于号
&amp;	&	与
&copy;	©	版权
&reg;	®	注册商标
&trade;	™	商标
&times;	×	乘号
&divide;	÷	除号
&iquest;	¿	倒问号

2. meta标签

meta主要用于设置网页中的一些元数据，元数据并不是给用户看的，可用于搜索引擎检索、设定视口等情况，其有以下几个常用属性：

​ 1.charset：指定网页的字符集 ​ 2.name：指定的数据的名称，以下值比较常用

​ --keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

​ --description：表示指定网站的描述信息，网站的描述会显示在搜索引擎的搜索的结果中

​ 3.content：指定的数据的内容，会作为搜索结果的超链接上的文字显示

​ 4.http-equiv：如果设置了http-equiv属性，<meta>元素就是一个pragma指令，提供的信息相当于一个类似名称的 HTTP头所能提供的信息。

3. 语义化标签

在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式，因为样式最后都能由CSS修改处理。

以下是基本的语义标签：

	标签	作用	描述
块元素Block Element	<h1>~<h6>	标题	一共有六级标题，从h1 ~ h6重要性递减，h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1，一般情况下标题标签只会使用到h1 ～ h3，h4 ～ h6很少用
	<hgroup>	标题组	hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
	<p>	段落	页面中的一个段落。由空行或第一行缩进将相邻的文本块分开
	<blockquote>	长引用	<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
	<div>	无语义	表示一个区块，目前来讲div还是我们主要的布局元素
行内元素Inline Element	<q>	短引用	浏览器经常在引用的内容周围添加引号，<q> 标签用于简短的行内引用。如果需要从周围内容分离出来较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签
	<br>	换行
	<em>	强调	em标签表示强调，用于表示语音语调的一个加重。<em>可嵌套，表示更高的强调程度
	<strong>		表示重要性。浏览器通常以粗体字呈现<strong>标签里的内容
	<span>	无语义	一般用于在网页中选中文字

HTML 5提供的常用语义元素有：

标题	作用	描述
<header>	页眉	表示网页的头部，介绍性的内容
<footer>	页脚	表示网页的底部，通常包含有关作者的信息、版权或文件链接
<nav>	导航链接	表示网页中的导航，可以是当前文档内的，也可以是到其他文档的。 常见例子是菜单、目录和索引
<main>	文档主内容	表示网页的主体部分(一个页面中只会有一个main)
<article>	文章	表示一个独立的文章。自成一体，独立分发，可重复使用
<aside>	页面内容以外的内容	和主体相关的其他内容（侧边栏或呼出框）
<section>	文档中的节	表示一个独立的区块，上边的标签都不能表示时使用section

这些新语义标签在视觉效果上基本上没有什么区别

4. 块元素与行内元素

块元素（block element）

在页面中独占一行的元素称为块元素，在网页中一般通过块元素来对页面进行布局

行内元素（inline element）

在页面中不会独占一行的元素称为行内元素，行内元素主要用来包裹文字

注1：一般情况下在块元素中什么元素都能放，而不会在行内元素中放块元素，如**<p>**元素中不能放任何的块元素

注2：浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如：

1. 标签写在了根元素的外部
2. p元素中嵌套了块元素
3. 根元素中出现了除head和body以外的子元素

5. 列表

HTML中有以下三种列表：

1.有序列表

• 使用ol标签来创建有序列表，使用li表示列表项

<ol>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
</ol>

2.无序列表

• 使用ul标签来创建无序列表，使用li表示列表项

<ul>
    <li>Milk</li>
    <li>Cheese
        <ul>
            <li>Blue cheese
                <ul>
                    <li>Sweet blue cheese</li>
                    <li>Sour blue cheese</li>
                </ul>
            </li>
            <li>Feta</li>
        </ul>
    </li>
</ul>

可以看出，列表元素之间是可以互相嵌套的

3.定义列表

• 使用dl标签来创建定义列表，使用dt表示定义的内容，使用dd来对内容进行解释说明

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

6. 超链接

1. 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

2. 使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，或一个内部页面的地址

3. 超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

6.1 相对路径

• 当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
• 相对路径都会使用.或..开头，./ 表示当前文件所在的目录，../ 表示当前文件所在目录的上一级目录
• ./可以省略不写，如果不写./也不写../则就相当于写了./

6.2 新建页面（target属性）

target属性，用来指定超链接打开的位置

可选值：

1. _self：在当前页面中打开超链接，默认值
2. _blank：在新建页面中打开超链接

6.3 锚点跳转

1. 可以使用**javascript:;**来作为href的属性值，此时点击这个超链接什么也不会发生

2. 可以将**#**作为超链接的路径的占位符使用，直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置

3. 可以跳转到页面的指定位置（锚点），只需将href属性赋值为**#目标元素的id属性值**（唯一不重复）

7. 图片标签

1. 图片标签用于向当前页面中引入一个外部图片

2. img标签是一个自结束标签，这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

属性

1. src：属性指定的是外部图片的路径（路径规则和超链接是一样的）
2. alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中 的内容来识别图片
3. width：图片的宽度（单位是像素）
4. height ：图片的高度（单位是像素）

注1：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大

注2：但是在移动端，经常需要对图片进行缩放（大图缩小）

注3：宽度和高度中如果只修改了一个，则另一个会等比例缩放

7.1 图片格式

1.jpeg（jpg）

1. 支持的颜色比较丰富
2. 不支持透明效果
3. 不支持动图
4. 一般用来显示照片

2.gif

1. 支持的颜色比较单一
2. 支持简单透明
3. 支持动图

3.png

1. 支持的颜色丰富
2. 支持复杂透明
3. 不支持动图
4. 专为网页而生

4.webp

1. 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
2. 具备其他图片格式的所有优点，而且文件还特别的小
3. 缺点：兼容性不好

5.base64

• 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片\
• 一般都是一些需要和网页一起加载的图片才会使用base64

图片格式使用原则

1. 图片效果一样的，选文件小的那个格式
2. 图片效果不一样的，选图片效果好的那个格式
3. 尽可能的兼顾和平衡图片效果和文件大小

8. 内联框架（iframe）

内联框架iframe，用于向当前页面中引入一个其他页面，src指定要引入的网页的路径，frameborder指定内联框架的边框

举例：

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

9. 音视频

9.1 音频标签

1. audio标签用来向页面中引入一个外部的音频文件
2. 音视频文件引入时，默认情况下不允许用户自己控制播放停止

audio标签属性

1. controls是否允许用户控制播放

2. autoplay音频文件是否自动播放

3. loop控制音乐是否循环播放

注1：如果设置了autoplay，则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器在实际实现后都不会自动对音乐进行播放

举例：

<audio src="./source/audio.mp3" controls autoplay loop></audio>

<source>标签

audio标签除了通过src属性来指定外部文件的路径以外，还可以通过<source>元素来指定文件的路径

<audio controls autoplay loop>
    对不起，您的浏览器不支持播放音频！请升级浏览器！
	<source src="./source/audio.mp3">
	<source src="./source/audio.ogg">
</audio>

IE11下，能够正常播放

IE8下，出现我们自定义的提示信息

<embed>标签

IE8下不支持audio元素，但是可以使用 <embed> 元素在文档中的指定位置嵌入外部内容，这个内容是由外部应用程序或其他互动内容的来源提供的，如浏览器插件。

<embed src="./source/audio.mp3">

9.2 视频标签

使用video标签来向网页中引入一个视频，使用方式和audio基本上是一样的

<video controls>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    <embed src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
</video>

就算是IE8下，也能正常播放

其他

通过iframe和embed的方式引入视频。以爱奇艺为例，提供了视频链接的HTML代码和通用代码

<iframe
        src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=0c53ddd55f262c6d416afa9d1f49dc55&tvId=1008748400&accessToken=2.ef9c39d6c7f1d5b44768e38e5243157d&appKey=8c634248790d4343bcae1f66129c1010&appId=1368&height=100%&width=100%"
        frameborder="0" allowfullscreen="true" width="100%" height="100%">
</iframe>

但注意，embed需要flash的支持

<embed
       src="//player.video.iqiyi.com/0c53ddd55f262c6d416afa9d1f49dc55/0/0/v_19rrcuh1jw.swf-albumId=1008748400-tvId=1008748400-isPurchase=0-cnId=undefined"
       allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always"
       type="application/x-shockwave-flash"></embed>

CSS语法与选择器

10. CSS简介

层叠样式表

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层，总之一句话，CSS用来设置网页中元素的样式

使用CSS来修改元素样式的方式大致可以分为以下3种：

1.内联样式（行内样式）

在标签内部通过style属性来设置元素的样式

<p style="color:red;font-size:60px;">内联样式（行内样式）</p>

问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）

2.内部样式表

将样式编写到<head>中的<style>标签里然后通过css的选择器来选中元素并为其设置各种样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用

<style>
    p{
        color:green; 
        font-size:50px;
    }
</style>

问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

3.外部样式表

可以将css样式编写到一个外部的CSS文件中，然后通过<link>标签来引入外部的CSS文件

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

好处：

1. 外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用
2. 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

11. CSS基本语法

11.1注释

css中的注释 只能使用/*和*/包裹。即不管是单行注释，还是多行注释，都是以/*开头，以*/结尾

/* css中的单行注释 */

/* 
    css中的多行注释
    css中的多行注释
    css中的多行注释
*/

我们对比下其他几种前端语言的注释

html中的注释 只能使用<!--和-->包裹。即不管是单行注释，还是多行注释，都是以<!--开头，以-->结尾

<!-- html中的单行注释 -->

<!-- 
    html中的多行注释
    html中的多行注释
    html中的多行注释
-->

JS(JavaScript)和JQuery中的注释 单行注释使用//。多行注释使用/*和*/包裹，以<!--开头，以-->结尾

/* JS(JavaScript)和JQuery中的单行注释*/

/*
    JS(JavaScript)和JQuery中的多行注释
    JS(JavaScript)和JQuery中的多行注释
    JS(JavaScript)和JQuery中的多行注释
*/

11.2 基本语法

语法：选择器 声明块

选择器

通过选择器可以选中页面中的指定元素

• 比如p的作用就是选中页面中所有的p元素声明块

声明块

通过声明块来指定要为元素设置的样式

1. 声明块由一个一个的声明组成，声明是一个名值对结构
2. 一个样式名对应一个样式值，名和值之间以:连接，以;结尾

举例：

h1{
    color: green;
}

12. CSS常用选择器

12.1 通配选择器（Universal selector）

作用：选中页面中的所有元素 语法：*

例子：*{}

*{ color: red;}

12.2 元素选择器（Type selector）

也叫类型选择器、标签选择器

作用：根据标签名来选中指定的元素 语法：elementname{}

例子：p{} h1{} div{}

p{ color: red;}
h1{ color: green;}

12.3 类选择器（Class selector）

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

例子：.blue{}

.blue{ color: blue;}
.size{ font-size: 20px;}

class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组，可以同时为一个元素指定多个class属性

<p class="blue size"> 类选择器（Class selector）</p>

12.4 ID选择器（ID selector）

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

例子：#box{} #red{}

#red{ color: red;}

12.5 属性选择器（Attribute selector）

作用：根据元素的属性值选中一组元素

语法1：[属性名] 选择含有指定属性的元素 语法2：[属性名=属性值] 选择含有指定属性和属性值的元素 语法3：[属性名^=属性值] 选择属性值以指定值开头的元素 语法4：[属性名$=属性值] 选择属性值以指定值结尾的元素 语法5：[属性名*=属性值] 选择属性值中含有某值的元素

例子：p[title]{} p[title=e]{} p[title^=e]{} p[title$=e]{} p[title*=e]{}

p[title]{ color: orange;}

p[title=e]{ color: orange;}

p[title^=e]{ color: orange;}

p[title$=e]{ color: orange;}

p[title*=e]{ color: orange;}

13. 复合选择器

13.1 交集选择器

• 作用：选中同时复合多个条件的元素
• 语法：选择器1选择器2选择器3选择器n{}
• 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red{ font-size: 30px;}

.a.b.c{ color: blue;}

13.2 并集选择器

• 作用：同时选择多个选择器对应的元素
• 语法：选择器1,选择器2,选择器3,选择器n{}
• 例子：#b1,.p1,h1,span,div.red{}

h1,span{ color: green;}

14. 关系选择器

1. 父元素：直接包含子元素的元素叫做父元素
2. 子元素：直接被父元素包含的元素是子元素
3. 祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
4. 后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
5. 兄弟元素：拥有相同父元素的元素是兄弟元素

14.1 子元素选择器（Child combinator）

• 作用：选中指定父元素的指定子元素
• 语法：父元素 > 子元素
• 例子：A > B

div.box > p > span{
    color: orange;
}

14.2 后代元素选择器（Descendant combinator）

• 作用：选中指定元素内的指定后代元素
• 语法：祖先 后代
• 例子：A B

div span{
    color: skyblue;
}

14.3 兄弟元素选择器（Sibling combinator）

• 作用：选择下一个或下一组兄弟

• 语法：前一个 + 下一个 前一个 ~ 下一组

• 例子1：A1 + A2（Adjacent sibling combinator）

• 例子2： A1 ~ An（General sibling combinator）

p + span{ color: red;}

p ~ span{ color: red;}

15. 伪类选择器

伪类（不存在的类，特殊的类），一般情况下都是使用:开头

伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…

• :first-child 第一个子元素

• :last-child 最后一个子元素

• :nth-child() 选中第n个子元素

  ​ -n：第n个，n的范围0到正无穷 ​ -2n或even：选中偶数位的元素 ​ -2n+1或odd：选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序的

• :first-of-type 同类型中的第一个子元素
• :last-of-type 同类型中的最后一个子元素
• :nth-of-type() 选中同类型中的第n个子元素

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的

:not()否定伪类，将符合条件的元素从选择器中去除

/* ul下所有li，黑色 */
ul>li { color: black;}

/* ul下第偶数个li，黄色 */
ul>li:nth-child(2n) { color: yellow;}

/* ul下第奇数个li，绿色 */
ul>li:nth-child(odd) { color: green;}

/* ul下第一个li，红色 */
ul>li:first-child { color: red;}

/* ul下最后一个li，黄色 */
ul>li:last-child { color: orange;}

16. 伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置），伪元素使用::开头

• ::first-letter 表示第一个字母
• ::first-line 表示第一行
• ::selection 表示选中的内容
• ::before 元素的开始
• ::after 元素的最后
• ::before和::after 必须结合content属性来使用

/* 段落首字母设置大小为30px */
p::first-letter{
    font-size: 30px;
}

/* 段落第一行设置为黄色背景 */
p::first-line{
    background-color: yellow;
}

/* 段落选中的部分变绿色 */
p::selection{
    background-color: green；
}

/* div前加上内容 */
div::before{
    content: 'BEFORE';
    color: red;
}

/* div后加上内容 */
div::after{
    content: 'AFTER';
    color: blue;
}

样式继承与其他概念

17. 继承

1. 样式的继承，我们为一个元素设置的样式，同时也会应用到它的后代元素上

2. 继承是发生在祖先及后代之间的，继承的设计是为了方便我们的开发

3. 利用继承，我们可以将一些通用的样式，统一设置到共同的祖先元素上。这样只需设置一次即可让所有的元素都具有该样式

注意，并不是所有的样式都会被继承：

• 比如背景相关的，布局相关等的这些样式都不会被继承。

我们可以在Zeal手册中，搜索background-color属性，可以看到一个定义的表格。其中就说明了其不可被继承性

18. 选择器的权重

• 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
• 发生样式冲突时，具体应用哪个样式由选择器的权重（优先级）决定

选择器	权重
内联样式	1,0,0,0
ID选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承的样式	没有优先级

1. 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

2. 选择器的累加不会超过其最大的数量级，如类选择器再高也不会超过ID选择器

3. 如果优先级计算后相同，此时则优先使用代码顺序靠下的样式

4. 可以在某一个样式的后边添加**!important**，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中一定要慎用！

举例说明：

<style>
    #box1{
        background-color: orange;
    }
    div{
        background-color: yellow;
    }
    .red{
        background-color: red;
    }
</style>

<div id="box1" class="red" style="background-color: skyblue;">选择器的权重</div>

19. 长度单位

19.1 像素

我们先来看下某度上关于像素（pixel,缩写px）的介绍

1. 像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。

2. 可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在 。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小。

也就是说，显示器屏幕实际上是由一个一个的小点（单位色块，即像素）构成的

问题1：像素和分辨率有什么关系呢？

分辨率 = 水平方向像素 * 垂直方向像素

屏幕分辨率

例如，屏幕分辨率是1920×1080，则该屏幕水平方向有1920个像素，垂直方向有1080个像素

• 不同屏幕的像素大小是不同的，也就是说像素大小不像我们现行的长度单位（如米/m）那样有着固定的国际标准

• 所以同样的像素大小在不同的设备上显示效果是不一样的，像素越小的屏幕显示的效果越清晰

图像分辨率

例如，一张图片分辨率是300x200，则该图片在屏幕上按1:1缩放时，水平方向有300个像素，垂直方向有200个像素点

• 图片分辨率越高，1:1缩放时面积越大

• 图片分辨率越低，1:1缩放时面积越小

同一台设备像素大小是不变的，那把图片放大超过100%时占的像素点就多了，但是图像也会变得模糊

问题2：屏幕实现图片放大或缩小的原理是什么呢？

1. 其实是设备通过算法对图像进行了像素补足；
2. 同理，把图片按小于100%缩放时，也是通过算法将图片像素减少

19.2 百分比

也可以将属性值设置为相对于其父元素属性的百分比，可以使子元素跟随父元素（实际不是父元素而是包含块，后面会详细说）的改变而改变

19.3 em&rem

1. em是相对于元素的字体大小来计算的，1em = <self>.font-size*1，也就说em值会根据元素本身的字体大小的改变而改变
2. rem是相对于根元素的字体大小来计算，1rem = <root>.font-size * 1，也就说rem值会根据根元素的字体大小的改变而改变

<style>
    * {
        font-size: 24px;
    }
    
    .box1{
        width: 200px; 
        height: 200px;
        background-color: orange;
    }

    .box2{
        width: 50%; 
        height: 50%; 
        background-color: aqua;
    }
    
    .box3{
        font-size: 20px;
        width: 10em;
        height: 10em;
        background-color: greenyellow;
    }
    
    .box4 {
        font-size: 20px;
        width: 10rem; 
        /*当时用rem时，不管怎么改本元素的font-size都是不会变的。需要定义root元素的font-size才可以 */
        height: 10rem;
        background-color: red;
    }
</style>

<div class="box1">
    <div class="box2"></div>
</div>

<div class="box3"></div>

<div class="box4"></div>

20. 颜色单位

人眼能够识别多少种颜色？

正常人有三种视椎细胞，是三色视觉者（红绿蓝），理论上总共能看到大约100万种颜色，实际至多只能够对1000多种颜色做出识别，因人而异。

css中的颜色名称

css中可以直接使用颜色名来设置颜色，比如：red、orange、yellow、blue、green等等，其中有140 种颜色名称是所有浏览器都支持的，但在css中只使用颜色名会非常不方便。

三原色

1. 颜料三原色（CMYK）：品红、黄、青(天蓝)。色彩三原色可以混合出所有颜料的颜色，同时相加为黑色，黑白灰属于无色系。
2. 光学三原色（RGB）：红、绿、蓝(靛蓝)。光学三原色混合后，组成显示屏显示颜色，三原色同时相加为白色，白色属于无色系（黑白灰）中的一种。

CSS的颜色按照光的三原色来调和生成，因为电子设备的屏幕是由像素组成的，每个像素就是一个单位色块。而这个单位色块之所以能显示颜色，就是靠屏幕发光来实现的

20.1 RGB

RGB值

RGB通过三原色的不同浓度来调配出不同的颜色

1. 语法：RGB(red, green, blue)
2. 范围：每一种颜色的范围在0 ~ 255（0% ~ 100%）之间

RGBA

就是在RGB的基础上增加了第四个参数alpha表示透明度

1. 1表示完全不透明
2. 0表示完全透明
3. .5半透明

十六进制的RGB值

就是RGB值的十六进制写法

1. 语法：#RRGGBB
2. 范围：每一种颜色的范围在00 ~ ff 之间
3. 如果颜色两位两位重复可以进行简写，如#aabbcc => #abc

注1：可以使用取色器（颜色吸管）获知某颜色的RGB值

注2：在VSCode中，我们可以看到其会对颜色进行预览展示。并且将鼠标移至color处悬浮，会智能的弹出一个rgb调色板，方便我们进行调色

20.2 HSL

HSL是一个颜色渐变的圆环，我们也可以通过HSL调和出任意的颜色，其有以下三个参数：

1. H 色相(0 - 360)
2. S 饱和度，颜色的浓度 0% - 100%
3. L 亮度，颜色的亮度 0% - 100%

HSLA

类似于RGBA，就是在HSL的基础上增加了第四个参数alpha表示透明度

1. 1表示完全不透明
2. 0表示完全透明
3. .5半透明

盒模型与布局

21. 文档流（normalflow）

网页是一个多层的结构，一层叠着一层，通过CSS可以分别为每一层来设置样式

1. 网页堆叠后的部分用户只能看到最顶上一层的样子
2. 最底下的一层称为文档流，文档流是网页的基础
3. 我们所创建的元素默认都是在文档流中进行排列

对于开发者来说元素主要有两个状态：

• [ ] 在文档流中
• [ ] 不在文档流中（脱离文档流）

21.1 块元素在文档流中的特点

1. 块元素会在页面中独占一行
2. 默认宽度是父元素的全部（会把父元素撑满）
3. 默认高度是被内容撑开（子元素）

21.2 行内元素在文档流中的特点

1. 行内元素不会独占页面的一行，只占自身的大小
2. 行内元素在页面中从左向右水平排列（书写习惯一致）
3. 如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列
4. 行内元素的默认宽度和高度都是被内容撑开

22. 盒子模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

盒模型、盒子模型、框模型（box model）

CSS将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

每一个盒子都由一下几个部分组成：

1. 内容区（content）
2. 内边距（padding）
3. 边框（border）
4. 外边距（margin）

22.1 内容区（content）

• 内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型
• 元素中的所有的子元素和文本内容都在内容区中
• 内容区的大小由width 和 height两个属性来设置

22.2 边框（border）

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

注意：边框的大小也会影响到整个盒子的大小

• border-width 边框的宽度：默认3px

• • border-top-width 上边框的宽度
• • border-right-width 右边框的宽度
• • border-bottom-width 下边框的宽度
• • border-left-width 左边框的宽度

• border-color 边框的颜色：默认使用color的颜色值

• border-top-color 上边框的颜色

• border-right-color 右边框的颜色

• border-bottom-color 下边框的颜色

• border-left-color 左边框的颜色

• border-style 边框的样式：没有默认值，必须指定

• • border-top-style 上边框的样式
• • border-right-style 右边框的样式
• • border-bottom-style 下边框的样式
• • border-left-style 左边框的样式

示例

.box1{
    border-width: 10px;
    border-color: red;
    /* 
    	solid  实线 
    	dotted 点状虚线 
    	dashed 虚线 
    	double 双线 
    */
    border-style: solid;
}

效果（solid）

效果（dotted）

不论是border-width 、 border-color 、border-style 还是其衍生出来的属性写法，都可以指定每个方向的边框情况，设定几个值就决定了对应方向的宽度、颜色或样式

• 四个值：上 右 下 左
• 三个值：上 左右 下
• 两个值：上下 左右
• 一个值：上下左右

诀窍：顺序是按顺时针方向设置的，剩下的可以由矩形的对称性推导出来

border：简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

• border-top 上边框的宽度、颜色和样式

• border-right 右边框的宽度、颜色和样式

• border-bottom 下边框的宽度、颜色和样式

• border-left 左边框的宽度、颜色和样式

.box1{ border: 10px red solid;}

22.3 内边距(padding）

内边距，也叫填充，是内容区和边框之间的空间

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

padding内边距的简写属性，可以同时指定四个方向的内边距，规则和边框中属性值设置一样

注意：盒子可见框的大小，由内容区、内边距和边框共同决定，故在计算盒子大小时，需将这三个区域加到一起计算

22.4 外边距（margin）

外边距，也叫空白边，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段

注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用空间

属性	描述
margin-top 上外边距	设置正值，元素自身向下移动 设置负值，元素自身向上移动
margin-right 右外边距	设置正值，其右边的元素向右移动 设置负值，其右边的元素向左移动 上述说法并不完全准确，对于块元素，设置margin-right不会产生任何效果
margin-bottom 下外边距	设置正值，其下边的元素向下移动 设置负值，其下边的元素向上移动 上述说法并不准确，对于块元素，会有垂直方向上的边距重叠问题（后面会细说）
margin-left 左外边距	设置正值，元素自身向右移动 设置负值，元素自身向左移动

元素在页面中是按照自左向右的顺序排列的，所以默认情况下

• 如果我们设置的左和上外边距则会移动元素自身
• 而设置下和右外边距会移动其他元素

垂直方向边距重叠问题示例

.box1 {width: 200px;height: 200px;background-color: #bfa;border: 10px orange solid;
    margin-bottom: 100px;}

.box2 {width: 200px;height: 200px;background-color: #bfa;border: 10px red solid;
    margin-top: 100px;}

23. 水平方向布局

元素在其父元素中水平方向的位置由以下几个属性共同决定

• margin-left

• border-left

• padding-left

• width

• padding-right

• border-right

• margin-right

一个元素在其父元素中，水平布局必须要满足以下的等式

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度

以上等式必须满足，如果相加结果使等式不成立，则称为**过度约束**

此时浏览器会自动对上述七个属性的值自动做出调整，以使等式成立，其中可分为以下几种情况：

• 如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式满足 100 + 0 + 0 + 200 + 0 + 0 + 0 = 800 ==> 100 + 0 + 0 + 200 + 0 + 0 + 500 = 800

• 如果这七个值中有auto的情况，则会自动调整auto值以使等式成立 这七个值中有三个值可以设置为auto ：width、margin-left、maring-right

1. 1. 如果只有单独的某个值为auto，则会自动调整auto的那个值以使等式成立 200 + 0 + 0 + auto + 0 + 0 + 200 = 600 ==> 200 + 0 + 0 + 400 + 0 + 0 + 200 = 800 auto + 0 + 0 + 200 + 0 + 0 + 200 = 600 ==> 400 + 0 + 0 + 200 + 0 + 0 + 200 = 800 200 + 0 + 0 + 200 + 0 + 0 + auto = 600 ==> 200 + 0 + 0 + 200 + 0 + 0 + 400 = 800
   2. 如果宽度和外边距中的一边为auto，则宽度会调整到最大，其他auto的外边距会自动设置为0 auto + 0 + 0 + auto + 0 + 0 + 200 = 600 ==> 0 + 0 + 0 + 600 + 0 + 0 + 200 = 800 200 + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 200 + 0 + 0 + 600 + 0 + 0 + 0 = 800 auto + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 0 + 0 + 0 + 800 + 0 + 0 + 0 = 800
   3. 如果外边距都为auto，则auto的外边距会自动均分以使等式成立 auto + 0 + 0 + 200 + 0 + 0 + auto = 600 ==> 300 + 0 + 0 + 200 + 0 + 0 + 300 = 800

示例：

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: 10px orange solid;
        /* 下列条件等价于 margin: 0 auto */
        margin-left: auto;
        margin-right: auto;
    }
</style>
<div class="box1"></div>

效果

24. 垂直方向布局

24.1 元素溢出(overflow属性)

默认情况下父元素的高度被内容撑开，子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出

使用overflow/overflow-x/overflow-y属性来设置父元素如何处理溢出的子元素

可选值：visible/hidden/scroll/auto

（1）visible 默认值，溢出内容会在父元素外部位置显示

示例

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: 10px orange solid;
        overflow: visible; /* 默认值 */
    }
</style>
<div class="box1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur illo inventore
    deleniti laudantium quaerat excepturi sed quidem tempore? Eaque, cumque porro. Fuga quam error cupiditate quasi
    eveniet in numquam!
</div>

（2）hidden 溢出内容会被裁剪，不会显示

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        overflow: hidden; /* 隐藏溢出内容 */
    }
</style>
<div class="box1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur illo inventore
    deleniti laudantium quaerat excepturi sed quidem tempore? Eaque, cumque porro. Fuga quam error cupiditate quasi
    eveniet in numquam!
</div>

（3）scroll 生成左右和垂直两个方向的滚动条，通过滚动条来查看完整的内容

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        overflow: scroll;
    }
</style>
<div class="box1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur illo inventore
    deleniti laudantium quaerat excepturi sed quidem tempore? Eaque, cumque porro. Fuga quam error cupiditate quasi
    eveniet in numquam!
</div>

（4）auto 根据需要生成滚动条

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        overflow: auto;
    }
</style>
<div class="box1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur illo inventore
    deleniti laudantium quaerat excepturi sed quidem tempore? Eaque, cumque porro. Fuga quam error cupiditate quasi
    eveniet in numquam!
</div>

24.2 边距折叠

概念

垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象

（1）兄弟元素间的边距折叠

兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值）

特殊情况：

• 如果相邻的外边距一正一负，则取两者的和

• 如果相邻的外边距都是负值，则取两者中绝对值较大的

兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

示例

.box1,.box2{ 
    width:200px; 
    height:200px; 
    font-size:100px;
}

.boxl{
    background-color: #bfa;
    /*设置一个下外边距*/
    margin-bottom: 100px;
}

.box2{
    background-color: orange;
    /*设置一个上外边距*/
    margin-top: 100px;
}

（2）父子元素间的边距折叠

父子元素间相邻外边距，子元素会传递给父元素（上外边距）

示例：

.box3{
width：200px;
    height:200px;
    background-color: #bfa;
}

.box4{
    width: 100px; 
    height: 100px;
    background-color: orange; 
    /* margin-top: 100px; */
}

父子外边距的折叠会影响到页面的布局，必须要进行处理

处理思路

方式1：

1.我们转换思路，将对子元素的调整转为对父元素的调整

.box3 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    padding-top: 100px; /* 不调整子元素的margin，而是转而调整父元素的padding */
}

.box4 {
    width: 100px;
    height: 100px;
    background-color: orange;
    /* margin-top: 100px; */
}

可以看到父元素位置虽然正确了，但是高度却被“撑大了”。我们之前说过，padding属性会影响元素的大小

2.这里我们还需要计算并手动调整下父元素的高度

.box3 {
    width: 200px;
    height: 100px; /* height: 200px; */
    background-color: #bfa;
    padding-top: 100px; 
}

.box4 {
    width: 100px;
    height: 100px;
    background-color: orange;
}

方式2

1.我们仍然保留子元素的margin-top属性，但是给父元素加一个上边框

.box3 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    border-top: 1px rebeccapurple solid; /* 在父元素上加一个border-top（上边框） */
}

.box4 {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 100px; /* 不删除，保留 */
}

2.但是因为加了1px的边框，所以父元素盒子的高度也增加了1px。那我们就需要手动调整父元素的高度，同时让边框颜色与父元素盒子颜色保持一致

.box3 {
    width: 200px;
    height: 199px; /* height: 200px; */
    background-color: #bfa;
    border-top: 1px #bfa solid; 
}

.box4 {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 100px;
}

但是我们不难发现一个问题，子元素也往下移动了1px的距离，因为父元素高度少了1px，而子元素的margin-top是从边框下面开始算的，故还有最后一步，将子元素的margin-top减去一个像素即可

.box3 {
    width: 200px;
    height: 199px;
    background-color: #bfa;
    border-top: 1px #bfa solid; 
}

.box4 {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 99px; /* margin-top: 100px; */
}

上述处理方式2中，使用了border属性，就让子元素的外边距不传递给父元素了，这是为什么呢？

答：这是因为父元素的边框将子元素的magin-top和父元素的margin-top隔开，不相邻自然就不会合并折叠了。

25. 行内元素的盒模型

1.行内元素不支持设置宽度和高度，即使设置了也不会生效

2.行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

.s1 {
    /* 下方的div元素并没有因span设置了padding属性，而受到位置上的影响 */
    padding: 100px;
    background-color: yellow;
}

.box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
}

3.行内元素可以设置border，垂直方向的border不会影响页面的布局

.s1 {
    border: 10px orange solid;
    background-color: yellow;
}

.box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
}

4.行内元素可以设置margin，垂直方向的margin不会影响页面的布局

.s1 {
    margin: 100px;
    background-color: yellow;
}

.box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
}

如果一定要使行内元素对页面布局产生影响，则需要用到下文提到的display属性

26 设置元素显示类型

26.1 display属性

display用来设置元素显示的类型，该属性有以下几个可选值：

• inline将元素设置为行内元素
• block将元素设置为块元素
• inline-block 将元素设置为行内块元素，既可以设置宽度和高度又不会独占一行
• table将元素设置为一个表格
• none元素从布局中消失，不占据位置。注意：不只是不在页面中显示，但实际仍存在布局中的情况

若只是想要单纯的显示消失效果，要用visibility属性

26.2 visibility属性

visibility用来设置元素的显示状态

• visible默认值，元素在页面中正常显示

• hidden元素在页面中隐藏不显示，但是依然占据页面的位置

27. 浏览器默认样式

通常情况，浏览器都会为元素设置一些默认样式，默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）

在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。

在设计师们的梦想中都存在着这样的一个完美世界：所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。

但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。

当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示

而且有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。

更糟的是，有的浏览器完全无视CSS的一些声明和属性。

正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset

什么是CSS Reset？

我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。

CSS重设就是先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

下方两种css样式，我们引入其中一个即可

1.reset样式

官方地址：reset.css (opens new window)

<link rel="stylesheet" href="assets/reset.css">

效果

reset.css的作用就是将各个内外边距置为0，将一些样式置为none，以下是reset.css的源代码

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

2.normalize样式

官方地址：normalize.css (opens new window)

<link rel="stylesheet" href="assets/reset.css">

效果

这里并没有去除所有样式，因为normalize.css的作用不同于reset.css。reset.css是将所有默认样式去除，而normalize.css是将所有默认样式统一，这样在不同的浏览器里显示效果也是统一的

盒模型补充

28. 盒子大小（box-sizing属性）

1. 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
2. box-sizing用来设置盒子尺寸的计算方式（设置width和height属性的作用）

示例代码：

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 10px red solid;
    /* box-sizing: content-box; */
    /* box-sizing: border-box; */
}

box-sizing属性可选值：

1.content-box默认值，宽度和高度用来设置内容区的大小

2.border-box 宽度和高度用来设置整个盒子可见框的大小，此时width和height指的是内容区、内边距和边框 的总大小

29. 轮廓（outline属性）

outline用来设置元素的轮廓线，用法和border一模一样，其与边框border的不同点是，轮廓不会影响到可见框的大小

以下是示例对比：

边框

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 10px red solid;
}

轮廓

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    outline: 10px red solid;
}

可以很明显看到outline与border的区别

我们一般不会直接这么设置轮廓，而是下面这种场景

.box:hover {outline: 10px red solid;}

从上面的动态图也可以很清晰地看出，outline属性并没有改变盒子的布局

30. 阴影（box-shadow属性）

1. box-shadow属性用于在一个元素的框架周围添加阴影效果，你可以设置多个由逗号分隔的效果
2. 一个盒状阴影由相对于元素的X和Y的偏移量、模糊和扩散半径以及颜色来描述
3. box-shadow用来设置元素的阴影效果，阴影不会影响页面布局

box-shadow属性的参数如下：

1.第一个值是水平偏移量：设置阴影的水平位置

• ①正值向右移动

• ②负值向左移动

2.第二个值是垂直偏移量：设置阴影的垂直位置

• ①正值向下移动

• ②负值向上移动

3.第三个值是阴影的模糊半径

4.第四个值是阴影的颜色

示例

box-shadow: 10px 10px 5px rgba(0, 0, 0, .2);

31. 圆角（border-radius属性）

border-radius属性使一个元素的外边框边缘的角变圆，你可以设置一个半径来做圆角，或者设置两个半径来做椭圆角

1.border-radius 用来设置圆角，圆角设置的是圆的半径大小

• border-top-left-radius

• border-top-right-radius

• border-bottom-left-radius

• border-bottom-right-radius

2.border-radius 可以分别指定四个角的圆角

• 四个值：左上 右上 右下 左下

• 三个值：左上 右上/左下 右下

• 两个值：左上/右下 右上/左下

• 一个值：左上/右上/右下/左下

这里同样不需要死记硬背，只要记住遵循顺时针方向和矩形中心点对称原则，与border不同的是，border是从上开始顺时针设置，而圆角是从左上开始

设置圆形

原理很简单，就是绘制正方形，并将四个圆角半径设置为正方形的一半

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border-radius: 50%;
}

设置椭圆形

只需要在原型的基础上做一点点的改动，设置width和height属性不相等即可

.box {
    width: 300px;
    height: 200px;
    background-color: yellow;
    border-radius: 50%;
}

浮动

32. 浮动的简介

通过浮动可以使一个元素向其父元素的左侧或右侧移动

使用float属性来设置于元素的浮动，可选值如下：

• none 默认值，元素不浮动
• left 元素向左浮动
• right 元素向右浮动

注意

• 元素设置浮动以后，水平布局的等式便不需要强制成立
• 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动

33. 浮动的特点

1.浮动元素会完全脱离文档流，不再占据文档流中的位置

2.设置浮动以后，元素会向父元素的左侧或右侧移动

3.浮动元素默认不会从父元素中移出

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background-color: orange;
        float: left;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

4.浮动元素向左或向右移动时，不会超过在html结构中顺序比它靠前的浮动元素（先来后到的顺序）

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        float: left;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

5.浮动元素不会超过上边的浮动的兄弟元素，最多就是和它一样高

<style>
    .box1 {
        width: 300px;
        height: 300px;
        background-color: orange;
        float: left;
    }

    .box2 {
        width: 400px;
        height: 400px;
        background-color: red;
        float: left;
    }

    .box3 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        float: right;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

6.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: orange;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

**7.**浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果（这 其实是float属性最开始的用途）

简单总结

• 浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局
• 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

34. 浮动元素脱离文档流后的特点

1.块元素

• 块元素不再独占页面的一行
• 脱离文档流以后，块元素的宽度和高度默认都被内容撑开

<style>
    .box1 {
        background-color: orange;
        /* float: left; */
    }
</style>

<div class="box1">hello</div>

2.行内元素

1. 行内元素脱离文档流以后会变成块元素，特点和块元素一样
2. 脱离文档流后的元素，不需要再区分块和行内了

示例

<style>
    span {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }
</style>

<span>I am a Span</span>

行内元素脱离文档流之后的特点很像行内块元素，不过仍存在一些差异

<style>
    span {
        width: 200px;
        height: 200px;
        background-color: orange;
        /* display: inline-block; */
        float: left;
    }
</style>

<span>I am a Span</span>
<span>I am a Span</span>

高度塌陷与BFC

35. 高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的，当某个子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失，然后其下的元素会自动上移，导致页面的布局混乱

所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理，而这就要先提到BFC的概念

示意图

36. BFC

1. BFC（Block Formatting Context）块级格式化环境
2. BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
3. BFC只能通过各种间接的方式开启，没有一个直接的BFC属性可以用来设置
4. 开启BFC后相应的元素会变成一个独立的布局区域

(1)元素开启BFC后的特点

• 该元素不会被浮动元素覆盖
• 父子元素外边距不会重叠
• 该元素可以包含浮动的元素

(2)开启BFC的方法

1.将元素设置为浮动（不推荐），很明显下方元素被覆盖了，不可能让所有元素都浮动

2.设置为行内块元素（不推荐）：不再独占一行，宽度变了，同时与下方元素产生了一点空隙

3.设置overflow为非visible值：既没有覆盖元素，也保持了独占一方的特性（保持了宽度），与下方元素也保持了最初的间隙，常用的方式为元素设置overflow:hidden（overflow:auto也可行） 开启其BFC， 以使其可以包含浮动元素，overflow:scroll 会有滚动条，可能并不需要的，所以不太推荐

不过，这种方式也存在一定问题，如下，overflow并没有完全清除div2布局上受到的影响

总结

• 可以通过变成浮动元素，来防止自身被浮动元素覆盖（有点“以毒攻毒”那味了）
• 可以设置行内块，来防止自身及其他元素被浮动元素覆盖（如果说浮动是“独善其身”，那行内块就有点“兼济天下”的意思）
• 可以设置overflow属性，包含浮动元素（既“独善其身”，又“兼济天下”，但仍有缺陷）

以下是Zeal文档中列出的针对Block formatting context模块，最全的开启BFC的方式或本身BFC已开启的元素

元素或属性	说明
<html>	根元素
float: left float: right	将元素浮动开启
position: absolute position: fixed	将元素设置为绝对定位
display: inline-block	将元素设置为行内块元素
display: table-cell	表格单元，默认值
display: table-caption	表格标题，默认值
display: table display: table-row display: table-row-group display: table-header-group display: table-footer-group display: inline-table	匿名的表格单元，分别是HTML表格、表行、表体、表头和表脚的默认值
overflow: hidden overflow: scroll overflow: auto	将元素overflow属性设为非visible的值
display: flow-root
contain: layout contain: content contain: paint
display: flex display: inline-flex	Flex项，如果它们本身既不是flex，也不是grid或table容器的直接子元素
display: grid display: inline-grid	Grid项，如果它们本身既不是flex，也不是grid或table容器的直接子元素
column-count不为auto column-width不为auto	Multicol容器，包含column-count: 1
column-span: all	应该总是创建一个新的格式化上下文，即使column-span: all元素不在multicol容器中

但是，不管哪种方式，多多少少都会有些隐患、缺陷或者说“副作用”

37. clear

我们这里设计三个兄弟元素，对前两个元素进行float的浮动属性设置，看下效果

由于box1的浮动，导致box3位置上移，也就是box3受到了box1浮动的影响，位置发生了改变（注意，这里文字并没有被覆盖，浮动元素周围的文字是会环绕它的，这就是float最初的设计用途）

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响

clear作用：清除浮动元素对当前元素所产生的影响（本质是为元素添加一个margin-top属性，具体的值由浏览器自动计算）

clear属性可选值：

• left 清除左侧浮动元素对当前元素的影响
• right 清除右侧浮动元素对当前元素的影响
• both 清除两侧中影响较大一侧元素的影响（注意，这里不是同时清除两侧的影响）

示意图

38. after伪类处理高度塌陷

我们学习了上面知识后，了解了高度塌陷问题的解决方式，其中相对较好的两种方式为：

1. 通过overflow: hidden等为元素开启BFC
2. 通过clear: both清除浮动对元素产生的影响

这两种方式都有一定的弊端和隐患。那有没有一种更好的方式去解决高度塌陷的问题呢？

答：有，可以通过给被浮动元素影响位置的那些元素添加after伪元素，content内容为空，附带clear属性，并将其设置为块元素显示即可，具体效果如下图：

Q&A

Q1：这里使用了一个伪元素选择器::after，这跟在box2下直接定义一个box3有什么区别呢？

A：我们知道，网页的结构思想是：结构+表现+行为。在box2下直接定义一个box3，属于结构；而使用伪元素选择器，属于表现。而高度塌陷问题属于表现问题，定义box3的目的是为了撑起box1的内容，属于表现，而不是结构，所以在css中定义::after更符合网页的编程思想。

Q2：为什么需要使用display: block呢？

A：因为默认情况下，::after伪元素是一个行内元素，如果不转为块元素，将仍然撑不起box1的高度

Q3：为什么用after伪元素而不是before伪元素？

前文提到clear属性本质是为元素添加一个浏览器自动计算margin-top属性值，如果使用before伪元素，顺序上相当于加在了box2前面，就算清除浮动的影响，其获得的margin-top属性值也只能是0，于是父元素box1高度仍然没被撑起来。反之则不同，after伪元素顺序上是排在box2后面的，此时该伪元素被clear清除浮动影响后，其获得的margin-top属性值正好是浮动元素box2的高度，于是父元素box1的高度就这样被撑起来了。

Q4：完整的处理思路？

A：使用无内容的after伪元素撑起box1，并使用clear属性清除浮动对伪元素产生的影响

39. clearfix

本小节探讨clearfix同时解决高度塌陷和外边距重叠问题的背后机理

39.1 伪类解决边距重叠问题

前文曾提到过垂直布局中边距重叠的问题：相邻的垂直方向外边距会发生重叠现象

先看下该问题的演示：

<div class="box1 clearfix">
	<div class="box2"></div>
</div>

如上图所示，子元素设置了一个margin-top之后，父元素跟随子元素一起进行了移动，即之前说的父子元素间相邻外边距，子元素会传递给父元素（上外边距），可以比较自然地想到照搬上文提到的伪元素处理法，在box2的前边增加一个元素，隔开box1和box2间的外边距。从而解决该问题

处理思路：

父元素使用::before伪元素，相当于在父子元素间添加一个阻隔，使得父子元素外边距不相邻，这时候还要将父元素的display属性设置为table。因为设置为block时，::before伪元素是块元素且内容为空，块元素的默认高度是被内容撑开的，于是伪类没有高度，父子元素外边距仍相邻；而设置为inline-block也不行，因为inline-block兼顾行内元素和块元素的特点，既可以设置宽高也不独占一行，在没有设置宽高时，会存在一个默认高度，所以inline-block仍然行不通；此时变通一下用table就能实现我们想要的效果。

示意图

（1）display属性为block

（2）display属性为inline-block

（3）display属性为table

可以看到最终实现了我们想要的效果

Q&A

Q1：为什么没有使用clear属性？

A：clear`是为了清除浮动对布局的影响，此处没有浮动的元素，讨论的也不是浮动，而是边距折叠的问题

Q2：display不是还有一个none属性么，为什么不用呢？

A：none属性只是不占据位置，但是也不能让元素相邻的外边距分离

Q3：为什么table值就可以呢？

A：display:table可以开启BFC，前文提到元素开启BFC后的其中一个特点就是父子元素外边距不会重叠。当然，这里也需要合理选择伪元素选择器，使其外边距不相邻才行。

另外，总结一下：

• 高度塌陷问题，一般用::after
• 外边距重叠问题，一般用::before

39.2 clearfix解决边距重叠和高度塌陷

clearfix 这个样式就可以同时解决高度塌陷和外边距重叠的问题，当遇到这些问题时，直接使用clearfix这个类即可

以下是clearfix的源码:

.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

其中.clearfix::before是为了解决外边距重叠问题

.clearfix::before{
    content: '';
    display: table;
}

.clearfix::after是为了解决高度塌陷问题

.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

定位

40. 定位的简介

需求分析

我们分别给box2和box3添加了外边距之后，就可以达到需求效果

.box2 {
    width: 200px;
    height: 200px;
    background-color: yellow;
    /* 左外边距、上外边距 */
    margin-left: 200px;
    margin-top: -200px;
}

.box3 {
    width: 200px;
    height: 200px;
    background-color: orange;
    /* 上外边距 */
    margin-top: 200px;
}

当然也可以使用浮动来解决上述问题，但稍微麻烦一点，不管怎样，问题也是显而易见。我们实际开发中，页面上的元素可能很多，这样改必然是 牵一发而动全身，那么仅仅靠我们之前学习的布局知识，不足以轻松应对这种场景

那么就势必需要一个方便我们处理这种场景的办法，它就是定位

定位（position）

1. 定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置
2. 使用position属性来设置定位

可选值	含义
static	不开启定位，元素是静止的，默认值
relative	开启元素的相对定位
absolute	开启元素的绝对定位
fixed	开启元素的固定定位
sticky	开启元素的粘滞定位

41. 相对定位

当元素的position属性值设置为relative时，则开启了元素的相对定位

元素使用了相对定位后，只会移动自身的显示位置，而不会对已存在的其他元素产生包括布局在内的任何影响

41.1 偏移量（offset）

当元素开启相对定位以后，可以通过偏移量来设置元素的位置

offset属性	含义
top	定位元素和定位位置的上边距离
bottom	定位元素和定位位置的下边距离
left	定位元素和定位位置的左侧距离
right	定位元素和定位位置的右侧距离

定位元素垂直方向的位置由top和bottom两个属性控制，通常情况下只会使用其中之一

• top值越大，定位元素越靠下
• bottom值越大，定位元素靠上

定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用其中之一

• left越大，定位元素越靠右
• right越大，定位元素越靠左

现在可以使用相对定位尝试解决上文提到的需求

.box2 {
    width: 200px;
    height: 200px;
    background-color: yellow;
    /* 开启相对定位 */
    position: relative;
    top: -200px;
    left: 200px;
}

现在我们所举的例子不是很明显，但当页面布局比较复杂，特别是页面元素很多的时候，相对定位优越性就可以大大体现出来

41.2 相对定位的特点

1. 当元素开启相对定位以后，如果不设置偏移量元素，则元素不会发生任何变化（这里注意，不仅仅是位置）
2. 相对定位是参照于元素在文档流中的位置进行定位的（可以理解为相对于自身原始位置）
3. 相对定位会提升元素的层级（表现为可以覆盖其他元素）
4. 相对定位不会改变元素的性质：块还是块，行内还是行内

Q1：如果给上述三个div都设置相对定位，那么它们的层级关系会是什么样的呢？或者说谁会被谁覆盖呢？

A：我们直接进行测试验证，如下图所示：

可以看到覆盖关系是：box3 >> box2 >> box1，我们再稍微调整下box3和box2的前后位置

会发现覆盖关系变成了：box2 >> box3 >> box1

这里可以援引后文下结论：没有设置层级或层级z-index设置相同值时，优先显示在html文档中顺序靠下的元素

Q2：相对定位会提升元素的层级，是不是就类似于浮动一样脱离了文档流？

A：我们可以对比下，浮动和相对定位的区别

1. 参考系不同：浮动的参考系是其父元素；相对定位是相对于自身
2. 可移动方向不同：浮动只能左右移动；相对定位是上下左右移动
3. 影响不同：浮动会影响页面布局（包括下方元素位置影响和高度塌陷问题）；相对定位不影响页面布局
4. 性质不同：浮动会改变元素的性质（不再独占一行，其宽高都会被内容撑开）；相对定位不会改变元素的性质
5. 文字环绕：浮动不会覆盖文字；相对定位可以覆盖文字
6. 浮动脱离了文档流，不再占据页面位置；相对定位仍然占据页面位置

当然，浮动和相对定位也有其相似之处

1. 浮动和相对定位都是移动位置
2. 浮动和相对定位不会从父元素中移出

Q3：相对定位的第四个特点相对定位不会改变元素的性质：块还是块，行内还是行内，但是上述例子中元素开启相对定位后好像就不再独占一行了，这个怎么理解？

A：相比于浮动元素的特点，相对定位不会改变元素的性质其实是一个相对不容易理解的问题。但其实也不难，可以把相对定位认为是元素的灵魂出窍。其位置发生改变以后，布局并没有产生影响，因为它的肉体（结构）仍然占据着原来的那个位置。只是其灵魂（内容）发生了移动。

Q4：相对定位的第四个特点中块还是块，行内还是行内，意味着行内元素也可以使用相对定位是吗？

A：是的，我们直接看示例效果

42. 绝对定位

当元素的position属性值设置为absolute时，则开启了元素的绝对定位

42.1 绝对定位的特点

1. 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
2. 开启绝对定位后，元素会从文档流中脱离
3. 绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）
4. 绝对定位会使元素提升一个层级
5. 绝对定位元素是相对于其包含块进行定位的（与相对定位不同）

示意图

42.2 包含块（containing block）

正常情况下：

1. 包含块就是离当前元素最近的开启了定位的祖先块元素
2. 如果所有的祖先元素都没有开启定位，则html（根元素、初始包含块）就是它的包含块

示例

<body>
    <!-- 如果box1开启定位，则box2的包含块是box1，否则就是body -->
    <div class="box1">
        <div class="box2"></div>
    </div>

    <!-- 如果box3开启定位，则em的包含块是box3，否则就是body -->
    <div class="box3">
        <span>
            <em>hello</em>
        </span>
    </div>
</body>

• 不给box2、box3开起定位，box4的包含块是html
• 只给box3开启定位之后，box4的包含块是box3
• 只给box2开启定位之后，box4的包含块是box2
• 给box2、box3都开起定位之后，box4的包含块是box3

注意：这里上述的条件是开启定位，也就是说只要position不是static（默认值），那么就满足了其成为包含块的必要条件

上述示例中，我们给其祖先元素都设置了相对定位。其实改成其他几种定位方式也是可行的，如下图示例

42.3 水平方向的布局

我们之前说过，水平方向的布局等式：

margin-left` + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度

当使用绝对定位时，需要添加left和right两个值（此时规则和之前一样，只是多添加了两个值）

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其父元素的宽度

当发生过度约束时

1. 如果9个值中没有auto，则自动调整right值以使等式满足（之前7个值是margin-right）
2. 如果9个值中有auto，则自动调整auto的值以使等式满足

可设置auto的值：margin-left/margin-right /width/left/right

因为left和right的值默认是auto，所以如果没有设置left和right，当等式不满足时，则会自动调整这两个值

42.4 垂直方向的布局

垂直方向布局的等式的也必须要满足

top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + top = 其父元素的高度

42.5 水平居中

<style>
    .box1 {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        position: relative;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 左右外边距设置为auto */
        margin-left: auto;
        margin-right: auto;
        /* 绝对定位 */
        position: absolute;
        left: 0;
        right: 0;
    }
</style>

<div class="box1">
    <div class="box2"></div>
</div>

42.6 垂直居中

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    /* 左右外边距设置为auto */
    margin-top: auto;
    margin-bottom: auto;
    /* 绝对定位 */
    position: absolute;
    top: 0;
    bottom: 0;
}

42.7 水平垂直居中

目前，我们可以根据绝对定位进行元素的水平垂直双方向居中，所以这个方法只是其中之一

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    /* 左右外边距设置为auto */
    margin: auto;
    /* 绝对定位 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

42.8 小结

• 水平布局等式：left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其父元素的宽度

• 垂直布局等式：top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + top = 其父元素的高度

• 只是在没有auto时，会自动调整top/bottom/left/right

43. 固定定位

将元素的position属性设置为fixed，则开启了元素的固定定位

固定定位的特点

1. 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样

2. 唯一不同的是，固定定位永远参照于浏览器的视口（viewport，可视窗口）进行定位，不会随网页的滚动条滚动

44. 粘滞定位

将元素的position属性设置为sticky，则开启了元素的固定定位

这次，我们换个方式，直接来看粘滞定位的效果

大家可以看到，右侧边栏部分在一定的情况下是固定的，滚动到上方一定位置开始发生变动

我们先带着这个疑问，打开Zeal官方手册，找到position中sticky的相关描述

​ The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

​ This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the GitHub issue on W3C CSSWG).

阐述大意是：

1. 该元素是根据文档流进行定位的，即相对于包含块进行偏移
2. 偏移量不会影响任何其他元素的位置
3. 粘性元素总是“粘”到其最近的具有“滚动机制”的祖先元素（当overflow为hidden、scroll、auto、overlay时创建），即使该祖先不是最近的实际滚动祖先

44.1 粘滞定位的特点

• 粘滞定位和相对定位的特点基本一致
• 不同的是粘滞定位可以在元素到达某个位置时将其固定
• 粘滞定位不兼容IE

45. 几种定位的对比和补充总结

我们通过上面的学习，知道position属性有五个可选值

但static是默认值，即不开启定位，所以我们只需要对比4种定位方式即可

定位方式	是否不设置偏移量，元素不会发生改变	是否脱离文档流	是否改变元素性质	是否提升元素层级	参考系
relative（相对定位）	√	×	×	√	参照于元素在文档流中的位置
absolute（绝对定位）	×	√	√	√	参照于其包含块
fixed（固定定位）	×	√	√	√	参照于浏览器的视口
sticky（粘滞定位）	×	√	√	√	参照于浏览器的视口

45.1 元素层级(z-index)

对于开启了定位元素，可以通过z-index属性来指定元素的层级

• z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示
• 如果元素的层级一样，则优先显示在html文档中顺序靠下的元素
• 祖先的元素的层级再高，也不会盖住后代元素

45.2 总结

一般情况下：

• 页面的整体结构大多采用浮动、块进行布局
• 页面某些模块结构一般采用定位进行微调

字体

46. 字体相关的样式

1. color用来设置字体颜色（严格来说其实是前景色）

2. font-size字体的大小

当然，字体的属性并不止这些

46.1 font-family

​ font-family 字体族（字体的格式）

(1)serif 衬线字体

(2)sans-serif 非衬线字体

(3)monospace等宽字体

(4)cursive 手写体

(5)fantasy 梦幻字体

上述字体均不表示具体的某种字体，而是字体的分类

小结

1. 我们经常使用的一些字体，如微软雅黑、黑体、楷体、宋体、Consolas等，才是具体的某种字体
2. 也就是说， font-family属性指定字体的类别，浏览器会自动使用该类别下的字体
3. font-family可以同时指定多个字体，多个字体间使用,隔开
4. 字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推

46.2 @font-face

我们除了可以使用系统自带的字体样式外，还可以在服务器端自定义字体位置

@font-face可以将服务器中的字体直接提供给用户去使用

@font-face {
    /* 指定字体名字 */
    font-family: 'myFont1';
    /* 服务器中字体路径 */
    src: url('/font/ZCOOLKuaiLe-Regular.woff'),
        url('/font/ZCOOLKuaiLe-Regular.otf'),
        url('/font/ZCOOLKuaiLe-Regular.ttf') format('truetype');/* 指定字体格式，一般不写 */
}

p {
    font-size: 30px;
    color: salmon;
    font-family: myFont1;
}

问题

1. 加载速度：受网络速度影响，可能会出现字体闪烁一下再变成最终的字体
2. 版权：有些字体是商用收费的，需要注意
3. 字体格式：字体格式也有很多种（woff、otf、ttf），未必兼容，可能需要指定多个

46.3 字体的简写属性

font 可以设置字体相关的所有属性：

font: font-style font-variant font-weight font-size/line-height font-family

其中某些值可以不写，会用默认值

默认值

属性	默认值	其他常用值
font-style	normal	italic
font-variant	normal	small-caps
font-weight	normal	bold
font-size	medium	small、large
line-height	normal
font-family	取决于具体的浏览器

示例1

/* font-size: 50px;
font-family: 'Courier New', Courier, monospace; */
font: 50px 'Courier New', Courier, monospace;

示例2

/* small-caps值设置小型大写字母字体，所有小写变大写，同时字体尺寸更小（了解即可） */
font: bold small-caps italic 50px 'Courier New', Courier, monospace;

注意：简写属性省略的值会使用默认值，所以会覆盖前面的非简写属性（不仅仅对于字体而言）

47. 图标字体(iconfont)

图标字体简介

在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活。所以在使用图标时，我们还可以将图标直接设置为字体，然后通过@font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标

47.1 fontawesome图标字体库

官方网站：https://fontawesome.com/

使用步骤

1. 下载 https://fontawesome.com/
2. 解压
3. 将css和webfonts移动到项目中
4. 将all.css引入到网页中
5. 使用图标字体（直接通过类名来使用图标字体class="fas fa-bell"、class="fab fa-accessible-icon"）

示例

<link rel="stylesheet" href="/font/fontawesome/css/all.css">
<style>
    i {
        color: green;
    }

    .fa-venus-mars,
    .fa-mars-double {
        color: red;
    }

    .fa-html5 {
        color: #E34D22;
    }

    .fa-css3 {
        color: blue;
    }

    .fa-js {
        color: #D1B514;
    }
</style>

<!-- 大小 -->
<i class="fab fa-weixin fa-lg"></i>
<i class="fab fa-weixin fa-2x"></i>
<i class="fab fa-weixin fa-3x"></i>
<br>

<!-- 边框 -->
<i class="fab fa-weixin fa-2x fa-border"></i>
<br>

<!-- 旋转 -->
<i class="fab fa-weixin fa-2x  fa-rotate-90 "></i>
<!-- 水平对称 -->
<i class="fab fa-weixin fa-2x fa-flip-horizontal "></i>
<!-- 垂直对称 -->
<i class="fab fa-weixin fa-2x fa-flip-vertical "></i>
<br>

<!-- 动画 -->
<i class="fa fa-venus-mars fa-3x fa-spin"></i>
<i class="fa fa-mars-double  fa-3x fa-pulse"></i>
<br>

<!-- 列表 -->
<ul class="fa-ul">
    <li><i class="fa-li fa fa-check-square"></i>can be used</li>
    <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
    <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
<br><br><br>

<!-- 组合 -->
<span class="fa-stack fa-lg">
    <i class="fab fa-html5 fa-stack-1x fa-10x"></i>
    <i class="fab fa-css3 fa-stack-1x fa-4x"></i>
    <i class="fab fa-js fa-stack-1x fa-2x"></i>
</span>

其中**fas/fab是免费的，其他是收费的**

47.2 图标字体其他使用方式

通过伪元素设置

1. 找到要设置图标的元素通过::before或::after选中
2. 在content中设置字体的编码
3. 设置字体的样式

• fab：font-family: 'Font Awesome 5 Brands';

• fas：font-family: 'Font Awesome 5 Free'; font-weight：900;

示例

<style>
    .poem {
        width: 200px;
        height: 300px;
        margin: auto;
    }

    li {
        list-style: none;
        margin-left: -40px;
    }

    li::before {
        content: '\f130';
        /* font-family: 'Font Awesome 5 Brands'; */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-right: 10px;
        color: gray;
    }
</style>

<div class="poem">
    <h1>武陵春·春晚</h1>
    <p> [宋] 李清照</p>
    <ul>
        <li>风住尘香花已尽，</li>
        <li>日晚倦梳头。</li>
        <li>物是人非事事休，</li>
        <li>欲语泪先流。</li>
        <li>闻说双溪春尚好，</li>
        <li>也拟泛轻舟。</li>
        <li>只恐双溪舴艋舟，</li>
        <li>载不动、许多愁。</li>
    </ul>
</div>

通过实体设置

通过实体来使用图标字体：

&#x图标编码;

示例

<i class="fas">&#xf025;</i>

47.3 iconfont图标字体库

官方网站：https://www.iconfont.cn/

iconfont是阿里的一个图标字体库，海量图标库，图标字体非常丰富

但是版权有点模横两可，如果需要商用，最好联系作者。不过一般情况下，公司企业都会有自己的UI设计团队，会自己去进行设计。

这里使用方式大同小异，不过

• iconfont需要添加购物车后再添加至项目然后下载，下载包中有demo.html，详细介绍了使用方式
• iconfont也提供了一种在线方式，直接在我的项目中选择在线链接可以复制出一份@font-face的css代码

后续步骤与前面介绍的一致

示例

<!-- <link rel="stylesheet" href="/font/iconfont/iconfont.css"> -->
<style>
    i.iconfont {
        font-size: 100px;
    }

    p::before {
        content: '\e811';
        font-family: 'iconfont';
        font-size: 50px;
    }
    
    /* 3、通过在线连接：这里link和@font-face择其一即可  */
    @font-face {
        font-family: 'iconfont';
        /* Project id 2580407 */
        src: url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.woff2?t=1622373966454') format('woff2'),
            url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.woff?t=1622373966454') format('woff'),
            url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.ttf?t=1622373966454') format('truetype');
    }
</style>

<!-- 1、通过字符实体设置 -->
<i class="iconfont">&#xe810;</i>
<i class="iconfont">&#xe811;</i>
<i class="iconfont">&#xe812;</i>
<i class="iconfont">&#xe813;</i>

<!-- 2、通过伪元素设置 -->
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam deserunt tempore fugit quos eaque, ipsa rerum
    suscipit iure cumque aspernatur esse cupiditate nihil quas nulla odit? Sequi accusantium labore maiores.</p>

48. 行高(line-height)

可以通过line-height属性来设置元素的行高，即文字占有的实际高度

• 可以直接指定一个大小 px/em
• 也可以直接为行高设置一个有理数（字体大小的倍数）
• 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

行高经常还用来设置文字的行间距：行间距 = 行高 - 字体大小

字体框

1. 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
2. 行高会在字体框的上下平均分配

示例

border: 1px black solid;
font-size: 100px;
/* line-height: 100px; */

不指定行高时，content高度131.556px：说明line-height默认值大约是1.31 ~ 1.32(倍数)

指定行高时，content高度99.556px：少了0.444px，并且字母p下面溢出

49. 文本对齐方式

49.1 水平对齐

text-align 属性设置文本的水平对齐

可选值	对齐方式说明
left	左侧对齐
right	右侧对齐
center	居中对齐
justify	两端对齐

示例

1.left 左侧对齐

2.right 右侧对齐

3.center 居中对齐

4.justify 两端对齐

49.2 垂直对齐

vertical-align 属性设置元素垂直对齐的方式

可选值	对齐方式说明
baseline	基线对齐
top	顶部对齐
bottom	底部对齐
middle	居中对齐

示例

1.baseline 基线对齐

2.top 顶部对齐

3.bottom 底部对齐

4.middle 居中对齐

这里的居中对齐高度 = 基线高度 + x的高度 / 2，这种居中对齐并非实际上的居中对齐，一般也不会用这种方式对文字进行垂直方向的对齐

vertical-align 还可以通过设置px值更改垂直对齐方式

vertical-align: 10px;

49.3 图片的垂直对齐问题

<style>
    .imgDiv {
        border: 5px seagreen solid;
    }

    .imgDiv img {
        width: 400px;
        height: 300px;
    }
</style>

<div class="imgDiv">
    <img src="/assets/news.png" alt="">
</div>

明显默认情况下，图片底部有一定缝隙，我们稍作修改，给img元素添加vertical-align属性值

/* 只要不是基线对齐，就能消除底部缝隙 */
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;

Q：为什么图片会有缝隙？

A：图片属于替换元素，特点与文本一致，也有自己的基线，默认也是基线对齐。而图片的基线位置不在最底部，所以会出现缝隙。

背景

50. PS的基本设置

在介绍背景之前，首先需要做好准备工作：安装PS与基本设置

这里就不详细介绍PS的安装了，主要介绍PS的基本设置

左侧工具栏

调成2列，更方便使用

右侧工具栏

不需要的视图统统关掉

修改单位为像素

由于一般默认的单位是厘米，所以这里需要修改

在历史记录、颜色或色板附近右键，打开选项卡，选择界面选项

打开单位与标尺，修改单位中的标尺与文字为像素

51. 背景(background)

1.background-color 设置背景颜色

2.background-image 设置背景图片

• 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满
• 如果背景图片大小大于元素，则背景图片一部分会无法完全显示
• 如果背景图片大小等于元素，则背景图片会直接正常显示

3.background-repeat 设置背景图片的重复方式

• repeat 默认值，背景图片沿着x轴和y轴双方向重复
• repeat-x 背景图片沿着x轴方向重复
• repeat-y 背景图片沿着y轴方向重复
• no-repeat 背景图片不重复

4.background-position 设置背景图片的位置

• 通过top left right bottom center几个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
• 通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量

5.background-clip 设置背景的范围

• border-box 默认值，背景会出现在边框的下边
• padding-box 背景不会出现在边框，只出现在内容区和内边距
• content-box 背景只会出现在内容区

6.background-origin 背景图片的偏移量计算的原点

• padding-box 默认值，background-position从内边距处开始计算
• border-box 背景图片的偏移量从边框处开始计算
• content-box 背景图片的偏移量从内容区处计算

7.background-size 设置背景图片的大小

• 第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是auto
• cover 图片的比例不变，将元素铺满
• contain 图片比例不变，将图片在元素中完整显示

8.background-attachment 背景图片是否跟随元素移动

• scroll 默认值，背景图片会跟随元素移动
• fixed 背景会固定在页面中，不会随元素移动

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色

示例1

.box1 {
    height: 500px;
    width: 500px;
    overflow: auto;
    border: 20px red double;
    padding: 10px;
    /* 背景色 */
    background-color: darksalmon;
    /* 背景图 */
    background-image: url('/assets/背景.png');
    /* 背景图重复方式 */
    background-repeat: no-repeat;
    /* 背景图偏移位置 */
    background-position: 0 0;
    /* 背景图偏移量计算的原点 */
    background-origin: content-box;
    /* 背景范围 */
    background-clip: content-box;
    /* 背景图片大小 */
    background-size: contain;
}

.box2 {
    width: 100px;
    height: 1000px;
    background-color: orange;
    background-image: url("assets/背景2.jpg");
    background-repeat: no-repeat;
    background-position: 50px 50px;
    /* 背景图片是否跟随移动 */
    background-attachment: fixed;
}

backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的

注意

• background-size必须写在background-position的后边，并且使用/隔开background-position/background-size
• background-origin和background-clip 两个样式，orgin要在clip的前边

示例2

.box1 {
    height: 500px;
    width: 500px;
    border: 10px red double;
    padding: 10px;
    background: #bfa url("assets/dlam.png") no-repeat 100px 100px/200px padding-box content-box;
}

雪碧图与渐变

52. 雪碧图

解决图片闪烁的问题：

1. 可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片
2. 这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题
3. 这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图

雪碧图的使用步骤：

1. 先确定要使用的图标
2. 测量图标的大小
3. 根据测量结果创建一个元素
4. 将雪碧图设置为元素的背景图片
5. 设置一个偏移量以显示正确的图片

雪碧图的特点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验

示例1

a:link {
    display: block;
    width: 93px;
    height: 29px;
    background: url("assets/背景/练习2-背景/btn.png");
    /* 默认值，可以不设置 */
    background-position: 0 0;
}

a:hover {
    /* 设置水平方向的一个偏移量；注意是向左移动，所以是负值 */
    background-position: -93px 0;
}

a:active {
    /* 设置水平方向的一个偏移量；注意是向左移动，所以是负值 */
    background-position: calc(-93px*2) 0;
}

我们对比以下之前练习中的效果，第一次加载进来的时候会有明显的闪烁

示例2

.box1 {
    width: 109px;
    height: 33px;
    background: url("assets/背景/练习3-雪碧图/amazon-sprite_.png");
    /* 设置水平和垂直方向的一个偏移量；注意移动方向 */
    background-position: -10px -10px;
}

.box2 {
    width: 42px;
    height: 30px;
    background: url("assets/背景/练习3-雪碧图/amazon-sprite_.png");
    /* 设置水平和垂直方向的一个偏移量；注意移动方向 */
    background-position: -58px -338px;
}

53. 线性渐变

1. 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
2. 渐变是图片，需要通过background-image属性来设置
3. 线性渐变，颜色沿着一条直线发生变化 linear-gradient()
4. 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

示例

/*红色在开头，黄色在结尾，中间是过渡区域*/
background-image: linear-gradient(red, yellow);

53.1 渐变角度

linear-gradient是通过渐变的角度来控制渐变的方向。渐变角度值是渐变线与渐变容器中心点向上垂直线之间的夹角

可以通过下面两种方法来定义这个角度

• 使用关键词：to top、to bottom、to left、to right、to top right、to top left、to bottom right和to bottom left（这些值会被转换为指定的角度值）
• 使用带单位数字定义角度，比如45deg、1turn等

如果省略角度值的设置，那默认是to bottom（对应180deg或者.5turn）

我们来看使用指定渐变方向为45deg时的效果

另外，在使用顶角关键词时需要注意，如果你想要一个red至blue的渐变，方向是 to top right，如下图所示：

顶角关键字并不意味着渐变线穿过右上角，而是渐变线首先通过元素中心点并且与顶点垂直相交，与中心点垂直线构成指定的夹角

53.2 repeating-linear-gradient()

repeating-linear-gradient()属性可以设置平铺的线性渐变

示例

background-image: repeating-linear-gradient(red, yellow);

默认情况下，跟linear-gradient(red, yellow)效果一样

我们稍作改动

background-image: repeating-linear-gradient(red 0px, yellow 50px);

由于我们设置的div宽高为200px，所以会有4次重复的渐变效果

54. 径向渐变

radial-gradient() 径向渐变（放射性的效果）

语法

radial-gradient(形状/大小 at 位置, 颜色 位置, 颜色 位置, 颜色 位置)

background-image: radial-gradient(red, yellow);

默认情况下，径向渐变的形状根据元素的形状来计算的

1.正方形 --> 圆形

2.长方形 --> 椭圆形

默认情况下，circle和ellipse是自动适配盒子的，我们也可以手动指定径向渐变的形状

形状

• circle 圆形
• ellipse椭圆

background-image: radial-gradient(circle, red, yellow);

也可以指定渐变的位置

位置

• top
• right
• left
• center
• bottom

background-image: radial-gradient(at left, red, yellow);

当然，除了上述值，还可以指定像素

大小

• closest-side 近边
• farthest-side 远边
• closest-corner 近角
• farthest-corner 远角

background-image: radial-gradient(100px 60px, red, yellow);

同时对其形状/大小和位置进行指定

background-image: radial-gradient(circle at 50px 100px, red 50px, yellow 100px);

类似于线性渐变，径向渐变也有对应的repeating-radial-gradient属性，即平铺的径向渐变

background-image: repeating-radial-gradient(circle at 50px 100px, red 50px, yellow 100px);

总结：径向渐变的渐变方向以圆心为起点，往四周扩散的；同一半径上的颜色是渐变的，同一圆周上的颜色是一致的

表格

55. 表格

我们通过table标签来创建一个表格

在table中使用tr表示表格中的一行，有几个tr就有几行

在tr中使用td表示一个单元格，有几个td就有几个单元格

• rowspan 纵向的合并单元格
• colspan 横向的合并单元格

示例代码

<table border="1" width="50%" align=" center">
    <!--在table中使用tr表示表格中的一行，有几个tr就有几行-->
    <tr>
        <!--在tr中使用td表示一个单元格，有几个td就有几个单元格-->
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
        <!--rouspan 纵向的合并单元格-->
        <td rowspan="2">D2</td>
    </tr>
    <tr>
        <td>AB</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
    <tr>
        <td>A4</td>
        <td>B4</td>
        <!-- colspan横向的合并单元格 -->
        <td colspan="2">C4</td>
    </tr>
</table>

56. 长表格

可以将一个表格分成三个部分：

• 头部 thead
• 主体 tbody
• 底部 tfoot

th 表示头部的单元格

示例代码

<table>
    <thead>
        <tr>
            <td>日期</td>
            <td>收入</td>
            <td>支出</td>
            <td>合计</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2000.1.1</td>
            <td>500</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>2000.1.1</td>
            <td>500</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>2000.1.1</td>
            <td>500</td>
            <td>200</td>
            <td>300</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>合计</td>
            <td>1200</td>
        </tr>
    </tfoot>
</table>

57. 表格的样式

HTML代码

<table>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>地址</td>
    </tr>
    <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>18</td>
        <td>花果山</td>
    </tr>
    <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>28</td>
        <td>高老庄</td>
    </tr>
    <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>38</td>
        <td>流沙河</td>
    </tr>
    <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>16</td>
        <td>女儿国</td>
    </tr>
    <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>18</td>
        <td>花果山</td>
    </tr>
    <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>28</td>
        <td>高老庄</td>
    </tr>
    <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>38</td>
        <td>流沙河</td>
    </tr>
    <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>16</td>
        <td>女儿国</td>
    </tr>
    <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>16</td>
        <td>女儿国</td>
    </tr>
    <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>18</td>
        <td>花果山</td>
    </tr>
    <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>28</td>
        <td>高老庄</td>
    </tr>
    <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>38</td>
        <td>流沙河</td>
    </tr>
    <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>16</td>
        <td>女儿国</td>
    </tr>
</table>

CSS代码

table {
    width: 50%;
    margin: 0 auto;
    border: 1px black solid;

    /* border-spacing：指定边框之间的距离；边框之间虽然没有距离了，但是实际上是两条边框的和，看起来是变粗了 */
    /* border-spacing: 0; */

    /*border-collapse:collapse；设置边框的合并；真正的将两条边框合并成一条边框 */
    border-collapse: collapse;
    
    /* 默认情况下元素在td中是垂直居中的，可以通过vectical-align来修改 */
    vertical-align: middle;
    text-align: center;
}

/* 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
   所以说，tr不是table的子元素 */
tbody tr:nth-child(odd) {
    background-color: rgb(211, 216, 188);
}

td {
    border: 1px black solid;
}

其中涉及的新属性有：

• border-spacing：指定边框之间的距离
• border-collapse：设置边框的合并

58. 表单

1. 在现实生活中表单用于提交数据
2. 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器

form的属性

• action：表单要提交的服务器的地址

文本框

注意：数据要提交到服务器中，必须要为元素指定一个属性值name

文本框<input type="text" name="username">

密码框

密码框<input type="password" name="password">

提交按钮

<input type="submit" value="注册">

单选框

像这种选择框，必须要措定一个value属性，value属性最终会作为用户填写的值传递给服务器

单选框
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多选框

多选框
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>

下拉列表

下拉列表
<select name="haha">
    <option value="i">选项一</option>
    <option value="ii" selected>选项二</option> 
    <option value="iii">选项三</option>
</select>

59. 表单补充

按钮

<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

上面两种写法实际上效果是一致的，区别在于：

• input是自闭合标签，不需要</input>就能结束；button不是自闭合标签，跟一般标签一样是成对出现的
• button因为不是自闭合标签，所以使用起来更灵活，可以嵌套其他的标签

过渡与动画

60. 过渡（transition）

• 通过过渡可以指定一个属性发生变化时的切换方式
• 通过过渡可以创建一些非常好的效果，提升用户的体验

属性	作用	备注或可选值
transition-property	指定要执行过渡的属性	多个属性间使用,隔开； 如果所有属性都需要过渡，则使用all关键字 大部分属性都支持过渡效果 注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
transition-duration	指定过渡效果的持续时间	时间单位：s和ms（1s=1000ms）
transition-delay	过渡效果的延迟 等待一段时间后再执行过渡
transition-timing-function	过渡的时序函数	linear匀速运动 ease 默认值，慢速开始，先加速后减速 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速后减速 cubic-bezier()来指定时序函数 https://cubic-bezier.com steps()分步执行过渡效果，可以设置第二个值： end，在时间结束时执行过渡（默认值） start，在时间开始时执行过渡
transition	可以同时设置过渡相关的所有属性	只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间

示例

/* transition: margin-left 2s 1s; */
transition-property: margin-left;
transition-duration: 2s;
transition-delay: 1s;

几种过渡效果对比

1.linear匀速运动

transition-timing-function: linear;

2.ease 默认值，慢速开始，先加速后减速

transition-timing-function: ease;

3.ease-in 加速运动

transition-timing-function: ease-in;

4.ease-in-out 先加速后减速

transition-timing-function: ease-in-out;

5.cubic-bezier()来指定时序函数

transition-timing-function: cubic-bezier(.17, 1.79, .68, -0.69);

6.steps()分步执行过渡效果

/* transition-timing-function: steps(2, end); */
transition-timing-function: steps(2);

transition-timing-function: steps(2, start);

61. 动画(animation)

动画和过渡类似，都是可以实现一些动态的效果，不同的是

• 过渡需要在某个属性发生变化时才会触发
• 动画可以自动触发动态效果

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤

动画有以下属性：

属性名	作用	可选值
animation-name	指定动画的关键帧名称
animation-duration	指定动画效果的持续时间
animation-delay	动画效果的延迟，等待一段时间后再执行动画
animation-timing-function	动画的时序函数
animation-iteration-count	动画执行的次数	infinite 无限次执行
animation-direction	指定动画运行的方向	normal 从from向to运行，每次都是这样，默认值 reverse 从to向from运行，每次都是这样 alternate 从from向to运行，重复执行动画时反向执行 alternate-reverse 从to向from运行，重复执行动画时反向执行
animation-play-state	设置动画的执行状态	running 动画执行，默认值 paused 动画暂停
animation-fill-mode	动画的填充模式	none 动画执行完毕，元素回到原来位置，默认值 forwards 动画执行完毕，元素会停止在动画结束的位置 backwards 动画延时等待时，元素就会处于开始位置 both 结合了forwards和backwards

示例代码

/* animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both; */

animation: test 2s 2s linear infinite alternate both;

@keyframes test {
    from {
        margin-left: 0;
    }

    to {
        margin-left: 900px;
    }
}

变形：平移、旋转与缩放

1. 变形就是指通过css来改变元素的形状或位置
2. 变形不会影响到页面的布局
3. transform属性用来设置元素的变形效果

62. 平移(transform)

1. translateX() 沿着x轴方向平移
2. translateY() 沿着y轴方向平移
3. translateZ() 沿着z轴方向平移平移元素

浮出效果

div {
    float: left;
    width: 200px;
    height: 300px;
    background-color: silver;
    margin: 100px 50px auto 50px;
    transition: all .3s;
}

div:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    transform: translateY(-5px);
}

62.1 各方式水平垂直居中的对比

1. 绝对定位的方式

/* 这种居中方式，只在元素的大小确定时适用 */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

2.table-cell的方式

/* table-cell的方式具有一定局限性 */
display: table-cell;
vertical-align: middle;
text-align: center;

3.transform的方式

/* transform变形平移的方式 */
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

63. Z轴平移

1. z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近

2. z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距

透视效果

html {
    background-color: rgb(71, 44, 32);
    perspective: 800px;
}

.box {
    width: 200px;
    height: 300px;
    background-color: silver;
    margin: 100px auto;
    transition: all .3s;
}

.box:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    transform: translateZ(200px);
}

64. 旋转(rotate)

通过rotate属性可以使元素沿着x、y或z轴旋转指定的角度

1. rotateX()
2. rotateY()
3. rotateZ()

示例

/* transform: rotateY(0.5turn); */
transform: rotateY(180deg);

65. 缩放(scale)

对元素进行缩放的函数

• scalex() 水平方向缩放
• scaleY() 垂直方向缩放
• scale() 双方向的缩放

.box {
    height: 200px;
    width: 200px;
    background-color: #bfa;
    margin: 200px auto;
    transition: 2s;
}

.box:hover {
    /* transform: scaleX(2); */
    /* transform: scaleY(2); */
    transform: scale(2);
    /* 变形的原点 */
    transform-origin: 0 0;
}

less

less简介

less是一门css的预处理语言

1. less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
2. less中添加了许多的新特性：像对变量的支持、对mixin的支持...
3. less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须先将less转换为css，然后再由浏览器执行

66. 编写less

具体步骤

1. 先在VSCode中搜索less，安装Easy LESS插件
2. 创建style.less文件，编写less代码（less文件名称无特定要求）
3. Easy LESS插件会帮助我们在style.less所在目录下面生成一个相同名称的css文件
4. 直接在HTML文件中引入生成的style.css
5. 后续只需编写less代码并保存，相应的css文件会自动更新

67. less语法

67.1 less注释

1. less中的单行注释，注释中的内容不会被解析到css中
2. css中的注释，内容会被解析到css文件中

// less中的单行注释，注释中的内容不会被解析到css中

/*
 css中的注释，内容会被解析到css文件中
*/

67.2 父子关系嵌套

在less中，父子关系可以直接嵌套

body {
  --height: calc(200px / 2);
  --width: 100px;
  div {
    height: var(--height);
    width: var(--width);
  }
  .box1 {
    background-color: #bfa;
    .box2 {
      background-color: red;
      .box3 {
        background-color: yellow;
      }
      >.box4{
        background-color: green;
      }
    }  
  }
}

对应生成的css

/*
`css`中的注释，内容会被解析到`css`文件中
*/
body {
  --height: calc(200px / 2);
  --width: 100px;
}
body div {
  height: var(--height);
  width: var(--width);
}
body .box1 {
  background-color: #bfa;
}
body .box1 .box2 {
  background-color: red;
}
body .box1 .box2 .box3 {
  background-color: yellow;
}
body .box1 .box2 > .box4 {
  background-color: green;
}

67.3 变量

在变量中可以存储一个任意的值，并且我们可以在需要时，任意的修改变量中的值

变量的语法：@变量名

1. 直接使用使用变量时，则以@变量名的形式使用即可
2. 作为类名、属性名或者一部分值使用时，必须以@{变量名}的形式使用
3. 变量提升，可以在变量声明前就使用变量（可以但不建议）

@b1:box1;
@b2:box2;
@b3:box3;
@size:200px;
@bc:background-color;
@bi:background-image;
@color:red;
@path:image/a/b/c;

.@{b1}{
  width: @size;
  height: $width;
  @{bc}: @color;
  @{bi}: url("@{path}/1.png");
}

.@{b2}{
  width: @size;
  height: $width;
  @{bc}: @color;
  @{bi}: url("@{path}/2.png");
}

.@{b3}{
  width: @size;
  height: $width;
  @{bc}: @color;
  @{bi}: url("@{path}/3.png");
}

生成的css代码

.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image / a / b / c/1.png");
}
.box2 {
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image / a / b / c/2.png");
}
.box3 {
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image / a / b / c/3.png");
}

注意：在less中使用语法需要用引号包裹url

67.4 其他

1. &拼接
2. :extend()对当前选择器扩展指定选择器的样式（选择器分组）
3. .p1()直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制（mixin 混合）
4. 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixin混合函数

.p1{
  width: @size;
  height: $width;
  &-wrapper{
    background-color: peru;
  }
  // &:hover{
  //   background-color: blue;
  // }
  :hover{
    background-color: blue;
  }
}
.p2:extend(.p1){
  color:@color;
}
.p3{
  .p1();
}
.p4(){
  width: @size;
  height: $width;
}
.p5{
  // .p4();
  .p4;
}

生成的css代码

.p1,
.p2 {
  width: 200px;
  height: 200px;
}
.p1-wrapper {
  background-color: peru;
}
.p1 :hover {
  background-color: blue;
}
.p2 {
  color: red;
}
.p3 {
  width: 200px;
  height: 200px;
}
.p5 {
  width: 200px;
  height: 200px;
}

67.5 补充

创建all.less文件，将我们之前编写的less文件通过@import引入进来

可以通过@import关键字来将其他的less引入到当前的less中

@import "style.less";
@import "syntax.less";

查看生成的all.css代码，会发现其他的内容囊括了两个less文件的内容

所以，我们可以利用@import来对less文件进行整合，然后引入生成的css文件使用即可

这样，每次修改的时候直接对某个模块的less文件进行修改，就会非常简单

如果我们观察过之前fontawesome源码文件，会发现其中也有less代码文件

不同的less文件里都有其自己的职责，如

• _animated.less中专门存放动画的混合函数

• _variables.less中专门存放定义的变量

• ...

但是也有个问题，通过F12调试时显示的也是css中对应的行号

如果我们要改，需要找一下，太麻烦了，能不能直接显示less中行号呢？这样我们直接定位到对应less中直接进行修改，维护起来也会比较方便

我们需要在Easy LESS插件中修改settings.json文件，在其中添加如下配置

"less.compile": {
    "compress": true, // true => remove surplus whitespace
    "sourceMap": true, // true => generate source maps (.css.map files)
    "out": true // false => DON'T output .css files (overridable per-file, see below)
}

修改完毕后，会发现多生成出来一个all.css.map文件，说明配置生效

再刷新下页面，通过F12会发现变成了less文件对应的行号

我们来逐一解释下配置的less.compile项中每一个属性的含义

1. compress 生成的css文件代码会被压缩（作用相当于我们之前安装的JS & CSS Minifier (Minify)插件的效果）
2. sourceMap 生成.css.map文件，通过F12可以查看了less文件对应行号
3. out 生成对应css文件

68. 混合函数(mixin)

在混合函数中可以直接设置变量，并且可以指定默认值

.test(@w:200px, @h:100px, @bc:red){
  width: @w;
  height: @h;
  background-color: @bc;
}

.p6{
  // .test(200px, 100px, red); // 对应参数位传值
  // .test(@h:200px,@w:100px,@bc:red); // 写明对应属性，可变换顺序
  // .test();
  .test(300px);
}

生成的css代码

.p6 {
  width: 300px;
  height: 100px;
  background-color: red;
}

68.1 less自带函数

1.average混合函数

average 函数计算每个通道(RGB)的两种输入颜色的平均值

示例

.h1{
  color:average(red,yellow);
}

生成的css代码

.h1 {
  color: #ff8000;
}

2.darken混合函数

Darken 函数用于降低元素中颜色的亮度

示例

body{
    background-color: darken(#bfa, 50%);
}

生成的css代码

body{
    background-color: #22aa00;
}

弹性盒

69. 基本概念

弹性盒flex

1. 是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局
2. flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器，我们通过display属性来设置弹性容器

• display:flex 将元素设置为块级弹性容器
• display:inline-flex 将元素设置为行内的弹性容器

弹性元素

• 弹性容器的子元素是弹性元素（弹性项）

• 弹性元素可以同时是弹性容器

70. 弹性容器的属性

主轴与侧轴

1. 主轴：弹性元素的排列方向称为主轴
2. 侧轴：与主轴互相垂直的方向称为侧轴

70.1 主轴属性

排列方式

flex-direction属性指定容器中弹性元素的排列方式

1. row默认值，弹性元素在容器中水平排列（自左向右）
2. row-reverse 弹性元素在容器中反向水平排列（自右向左）
3. column 弹性元素纵向排列（自上向下）
4. column-reverse 弹性元素反向纵向排列（自下向上）

示例

/* 设置弹性元素排列方式 */
flex-direction: column;

自动换行

flex-wrap属性设置弹性元素是否在弹性容器中自动换行

1. nowrap ：默认值，元素不会自动换行
2. wrap： 元素沿着辅轴方向自动换行

示例

/* 设置弹性元素排列方式 */
flex-direction: row;
/* 设置自动换行 */
flex-wrap: wrap;

简写属性

flex-flow 是flex-wrap和flex-direction的简写属性

/* 简写属性 */
flex-flow: row wrap;

空白空间

justify-content 属性：指定如何分配主轴上的空白空间（主轴上的元素如何排列）

可选值

1.flex-start 元素沿着主轴起始边排列

2.flex-end 元素沿着主轴终止边排列

3.center 元素主轴方向居中排列

4.space-around 空白分布到元素两侧

5.space-between 空白均匀分布到元素间

6.space-evenly 空白分布到元素的单侧

注：space-evenly 这个可选值兼容性不是很好

70.2 辅轴属性

辅轴对齐

align-items属性指定元素在辅轴上如何对齐

可选值

1.stretch 默认值，将元素的长度设置为相同的值

2.flex-start 元素不会拉伸，沿着辅轴起始边对齐

3.flex-end 沿着辅轴的终止边对齐

4.center 元素沿着辅轴居中对齐

5.baseline 基线对齐

空白空间

align-content 属性指定如何分配辅轴上的空白空间（辅轴上的元素如何排列）

可选值

1.flex-start 元素沿着辅轴起始边排列

2.flex-end 元素沿着辅轴终止边排列

3.center 元素沿着辅轴方向居中排列

4.space-around 空白沿辅轴方向分布到元素两侧

5.space-between 空白均匀分布到元素间

6.space-evenly 空白分布到元素的单侧

弹性水平垂直居中

利用弹性盒令元素进行水平垂直双方向居中

justify-content: center;
align-items: center;

71. 弹性元素的属性

71.1 伸展系数

flex-grow属性指定弹性元素的伸展系数，默认值为0

1. 该属性决定当父元素有多余空间时，子元素如何伸展
2. 父元素的剩余空间，会按照各元素的伸展系数的比进行分配

示例

li:nth-child(1) {
    background-color: #bfa;
    flex-grow: 1;
}

li:nth-child(2) {
    background-color: red;
    flex-grow: 2;
}

li:nth-child(3) {
    background-color: green;
    flex-grow: 3;
}

71.2 缩减系数

flex-shrink 指定弹性元素的收缩系数，默认值为1

1. 该属性决定当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩
2. 缩减系数的计算方式比较复杂，缩减多少是根据 缩减系数和 元素大小 来综合计算

示例

li:nth-child(1) {
    background-color: #bfa;
    flex-shrink: 1;
}

li:nth-child(2) {
    background-color: red;
    flex-shrink: 2;
}

li:nth-child(3) {
    background-color: green;
    flex-shrink: 3;
}

71.3 基础长度

flex-basis 指定的是元素在主轴上的基础长度

1. 如果主轴是横向的，则该值指定的就是元素的宽度
2. 如果主轴是纵向的，则该值指定的就是元素的高度
3. 默认值是auto，表示参考元素自身的高度或宽度
4. 如果传递了一个具体的数值，则以该值为准

示例

li:nth-child(1) {
    background-color: #bfa;
    flex-basis: 200px;
}

简写属性flex

flex可以设置弹性元素所有的三个样式

语法

flex: 增长 缩减 基础长度

特殊值

1. initial：flex: 0 1 auto
2. auto：flex: 1 1 auto
3. none：flex: 0 0 auto 弹性元素没有弹性

71.4 排列顺序

order属性决定弹性元素的排列顺序

li:nth-child(1) {
    background-color: #bfa;
    order: 2;
}

li:nth-child(2) {
    background-color: red;
    order: 3;
}

li:nth-child(3) {
    background-color: green;
    order: 1;
}

71.5 覆盖弹性元素

align-self属性用来覆盖当前弹性元素上的align-items配置

li:nth-child(1) {
    background-color: #bfa;
    align-self: flex-end;
}

移动端适配

72. 像素

屏幕是由一个个发光的小点构成，这些小点就是像素，分辨率：1920 x 1080 说的就是屏幕中发光小点的数量

在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素

1.物理像素

上述所说的屏幕发光小点就是物理像素

2.CSS像素（逻辑像素）

1. 编写css等网页代码时，我们所用像素都是CSS像素
2. 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
3. 一个CSS像素最终由几个物理像素显示，由浏览器决定
4. 操作系统和浏览器都分别有缩放功能，这两种缩放都分别可以对最终显示网页时CSS像素和物理像素间的数量关系产生影响
5. PC端在默认情况下，一个CSS像素 = 一个物理像素

73. 屏幕分辨率

1. 屏幕分辨率是指纵横向上的像素点数，单位是px
2. 屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量
3. 显示分辨率就是屏幕上显示的像素个数，分辨率1920×1080的意思就是水平方向含有像素数为1920个，垂直方向像素数1080个
4. 在不同的屏幕，单位像素的面积大小是不同的
5. 屏幕尺寸相同的情况下，像素面积越小，屏幕越清晰，分辨率就越高
6. 智能手机的单位像素面积远远小于电脑的像素点

**Q：**一个宽度为900px的网页在iphone6中要如何显示呢？

**A：**默认情况下，移动端的网页都会将视口设置为980像素（CSS像素），以确保PC端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页。

所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页。

74. 视口(viewport)

视口就是屏幕中用来显示网页的区域，查看视口只需看它的宽度即可，因为文档流的高度是不固定的。

严格意义上浏览器中没有专门显示视口的属性，但HTML根元素是块元素且是视口的子元素，故html的宽度就是视口的宽度

注1：该截图是在3840*2160(4K分辨率)，系统缩放为200%，浏览器缩放为100%的情况下截取的，不同分辨率下的显示情况会有所不同

注2：这里视口宽度为1920，和1080p分辨率、系统缩放为100%时的默认情况相同，就是因为经过系统200%的缩放后，水平像素3840px显示出来的效果缩减了一半，正好是1920

注3：在查看前要先将浏览器的缩放重置为100%

我们假定当前网页显示在1920*1080P分辨率的屏幕上，操作系统缩放为100%，浏览器缩放为100%，然后进行分类讨论

1.什么条件都没改变

此时视口宽度 1920px（CSS像素），1920px（物理像素）

故CSS像素和物理像素的比是 1:1

2.其余条件不变，浏览器缩放为200%

此时视口宽度 960px（CSS像素），1920px（物理像素）

故CSS像素和物理像素的比是1:2

总结

1. 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
2. 可以通过改变视口的大小，来改变CSS像素和物理像素的比值
3. 改变视口大小可以通过改变操作系统缩放或浏览器缩放来实现，缩放比例越大视口越小
4. 也就是说越放大网页，视口宽度就越小；越缩小网页，视口宽度就越大

75. 移动端页面

移动端默认的视口大小是980px(CSS像素)

默认情况下，移动端的像素比就是 980/移动端宽度 （如980/750）

如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比非常不好，会导致网页中的内容非常非常的小，故编写移动页面时，必须要确保有一个比较合理的像素比，以下是两种常见的像素比：

• 1css像素 对应 2个物理像素
• 1css像素 对应 3个物理像素

**Q:**为什么会有1:2和1:3两种不同的常用像素比？

**A:**因为如今屏幕的分辨率越来越高，所以最佳像素比逐步由1:2向1:3过渡，这样子由原来旧手机只能用2个物理像素来呈现1个CSS像素，变为了高分辨率新手机用3个物理像素来呈现1个CSS像素，网页呈现的画面会清晰不少。

76. 完美视口

1. 每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果
2. 将像素比设置为最佳像素比的视口大小我们称其为完美视口
3. 可以通过meta标签来设置视口大小

将网页的视口设置为完美视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

以后写移动端的页面，就一定要先添加上述语句到界面中

相关问题

**1.**移动端开发的单位是什么？

不同的设备完美视口的大小是不一样的（如iPhone6 -- 375px，iPhone6 Plus -- 414px）

由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，比如在iPhone6中 375px就是全屏，而到了iPhone6 Plus中375px显示后屏幕就会多一部分空白未处理

所以在移动端开发时，就不能再使用px来进行布局了，可以用rem

**2.**移动端设计稿的宽度一般是多少？

移动端设计稿的宽度一般是750px或1125px，因为iPhone的完美视口375px多年来比较流行，而前文提到过CSS像素和物理像素的比是1:2或1：3，所以UI方面给的也刚好是2或3倍宽度的图。

**3.**为什么设计图宽度不直接按照完美视口（就比如iPhone6的375px）来定稿？

因为每一种屏幕的完美视口的大小是依据最佳像素比来确定的，我们如果直接按375px的定稿来编写html&css代码的话，最终网页呈现效果就相当于把设计稿扯大了两倍再显示（假定最佳像素比是1:2的话），就类似于我们把照片扩大了两倍再查看一样，会很模糊。所以设计图干脆都给750px（或1125px），这样设计稿本身就是已经被放大了2倍（或3倍）的效果，最终网页实现效果就会和设计稿一样，也不会有清晰度的问题。

77. vw单位

1. vw 表示的是视口的宽度（viewport width）
2. 1vw = 1%视口宽度
3. vw这个单位永远相对于视口宽度进行计算

**Q:**为什么要用vw单位来适配移动端设计稿？

A:因为设计稿中的每个元素，我们都必须按它在稿中的精确的比例来实现（包括大小和位置），因为这样子在不同尺寸、不同分辨率下的手机屏幕呈现出来的效果一致。

另外，一开始我们就不能考虑用px单位来实现设计稿，因为每台设备的像素面积不一样，像素数量也不一样，直接用CSS像素(px)来编写代码的话，网页在不同手机上呈现的效果就可能不一致，这是要坚决避免的情况。

用比例的话也不能考虑用%的方式，因为所有元素的最终祖先元素是html根元素，而html根元素的宽度是不固定的，它跟随视口宽度变化而变化，于是我们自然想到了用vw这个永远相对于视口宽度变化而计算的单位来适配。

78. rem适配

**Q:**假设设计稿里有一个48px * 35px 大小的元素，设计稿宽度为750px，如何将其恰当地转换为以vw单位表示？

100vw = 750px(设计图的像素) ，则0.1333333333333333vw = 1px

我们还记得第19小节提到过的rem单位，rem是相对于根元素的字体大小来计算，1rem = <root>.font-size * 1，那我们就可以直接设置css代码如下：

html{font-size:0.1333333333333333vw}

这样就可以将该元素的宽高设置为：

.box1{
	weight:48rem;
	height:35rem;
}

岂不是直接解决问题了？

但这样是行不通的！有个关键点：

网页中字体大小最小是12px，不能设置一个比12像素还小的字体，如果我们设置了一个小于12px的字体，则字体会被浏览器自动设置为12px（0比较特殊，除外）。

一般来说1080p的分辨率下，0.1333333333333333vw转换后实际也就一两个CSS像素那么大，浏览器自然强制调整根元素的字体大小，显示结果就会乱，达不到我们想要的效果。

解决的方式很简单，将根元素字体设置成大于12px（CSS像素）的vw值即可，一般都是将1px（设计图里的像素）对应的vw值再乘以40或100，赋值给根元素字体，以乘40为例，此时

html{font-size:5.3333vw}

则此时1rem=40px（设计图里的像素），该元素的宽高可设为

.box1{
	weight:1.2rem;
	height:0.875rem;
}

注意这里的比值都是用设计图中的像素数值换算出来的,如48/40=1.2，35/40=0.875，这时候最终呈现的效果就没什么问题了。

78.1 总结步骤

1. 将设计稿的宽度按100vw来换算，算出对应设计稿中的像素1px等于多少vw
2. 然后将算出来对应的vw值乘以一个合适的倍数（个人喜欢乘100），要求乘的结果其转换成CSS像素后能大于12px，然后令html根元素字体大小为这个乘的结果
3. 此时1rem=根元素字体大小，每个设计稿上的元素，将他们的宽、高等属性与根元素字体大小（先转换成设计稿像素）相除，这样就得到了这些元素的宽、高等属性分别对应多少rem，然后直接用rem做单位，赋值相应属性

79. 响应式布局

网页可以根据不同的设备或窗口大小呈现出不同的效果

1. 使用响应式布局，可以使一个网页适用于所有设备
2. 响应式布局的关键就是 媒体查询
3. 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式

响应式设计原则：

1. 移动端优先
2. 渐进增强

80. 媒体查询

媒体特性

1. width 视口的宽度
2. height 视口的高度
3. min-width 视口的最小宽度（视口大于指定宽度时生效）
4. max-width 视口的最大宽度（视口小于指定宽度时生效）

断点

样式切换的分界点，我们称其为断点，也就是网页的样式在这个点时会发生变化

一般比较常用的断点

1. 小于768 超小屏幕 max-width=768px
2. 大于768 小屏幕 min-width=768px
3. 大于992 中型屏幕 min-width=992px
4. 大于1200 大屏幕 min-width=1200px