HTML+CSS学习笔记

发表于 分类于

网页特点

优点：（1）无需安装（2）无需更新（3）跨平台

网页组成

W3C标准制定网页由结构（HTML）+样式（CSS）+行为（JS）组成

<head> 中包含的是网页的元数据，浏览器或搜索引擎根据这些元数据解析网页

注释不能嵌套

一、HTML

文档声明

文档声明通过标签 <!doctype> 用于告知浏览器当前网页的版本（如HTML 4、HTML5、XHTML等），不区分大小写

HTML5文档声明：<!doctype html>

字符集

内存中一个小格子为 1 位，内存中无法操作 bit ，最小可操作单位为 1 byte（字节）= 8 bit

8 bit = 1 byte（字节）
1024 byte = 1 kb（千字节）
1024 kb = 1 mb（兆字节）
1024 mb = 1 gb（吉字节）
1024 gb = 1 tb（特字节）
1024 tb = 1 pb

所有数据在计算机中以二进制存储，包括文本、图片、音频等。编码解码采用的规则称为字符集，如ASCII（美国7位）、ISO88591（欧洲 8位）、GB2312（中国）、GBK（中国 GB2312的扩展）、UTF-8（万国码）

字符集说明写在 <meta> 标签里，如 <meta charset="utf-8">，从而避免乱码问题

meta 标签

<meta> 标签用于设置网页中的元数据，用于浏览器或搜索引擎解析网页。<meta> 没有结束标签

常用属性有 name（指定数据的名称，如keywords、description）+ content（指定数据的内容）、http-equiv（网页重定向）+ content、charset（指定网页的字符集）

例子

<meta name="keywords" content="购物,网上购物">
为网页设置关键字，当在搜索引擎中搜索 “购物” 时会推荐该网站

<meta name="description" content="这是网站的描述">
为网站设置描述，该描述会显示在搜索引擎搜索的结果中

<meta http-quiv="refresh" content="秒数,url=https://www.baidu.com">
为网站设置定时重定向，当到达相应秒数后网页会跳转到相应路径

语义化标签

块元素、行内元素、替换元素

块元素

在页面中独占一行的元素称为块（block）元素。

如 <h1> - <h6>、<p>、<blockquote>（表示一个长引用，会换行缩进，对比<q>）

— 块元素一般用于网页布局

— 一般会在块元素中放行内元素，块元素中基本什么都能放

— <p> 中不能放任何块元素，若写错，浏览器在解析时会自动修正

行内元素

在页面中不会独占一行的元素称为行内（inline）元素。

如 <em>（斜体）、<strong>（加粗）、<q>（短引用，不换行加引号，对比 <blockquote>）、<a>（超链接）

— 行内元素主要用于包裹文字

— 行内元素中不会放块元素，但是 <a> 可嵌套除它自身外的任何元素

替换元素

如 <img>、<iframe>、<audio>、<video>

布局标签（结构化语义标签）

如以下 HTML5 新增标签

<header>  表示网页头部
<main>    表示网页主体（一个页面只有一个 <main>）
<footer>  表示网页底部
<nav>     表示网页导航
<aside>   表示网页中与主体相关的其他内容（侧边栏）
<article> 表示一个独立的文章
<section> 表示一个独立的区块，以上标签都不合适时用 <section>

与 <section> 类似的有 <div>（没有语义，表示区块）和 <span>（没有语义，行内元素）

列表

1、无序列表 <ul> + <li>（列表项，块元素）

2、有序列表 <ol> + <li>（列表项）

3、定义列表 <dl> + <dt>（表示定义的内容）+ <dd>（对内容进行解释说明）

超链接

<a>为行内元素

超链接通过设置属性 href 可跳转至其他网页，或在当前网页中进行跳转。

href="#" 跳转至页面顶部

href="#目标元素的id" 跳转至页面相应元素处

href="javascript:;" 可作为超链接路径的占位符点击后什么也不会发生

图片

<img> 是替换元素（显示内容并非代码里写的内容，而是利用引入内容进行替换），介于块元素和行内元素之间，兼具两者特点（既能设置宽高，又不会独占一行）

在 <img> 中 alt 属性默认情况不会显示，部分浏览器在图片无法加载时会显示，并且搜索引擎会根据 alt 中内容来识别图片

图片一般有jpeg、jpg、gif、png、webp

jpeg/jpg：支持颜色较丰富，不支持透明效果，不支持动图

gif：支持颜色较少，支持简单透明，支持动图

png：支持颜色丰富，支持复杂透明，不支持动图

webp：谷歌新推出的专门用于表示网页中图片的一种格式，具备其他图片格式的所有优点，而且文件还很小。缺点：兼容性不好

base64：将图片使用base64编码，将图片转换为字符，在 src 中通过字符的形式引入图片。一般需要和网页一起加载的图片用 base64，否则其他格式图片是在浏览器向后端请求网页后再次发送图片资源的请求

原则：效果一样，用小的；效果不一样，用效果好的

引入音频/视频

音频

<audio>标签来引入音频，可在<audio>内添加 src 属性，也可在标签中间添加 <source src="xxx">来引入相应文件。

还包括属性 controls（音频文件引入时默认不允许用户控制播放，加入该属性允许用户控制）、autoplay（打开页面时是否自动播放，大部分浏览器考虑到用户体验不会自动播放）、loop（是否循环播放）

考虑浏览器兼容问题：

（1）当浏览器不支持 <audio> 时显示文字提示

（2）当浏览器不支持某种格式音频文件时使用另一种格式的音频文件

（3）老版本浏览器不支持 <audio> 时，可使用 <embed>，包括属性src、type="audio/mp3"、width、height

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

（1）浏览器支持 <audio> 时显示音频，不支持时显示文字提示
（2）浏览器会从上至下选择一个音频文件
    <audio controls>
        该浏览器不支持音频播放 
        <source src="./xxx.mp3">
        <source src="./xxx.ogg">
    </audio>
（3）让所有浏览器都可显示音频，支持<audio>时用<audio>，并从<source>获取音频文件，不支持<audio>时会选<embed>
    <audio controls> 
        <source src="./xxx.mp3">
        <source src="./xxx.ogg">
        <embed src="./xxx.mp3" type="audio/mp3">
    </audio>

视频

通过标签 <video>，使用方式和音频差不多，注意 <embed> 中type="video/mp4"

内联框架<iframe>

<iframe>用于向当前页面引入一个其他页面，页面中将会有个窗口显示其他网页，其中 src 属性设置要引入的网页路径，frameborder 属性设置内联框架是否有边框（取值为 0 或 1）

缺点：内联框架中的网页不会被搜索引擎检索，因此对 SEO 也没有什么好处

表格

表格标签

<table></table> 表示表格（块元素），<tr> 表示一行（块元素），，<td> 表示一列（行内元素）

在 <td> 中设置属性 colspan="合并的列数" 可横向合并单元格，rowspan="合并的行数" 可纵向合并单元格

可以将表格分为如下三部分，通过定义这三部分后，表格头部、主体、底部在代码中的书写顺序无要求，最终显示为表头-主体-底部

`<thead>` 头部
`<tbody>` 主体
`<tfoot>` 底部

在这三部分中间可添加行列 <tr><td></td></tr>，还可添加 <th> 表示头部单元格代替 <td> ，如 <tr><th></th></tr>， <th> 中的文字会加粗居中

表格中通过 <caption></caption> 创建标题

注：若表格中没有使用 tbody 而是直接使用 tr，浏览器会自动创建一个 tbody，并将 tr 全都放到 tbody 中，因此 tr 不是 table 的子元素

表格属性

border-spacing: xxpx; 指定边框间的距离

border-collapse: collapse; 设置边框的合并

如表格外边框与单元格边框间有间距，可通过
table{
    border: 1px solid black;
    border-spacing: 0px;
}
td{
    border: 1px solid black;
}
消除间隙，但此时是把两者边框间距设为 0，实际边框为 1+1=2px
可通过如下属性设置边框合并
table{
    border: 1px solid black;
    border-collapse: collapse;
}
td{
    border: 1px solid black;
}
此时也没有间隙，且两者边框合并后实际边框为 1px

vertical-align 设置 <td> 中的元素对齐方式，默认情况下元素在 <td> 中是垂直居中的。可选值有 top、bottom、middle（默认） 等

注：在 <td> 中是所有元素都能通过 vertical-align 设置，而其他元素中 vertical-align 只会影响文字

表单

<form> 声明表单，属性有 action（表单要提交的服务器地址）

表单内容
文本框
    <input type="text" name="服务器根据name获取相应数据">
密码           
    <input type="password" name="服务器根据name获取相应数据">
提交按钮  
    <input type="submit" value="按钮上的文字">
    或<button type="submit">提交</button>
普通按钮
    <input type="button" value="按钮上的文字">
    或<button type="button">按钮</button>
重置按钮
    <input type="reset">
    或<button type="reset">重置</button>
单选按钮
    <input type="radio" name="xxx" value="向服务器发送的数据" checked>
    通过相同的 name 属性限制相同 name 只能选一个，checked 表示默认选中
多选框
    <input type="checkbox" name="xxx" value="向服务器发送的数据" checked>
    checked 表示默认选中
下拉列表
    <select name="xxx">
        <option value="向服务器发送的数据" selected>选项一</option>
        <option value="向服务器发送的数据">选项二</option>
    </select>
    selected 表示默认选中
颜色选择框（浏览器兼容性不好）
    <input type="color">
电子邮件输入框，会检查输入格式（浏览器兼容性不好）
    <input type="email">

表单中元素的属性
autocomplete="on或off" 开启或关闭自动补全
readonly      将表单项设置为只读，无法修改，但数据会提交
disabled      将表单项设为禁用，数据不会提交
autofocus     设置表单项自动获取焦点

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

若给表单项添加 disabled = "disabled" 则表单项将变成不可用状态

二、CSS

网页实际上是一个多层结构，通过 CSS（层叠样式表）为每层设置样式

设置 CSS 方法:

（1）内联/行内样式：在标签内部通过 style 属性设置元素样式。只能对一个标签起作用

（2）内部样式表：在 <head> 的 <style> 中通过CSS选择器选中元素并为其设置样式 。只能对一个页面起作用，不能跨页面复用

（3）外部样式表：编写到外部 CSS 文件里，通过 <link rel="stylesheet" href="./xxx.css"> 引入。

选择器

1、基本选择器

（1）元素选择器

根据标签名选中指定元素，如 p{} div{}

（2）id 选择器

根据元素的 id 选中一个元素，如 #box{} #element{}

（3）类选择器

根据元素的 class 属性选中一组元素，如 .box{} .element{}

class 可以重复使用，通过 class 属性为元素分组，也可同时为一个元素指定多个 class 属性

（4）通配选择器

选中页面所有元素，如 *{}

2、复合选择器

（1）交集选择器

选中同时符合多个条件的元素，如 选择器1选择器2选择器n{}

注意：交集选择器中若有元素选择器，必须使用元素选择器开头

（2）选择器分组（并集选择器）

同时选择多个选择器对应的元素，如 选择器1,选择器2,选择器n{}

3、关系选择器

（1）子元素选择器

选中指定父元素的指定子元素，语法 父元素 > 子元素{}

（2）后代元素选择器

选中指定元素内的指定后代元素，语法 祖先 后代{}

（3）选择下一个兄弟元素

语法 兄 + 弟{}

（4）选择下边所有兄弟元素

语法 兄 ~ 弟{}

4、属性选择器

[属性名] 选择含有指定属性的元素

[属性名=属性值] 选择含有指定属性和属性值的元素

[属性名^=属性值] 选属性值以指定值开头的元素

[属性名$=属性值] 选属性值以指定值结尾的元素

[属性名*=属性值] 选属性值中含有某值的元素

[属性名~=属性值] 选属性中可有多个值，但其中有一个为指定的值

[属性名|=属性值] 选属性值以 某值 或 某值- 开头

5、伪类选择器

伪类（不存在的类/特殊的类）用来描述一个元素的特殊状态，如：第一个子元素、被点击的元素、鼠标移入的元素

（1）子元素伪类1

:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child(第几个) 选中第n个子元素，特殊值：n（子元素全选）、2n 或 even（选中偶数位的子元素）、2n+1 或 odd（选中奇数位的子元素）

注：以上伪类都是根据其父元素的所有子元素进行排序

（2）子元素伪类2

:first-of-type、:last-of-type、:nth-of-type() 这三种伪类与上述功能相似，不同是这三种是在同类型子元素中排序

如
<ul>
    <span>xxx</span>
    <li>xxx</li>
    <li>xxx</li>
</ul>

设置样式
ul > li:first-child{
    color:red;   //对第一个 <li> 不生效，因为 <span> 才是第一个子元素
}
ul > li:first-of-type{
    color:red;   //对第一个 <li> 生效
}

（3）否定伪类

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

ul > li:not(:nth-of-type(3)){
    color:red;   //除了第三个 <li> 外，其他 <li> 变为红色
}

（4）超链接伪类

:link 表示正常链接/没访问过的链接

:visited 表示访问过的链接

由于保护隐私原因，:visited 伪类只能修改链接颜色，无法修改大小、背景等。

以上两种是超链接独有的伪类

（5）其他伪类

:hover 表示鼠标移入的状态

:active 表示鼠标点击时

6、伪元素选择器

伪元素（不真实存在的元素/特殊的元素）用来描述一个元素的特殊位置

::first-letter 第一个字母

::first-line 第一行

::selection 鼠标选中的内容

::before 元素的开始，必须结合 content 属性， content 中添加的内容鼠标无法选中

::after 元素的最后，必须结合 content 属性

如
div::before{
    content:'xxx';
    color:red;
}
会在 <div> 元素前添加字符串 'xxx'，并且该添加的部分为红色

伪元素默认是一个行内元素

样式继承

样式继承是发生在祖先和后代之间的，为一个元素设置的样式会同时应用到其后代元素上

但部分样式如背景（图片、颜色）相关、布局相关等的样式不会被继承

样式冲突与选择器权重

样式冲突：当通过不同选择器，选中相同元素，并为相同样式设置不同值时，就发生了样式冲突

发生样式冲突时，应用哪个样式由选择器权重（优先级）决定

选择器权重如下，从上至下递减：

1. 内联样式       优先级：1,0,0,0
2. id 选择器      优先级：0,1,0,0
3. 类和伪类选择器  优先级：0,0,1,0
4. 元素选择器      优先级：0,0,1,0
5. 通配选择器      优先级：0,0,0,0
6. 继承的样式      没有优先级

比较优先级时遵循以下原则：

（1）比较优先级时，需要将针对该元素的所有选择器的优先级进行相加计算，优先级越高，越优先显示（分组选择器中每个元素是独立计算互不影响）

（2）选择器的累加不会超过其最大数量级，对同一元素设置多个类累加后再高也不会超过 id 选择器

（3）若优先级计算后相等，则优先使用靠下的样式

（4）在某个样式后添加 !important，此时该样式会获取最高优先级，甚至超过内联样式（慎用）

声明块

使用外部样式表，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验

单位

长度单位

像素：不同屏幕像素大小不同，像素越小屏幕显示越清晰，同样像素值在不同设备下显示效果不同

百分比：可将属性值设置为相对其父元素属性的百分比

em：相对于元素的字体大小计算的，em会根据字体大小变化而改变，如 1 em = 1 font-size，默认情况下 font-size = 16 px

rem：是相对与根元素 <html> 的字体大小来计算的

vw：是相对于视口宽度（viewport width）计算，1 vw = 1% 视口宽度，100 vw = 100% 视口宽度（移动端都支持，PC 端新版浏览器支持）

vw 与 百分比：百分比参照的是父元素的宽高，参照物是会一直改变的，而 vw 参照的总是视口宽度

颜色单位

颜色名称：可通过颜色英文名来设置颜色

RGB：通过三原色调配出不同颜色，此处指光的三原色，每种颜色范围为 0-255（0%-100%），全 0 为黑色，全为 255 表示白色

RGBA：在 rgb 基础上增加一个透明度，1 表示完全不透明，0 表示完全透明

十六进制 RGB：共六位，两位两位分别对应R、G、B，范围为 00-ff，若两位两位重复可简写，如 #aabbcc 可简写为 #abc

HSL/HSLA 值：

H（色相，对应一个色环，红橙黄绿蓝靛紫一圈最后转回红，取值为0-360）

S（饱和度，取值为0%-100%，取值为 0% 时为灰色）

L（亮度，取值为0%-100%，当取值为 0% 时为黑色，取值为 100% 时为白色）

A（透明度，取值为0-1，和 RGBA 类似）

文档流

网页是一个立体多层结构，最底下的一层称为文档流，文档流是网页的基础，创建的元素默认都是在文档流中排列

在文档流中

—块元素：

会在页面中独占一行（自上向下垂直排列）
默认宽度是把父元素填满，是父元素的全部
默认高度是被子元素内容撑开

—行内元素：

不会在页面中独占一行（自左向右水平排列），一行容不下会自动换行
默认宽度和高度是被子元素内容撑开，无法设置宽高

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

CSS 将页面中所有元素都设置为一个矩形的盒子

盒子 = 内容区（content）+ 内边距（padding）+ 边框（border）+ 外边距（margin）

盒子的可见大小由内容区、内边距和边框共同决定

（1）内容区

元素中所有的子元素和文本内容都在内容区中排列，大小由 width 和 height 属性设置

（2）边框

边框大小会影响到整个盒子大小，至少设置三个样式

宽度 border-width，默认为 3px
颜色 border-color，默认使用 color（实际上指定的是前景的颜色如字体、边框等，区别于背景） 的颜色
样式 border-style，默认为none，取值有solid（实线）、dotted（点状虚线）、dashed（虚线）、double（双线）

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

单独指定某一边样式：border-top/right/bottom/left-width/color/style

简写：将三种属性写在一行用空格隔开，没有顺序要求
如border: 10px green solid;
border-top：10px solid red;

outline 与 border 的区别：

outline 用来设置元素的轮廓线，用法与 border 一样，但是 outline 不会影响可见区域大小，不会挤走其他元素，会覆盖在其他元素上，不占用其余空间，即不会影响页面布局

盒子阴影

box-shadow 同样不会影响页面布局

第一个值 水平偏移量，正值向右移动，负值向左移动

第一个值 垂直偏移量，正值向下移动，负值向上移动

第三个值 阴影的模糊半径

第四个值 阴影的颜色

盒子圆角

border-radius、border-top/bottom-left/right-radius 会通过设置圆角的圆半径来形成圆角效果。

border-top-left-radius:50px 100px; //椭圆角，两个值分别为 x、y 轴半径
border-radius 取值规则如下
    四个值：左上       右上        右下   左下
    三个值：左上       右上/左下    右下
    两个值：左上/右下   右上/左下
    一个值：四个角
设置椭圆角 border-radius: 20px / 40px;
设置元素为圆形 border-radius: 50%;

（3）内边距

内边距为内容区和边框间的距离，有四个方向的内边距。

内边距的设置会影响盒子的大小，背景颜色会延伸到内边距。当有四个值时规则和 border 相同分别表示“上右下左”

（4）外边距

外边距不会影响盒子可见大小，但会影响位置以及盒子实际占用空间。也有四个方向外边距

元素在页面中是按照自左向右的顺序排列，若设置左和上边距则会移动元素自身，而设置下和右边距会移动其他元素

默认情况下设置 margin-right 不会产生任何效果

（5）水平布局

元素水平方向的位置由 margin-left、border-left、padding-left、width、padding-right、border-right、margin-right 共同决定

其中 width（默认为 auto）、margin-left、margin-right 这三个属性可以设置为 auto

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

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素（更准确应为包含块）内容区宽度（width）

其中可设置为 auto 的值有 margin、width

若相加结果等式不成立，则称为过度约束，则等式会自动调整

— 在这七个值没有为 auto 的情况下，浏览器会自动调整 margin-right 值使等式成立；

— 若某个值为 auto 的情况，则浏览器会自动调整值为 auto 的属性值以使等式成立

— 若将一个宽度和一个外边距设为 auto 或三个值都设置为 auto，则宽度会调整为最大，设置为 auto 的外边距会自动为 0

— 若将两个外边距设置为 auto，宽度为固定值，则会将外边距设置为相同的值，即元素在父元素中水平居中

（6）垂直布局

1. 当父元素没有设置高度时，默认父元素高度是被内容撑开
2. 处理子元素从父元素中溢出：
通过设置
overflow
overflow-x（处理水平方向溢出）
overflow-y（处理垂直方向溢出）

取值有
visible（默认值，溢出依然显示）
hidden（裁剪溢出内容）
scroll（生成水平和竖直两个滚动条）
auto（根据需要生成滚动条）
3. 垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象。

如上面的 div1 设置 margin-bottom:100px; 下面的 div2 设置 margin-top:100px; 则两个 div 间的距离为 100px

对于兄弟元素（对于开发有利，一般不需要处理）

— 兄弟元素间的相邻的垂直外边距会取两者间绝对值较大的值（包括正负）

— 若兄弟元素间外边距一正一负，则取两者的和

对于父子元素（会影响页面布局，需处理）

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

处理方式一：不使用外边距

通过内边距代替，在父元素中设置 padding-top，并且父元素的高度 height 也要调整减去 padding-top 的值

处理方式二：不让外边距相邻

在父元素中设置 border，同时调整父元素和子元素的 height

处理方式三：不让外边距相邻

在父元素中设置一个子元素，把父元素与带有 margin-top 的子元素隔开，具体使用如下

父元素::before{
    content:'';
    display:table;
}

（7）行内元素盒模型

行内元素不支持设置宽度和高度

行内元素可以设置 padding、margin、border，但是垂直方向的 padding、margin、border 不会影响页面布局（即不会把其他元素挤开），但是可能会覆盖住其他元素

水平方向相邻的 padding、margin 不会折叠，会直接相加

（8）行内元素与块元素间的转换

通过 <display> 来设置元素显示类型

可选值：
    inline        将元素设置为行内元素
    block         将元素设置为块元素
    inline-block  将元素设置为行内块元素（既可设置宽度和高度又不会独占一行），但是会像文字一样元素的换行会在页面中显示一个空格
    table         将元素设置为一个表格
    none          元素不在页面中显示，且不占位，隐藏元素

（9）盒子大小

默认盒子可见大小由内容区 + 内边距 + 边框共同决定

通过设置 box-sizing 属性可更改盒子尺寸的计算方式，即设置 width 和 height 属性的作用

可选值有
    content-box：默认值，此时 width 和 height 用来设置内容区大小
    border-box：此时 width 和 height 用来设置整个盒子可见区域大小，即 width 和 height 表示内容区 + 内边距 + 边框的总大小

浏览器默认样式

由于默认样式未知，且不同浏览器的默认样式不同，因此编写网页时要去除浏览器默认样式

如*{
    margin:0;
    padding:0;
}
ul{
    list-style:none; //去除无需列表前的小黑点
}

但上述方式去除可能会有残留

可通过引入外部重置样式表来去除浏览器默认样式 <link rel="stylesheet" href="./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;
}

浮动

通过 float 属性设置元素浮动，此时水平布局的等式不需要强制成立。

但是元素设置浮动后会完全从文档流中脱离，不再占用文档流的位置，所以元素下边还在文档流中的元素会自动向上移动，但若文档流中的元素是文字则会环绕浮动元素

通过浮动可制作水平布局

浮动的特点

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

（2）设置浮动后元素会向父元素的左侧或右侧移动

（3）浮动元素默认不会从父元素中移出，即不能跨出父元素边界

（4）浮动元素向左或向右移动时不会超过前边的其他浮动元素

（5）若浮动元素上边是一个没有浮动的元素，则浮动元素无法上移

（6）浮动元素不会超过它上边的浮动的兄弟元素，最多和兄弟一样高

（7）浮动元素不会盖住文字，文字会自动环绕在浮动元素周围，可利用该特性设置文字环绕图片效果

脱离文档流的特点

1、块元素

（1）块元素不再独占一行

（2）脱离文档流后，块元素的宽度和高度默认都被内容撑开

2、行内元素

行内元素脱离文档流后会变成块元素，特点和脱离文档流后的块元素一样，且可设置宽高

脱离文档流后，不再需要区分块和行内元素了

浮动的问题

高度塌陷

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

解决高度塌陷：BFC（Block Formatting Context）块级格式化环境

BFC 是一个 CSS 中的一个隐含属性，可为一个元素开启 BFC，开启 BFC 后该元素会变成一个独立的布局区域

元素开启 BFC 后的特点：

1、开启 BFC 的元素不会被浮动元素所覆盖，下边文档流中的元素会跑到浮动元素旁边
2、开启 BFC 的父元素，其子元素和父元素外边距不会重叠，即给子元素设置 margin-top 后不会影响父元素
3、开启 BFC 的元素可以包含浮动的子元素，即不会发生高度塌陷

开启 BFC 的方式：

1、设置父元素的浮动 float（不推荐）
2、将父元素设置为行内块元素（不推荐）
3、将父元素的 overflow 设置为非 visible 的值，如 `overflow:hidden;`或`overflow:auto;`，从而使其可以包含住浮动的子元素

解决高度塌陷：clear（较完美，无副作用）

通过在父元素的最后添加一个子元素，并为该子元素设置 clear:both; 则父元素会依靠添加的这个子元素撑起，在该子元素上方其实浏览器自动为其添加了外边距，使其不受浮动的兄弟元素的影响，设置方式如下

父元素::after{
    content:'';
    display:block;  //由于伪元素默认是行内元素会环绕在浮动元素周围，依然无法撑起父元素，所以要将其转为块元素，或者使用 display:table;
    clear:both;
}

解决浮动对其他元素的影响

clear 属性可清除浮动元素对当前元素产生的影响

可选值
    left：清除左侧浮动元素（即 float:left 的元素）对当前元素的影响
    right：清除右侧浮动元素（即 float:right 的元素）对当前元素的影响
    both：清除两侧中最大影响的那侧

原理：设置清除浮动以后，浏览器会自动为元素添加相应外边距，使其位置不受其他元素的影响。如 div1 在 div3 上方，给 div1 设置 float 属性后原本 div3 会上移并被 div1 覆盖住，但给 div3 设置 clear:left; 后浏览器会自动为 div3 添加 margin-top，值为 div1 的高度，使得 div3 还在原本的位置不会上移

自定义clearfix类同时解决外边距重叠与高度塌陷

通过给类 clearfix 添加属性
.clearfix::before,.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

给需要解决外边距重叠与高度塌陷的父元素的 class 属性中添加 clearfix 即可使用上述样式解决问题

定位

使用 position 属性设置定位

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

1、相对定位

偏移量（offset）：当元素开启定位后，通过偏移量设置元素位置

— top/bottom/left/right：定位元素和定位位置上/下/左/右边的距离

定位元素垂直（水平）方向的位置由 top（left） 和 bottom（right） 两个属性控制，一般用其一

和 margin-right 等的区别是设置 right 移动的是元素自身，而 margin-right 是挤走其他元素

相对定位特点

（1）元素开启相对定位后，若不设置偏移量，元素不会发生任何变化

（2）相对定位是参照元素自身原本在文档流中的位置进行定位的

（3）相对定位会提升元素的层级，层级会高于文档流中的元素

（4）相对定位不会使元素脱离文档流（因为它在文档流中还占据位置）

（5）相对定位不会改变元素的性质，块还是块（如元素原来位置是否还独占一行，宽高是否改变，是否还能设置宽高），行内元素还是行内元素

2、绝对定位

包含块（containing block）：

— 正常情况下，包含块是离当前元素最近的祖先块元素，如 <div><span><em>hello</em></span></div> 其中 <em> 的包含块是 <div>

— 绝对定位时，包含块是离当前元素最近的开启了定位的祖先元素，若所有祖先元素都没开启定位，则相对于根元素进行定位，根元素就是它的包含块（<html>是根元素，也称为初始包含块）

绝对定位特点

（1）开启绝对定位后，若不设置偏移量，元素的位置不会发生变化

（2）开启绝对定位后，元素会从文档流中脱离

（3）绝对定位会使元素提升一个层级

（4）绝对定位会改变元素的性质，行内变成块，块的宽高变为被内容撑开

（5）绝对定位元素是相对于其包含块进行定位的

绝对定位元素的位置

水平布局：

元素开启绝对定位后水平布局等式需添加 left 和 right，即应满足等式 

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 + bottom = 包含块内容区高度

其中可设置为 auto 的值有 margin、width/height、left/top、right/bottom

当发生过度约束（等式不成立）时，

— 若 9 个值中没有 auto 则自动调整 right/bottom 以使等式满足

— 因为 left 和 right 的值默认是 auto，所以若不知道 left 和 right 时若等式不满足，则会自动调整这两个值

— 若显式设置了 left 或 right 为 auto，若还有其他属性如 margin 类设为 auto，也会去自动调整 left 或 right，而不是 margin

— 若 left=0; right=0; 其他值有 auto 则自动调整 auto 的值以使等式满足

元素水平居中：

方式一：
    父元素 position:relative;
    子元素 
    position:absolute;
    left=0; 
    right=0; 
    margin-left=auto; 
    margin-right=auto
方式二：
    父元素
    display:flex; 
    justify-content:center;

元素垂直居中：

方式一：
    父元素 position:relative;
    子元素 
    position:absolute;
    top=0; 
    bottom=0; 
    margin-top=auto; 
    margin-bottom=auto
方式二：
    父元素
    display: table-cell;   //将元素设置为单元格<td>
    vertical-align: middle;
方式三：
    父元素
    display:flex; 
    align-items:center;`

元素水平 + 垂直居中：

方式一：    
    父元素 position:relative;
    子元素 
    position:absolute;
    left=0; 
    right=0; 
    top=0; 
    bottom=0; 
    margin-left=auto; 
    margin-right=auto
    margin-top=auto; 
    margin-bottom=auto
方式二：
    父元素
    display:flex; 
    justify-content:center; 
    align-items:center;`

也可通过表格 table 实现

也可通过 绝对定位 + transform 实现

也可通过弹性盒 flex 实现

3、固定定位

固定定位是一种特殊的绝对定位，固定定位大部分特点都和绝对定位一样（如脱离文档流，元素性质改变，行内元素变为块元素，块元素宽高变为由内容撑开，不设置偏移量位置不会变），唯一不同的是固定定位永远参照浏览器的视口进行定位

对于开启固定定位的元素水平布局满足以下等式

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 视口宽度

如设置元素贴在某元素右边

无法通过直接设置 right 等值进行定位，因为视口宽度不固定，此时可先设置 right=50%; 并设置 margin-right: -(被贴元素宽度/2+元素宽度) 即可，不能设置任何关于 left 的值，left 默认是 auto，通过这个 auto 会自动计算不同视口宽度下的对应的值，而为了元素往右需要增大 left，因此需要减小 margin-left，但是 margin-left 为正值且越大元素才会向右移，这互相矛盾了，所以需要通过设置 margin-right，并且 margin-right 不是移动元素自身而是挤其他元素，其值越负表示右移，因此最合适

4、粘滞定位（浏览器兼容性不好）

粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置（如通过 top 等属性设置，在到达离顶端多少的位置把它定住）时将其固定

5、元素层级

对于开启定位元素，可通过 z-index 属性指定元素的层级，z-index 需要一个整数为参数，值越大元素的层级越高越优先显示

但是祖先元素的层级再高也不会盖住后代元素，因为祖先元素层级高了后代元素也会跟着高所以无法覆盖

只要是开启定位且没有设置 z-index 的元素的层级都一样

若元素层级一样，则优先显示代码中靠下的元素

弹性盒/伸缩盒 flex（CSS3）

要使用弹性盒，必须先将一个元素设置为弹性容器

弹性容器

通过 display 来设置弹性容器

display: flex;         设置块级弹性容器，独占一行（用得多）
display: inline-flex;  设置为行内弹性容器，不会独占一行

相关属性

1、flex-direction 指定容器中弹性元素的排列方式以及主轴

可选值
    row 默认值，弹性元素在容器中从左向右水平排列，主轴自左向右
    row-reverse  弹性元素在容器中从右向左反向水平排列，主轴自右向左
    column  弹性元素自上向下纵向排列，主轴自上向下
    column-reverse  弹性元素自下向上反向纵向排列，主轴自下向上

主轴：弹性元素的排列方向称为主轴

侧轴：与主轴垂直方向称为侧轴

justifyxxxxx属性与主轴有关，alignxxxxx属性与辅轴有关

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

可选值
    nowrap 默认值，不会自动换行
    wrap 元素沿着辅轴方向自动换行
    wrap-reverse 元素沿着辅轴反方向换行

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

如 flex-flow: row wrap;

4、justify-content 如何分配主轴上的空白空间，即主轴上元素如何排列

可选值
    flex-start 元素沿着主轴起边排列
    flex-end 元素沿着主轴终边排列
    center 元素居中排列，空白会在两边
    space-around 空白分布到元素两侧，元素之间的距离会稍微大，是两边距离的两倍，因为中间空白是两个元素两边空白相加的结果
    space-evenly 空白分布到元素的单侧，此时两边与元素中间空白大小相同（浏览器兼容不好）
    space-between 空白均匀分布到元素之间

5、align-items 元素在辅轴上如何对齐

可选值
    stretch  默认值，将一行内元素的高度设置为相同的值
    flex-start  元素不会拉伸，元素沿着辅轴起边排列
    flex-end  元素不会拉伸，元素沿着辅轴终边排列
    center  元素在辅轴居中对齐
    baseline 基线对齐（当字大小不同时基线不同）

6、align-content 辅轴上空白空间的分布

可选值
    flex-start
    flex-end
    center 元素垂直居中排列，空白会在两边
    space-around
    space-evenly（浏览器兼容不好）
    space-between

弹性元素

弹性容器的直接子元素是弹性元素/弹性项

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

相关属性

1、flex-grow 指定弹性元素的伸展系数，即指定当父元素有多余空间时子元素如何伸展，父元素的剩余空间会按照比例进行分配

flex-grow:0;  子元素不伸展
flex-grow:1或2或3等;

2、flex-shrink 指定弹性元素的收缩系数，即指定当父元素中空间不足以容纳所有子元素时，如何对子元素进行收缩。缩减多少是根据缩减系数和元素大小来计算

flex-shrink: 1;  默认值，等比例收缩
flex-shrink: 0;  当为 0 时不会收缩，子元素可能会超过父元素
flex-shrink: 2或3等;  可是其他整数

3、align-self 用来覆盖当前弹性元素上的 align-items

4、flex-basis 指定元素在主轴上的基础长度，若主轴是横向的，该值指定的是元素的宽度，若主轴是纵向的，该值指定的是元素的高度

可选值
    auto 默认值，表示参考元素自身的高度或宽度
    具体数值  若传递了一个具体数值，则以该值为准

5、flex 设置弹性元素 flex-grow，flex-shrink，flex-basis 样式的简写。flex: 增长系数 缩减系数 基础长度

可选值
    增长系数 缩减系数 基础长度
    initial  表示 flex: 0 1 auto 只能减
    auto   表示 flex: 1 1 auto  能增能减
    none   表示 flex: 0 0 auto  不能增不能减

6、order 决定弹性元素的排列顺序

字体

字体是属于矢量图（放大后不会失真）

1、color 设置前景色（如字体、边框颜色）

2、font-size 字体大小

单位：em，相对于当前元素的 font-size
     rem，相对于根元素的 font-size

注意：网页中字体大小最小是 12px，不能设置一个比 12 像素还小的字体

3、font-family 字体族

可选值（不是具体字体，而是对字体分类）：
    serif      衬线字体
    sans-serif 非衬线字体
    monospace  等宽字体（有利于上下行对其）
    cursice    草书字体
    fantasy    虚幻字体
以上只是指定字体的类别，浏览器会自动使用该类别下的字体，指定类别后具体用哪种字体由浏览器决定

font-family 可同时指定多个字体，多个字体间用 , 隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推

4、font-face 可将服务器中的字体直接提供给用户使用，

@font-face{
    font-family:'myfont'; //这里是指给字体起的名字，而非字体类别
    src:url('./xxx/xxx.ttf') format("truetype"),
        url('./xxx/xxx.ttf'); //服务器中字体的路径,format()不是必须
}
font-family:myfont;

问题：（1）加载速度（2）版权（但 font-family 中没有版权问题，因为 font-family 只是建议字体，具体用不用看用户电脑中是否安装；但 font-face 会涉及版权问题，因为是你提供的字体）（3）字体文件格式，如 .ttf

5、字体属性简写

font 属性可设置字体相关所有属性，语法：font: 其他样式（加粗、斜体等） 字体大小/行高 字体族，字体大小和字体族必写，若行高省略不写不表示不设置，而是使用默认值

font:50px/2 'Times New Roman',Times,serif;

line-height:2;
font:50px 'Times New Roman',Times,serif;

以上写法，两倍行高不生效，因为在 font中设置 50px 后面没有指定行高则会使用默认行高，会覆盖前面设置的 line-height:2;，可将 line-height:2; 移至 font 下方则可生效，如下

font:50px 'Times New Roman',Times,serif;
line-height:2;

6、文字对齐

水平对齐：text-align，可选值：left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）

垂直对齐：vertical-align，可选值：baseline（默认值，文字基线对齐）、top（顶部对齐）、bottom（底部对齐）、middle（居中对齐，是指与字母 x 的中间对齐）

注意：添加图片时，下方会由小缝隙，可通过设置图片的样式 vertical-align:非baseline的值来消除缝隙

7、其他文本样式

text-decoration

可选值 
none
underline（下划线）
line-through（删除线）
overline（上划线）
如
text-decoration: underline red dotted; //下划红虚线

white-space

可选值
normal（自动换行）
nowrap（不换行）
pre（保留空白，原本多个空格仅显示为一个空格，设置为 pre 后会保留多个空格）

设置省略号

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

图标字体

图标可以通过图片引入，但是图片文件大小本身比较大，且不灵活（如放大缩小、改颜色）。还可以把图标设置为字体，通过 font-face 引入字体，这样可以通过使用字体的形式使用图标

图标字体库：Font Awesome、阿里 iconfont

font awesome 使用方法：

（1）官网下载软件并解压

（2）将 css 和 webfont 文件夹移动到项目中，且放同一级目录下

（3）将 css 文件夹中 all.css文件引入网页中 <link rel="stylesheet" href="./xxx/all.css">

（4）方法一：直接通过类名使用图标字体，在标签中添加 class="fas" 或 class="fab"，并通过 font-size、color 属性改变图标大小、颜色，如

<i class="fas 具体图标对应类"></i>
（`<i>`可换，图标类可换，但 fas 或 fab 是固定的）

方法二：通过伪元素设置图标，在 content 中设置 \图标编码（在 font awesome 文档中查找），并设置字体样式，如

对于 fas 类
font-family:'font Awesome 5 Brands';
对于 fab 类
font-family:'font Awesome 5 Free';
font-weight:900;

方法三：通过实体使用，&#x字体编码;，如

<span class="fas或fab">&#x图标编码;</span>

阿里 iconfont 使用方法：

（1）在官网选择图标加入“购物车”，在“购物车”中点击“添加指项目”，在“图标管理”->“我的项目”中点击“下载至本地”，并解压

（2）将解压后所有文件移动到项目中，且放同一级目录下

（3）将 css 文件夹中 all.css文件引入网页中 <link rel="stylesheet" href="./xxx/iconfont.css">

（4）方法一：直接通过类名使用图标字体，在标签中添加 class="iconfont 图标类名"如

<i class="fas 具体图标对应类"></i>

方法二：通过伪元素设置图标，在 content 中设置 \图标编码，以及 font-family:'iconfont';

方法三：通过实体引入图标，设置 class="iconfont"以及&#x字体编码;，如

<i class="iconfont">&#x图标编码;</i>
修改样式
i.iconfont{
    font-size:100px;
}

Unicode 编码中的字符使用方法：

可在 html 中通过 &#十进制编码; 使用

也可在 js 中通过 \u十六进制编码 使用

行高

行高指文字占有的实际高度，可通过 line-height 设置，line-height 可直接指定大小（px，em），也可设置为整数，表示行高为字体大小的相应倍数，默认是 1.333

字体框指字体存在的格子，设置 font-size 是在设置字体框的高度

行高用处：

行高会在字体框的上下平均分配，因此可以通过设置 line-height 和 height 相等使单行文字在一个元素中垂直居中

行高还可用于设置文字行间距，行间距 = 行高 - 字体大小

背景

1、background-color（设置背景颜色）、background-image（设置背景图片）

2、background-repeat：设置背景重复方式

可选值
repeat    默认值，背景会沿 x、y 轴双方向重复
repeat-x  沿着 x 轴方向重复
repeat-y  沿着 y 轴方向重复
no-repeat 背景图片不重复

3、background-position：设置背景图片位置

可选值一：top left right bottom center，需要同时指定两个值，若只写一个，则第二个值默认为 center 如
background-position:top left;    //左上角
background-position:center left; //左侧中间
background-position:center center;  //正中间

可选值二：通过 水平方向偏移量 垂直方向偏移量设置，如
background-position:50px 300px;
background-position:-50px 300px;

4、background-clip：设置背景范围

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

5、background-origin：设置背景图片的偏移量计算的原点

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

6、background-size：设置背景图片大小，

可选值
宽度 高度  若只写一个，则第二个值默认是 auto
cover     图片的比例不变，图片较小边为 100% 来将元素填满，大的边可能显示不全
contain   图片比例不变，将图片在元素中完整显示，图片较大边为 100%，使图片全部显示，此时元素可能不会被填满

7、background-attachment：设置背景图片是否跟随元素移动

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

8、background：背景相关所有属性的简写

如 background:#bfa url('./img.jpg') center center/contain border-box content-box no-repeat fixed; 
无顺序要求，也没有哪个属性是必须写的
但是 background-size 只能写在 background-position 后，并用 / 隔开
background-clip 要写在 background-origin 后

雪碧图（CSS-Sprite）

雪碧图：将多个小图片统一保存到大图片中，通过 background-position 来切换显示的图片，这样图片会同时加载到网页中，从而有效避免出现闪烁问题，该技术称为 CSS-Sprite

雪碧图使用步骤

1、确定使用的图标及其大小

2、根据测量结果创建一个元素

3、将雪碧图设置为元素的背景图片

4、设置偏移量以显示正确图片

雪碧图特点

一次性将多个图片加载到页面中，降低请求的次数，加快访问速度，提升用户体验

渐变

渐变的特质是图片，不是颜色，其很多特点和 background-image 相似，而非 background-color，通过 background-image 设置

线性渐变

线性渐变1
linear-gradient(渐变方向,开始的颜色 正颜色开始位置,中间颜色2 正颜色开始位置,中间颜色n,结束的颜色)
渐变方向可为 to left、to right、to bottom、to top、to top left、xxxdeg（deg表示度数）、xxturn（转多少圈，如.5）等，也可省略，默认是180deg/to bottom
颜色开始位置也可省略
如
background-image: linear-gradient(red 50px,yellow 100px); //红色向黄色从上往下渐变，红色从 50px 开始，上面也自动填充为红色，黄色从 100px 开始
background-image: linear-gradient(to right,red,yellow); //红色向黄色从左往右渐变

线性渐变2
repeating-linear-gradient(渐变方向,开始的颜色 开始颜色的位置,结束的颜色 结束颜色的位置)
通过设置渐变发生在 ‘开始颜色的位置’ 到 ‘结束颜色的位置’ 之间，范围也只有这么大，其他区域就重复这部分渐变
此时 background-repeat:no-repeat 无效

径向渐变

径向渐变即放射性效果，默认情况下径向渐变的形状根据元素形状来计算

radial-gradient(大小 at 圆心位置, 颜色1 位置1, 颜色2 位置2, 颜色n 位置n)，只有颜色是必须写的
大小可选值
    xxxpx xxxpx     径向 x 轴半径 径向 y 轴半径
    circle          圆形
    ellipse         椭圆形
    closest-side    渐变会覆盖到元素最近的边
    farthest-side   渐变会覆盖到元素最远的边
    closest-corner  渐变会覆盖到元素最近的角    
    farthest-corner 渐变会覆盖到元素最远的角
位置可选值
    xxxpx xxxpx     圆心 x 位置 圆心 y 位置
    top
    bottom
    left
    right
    center    
如
background-image: radial-gradient(100px 100px,red,yellow);
background-image: radial-gradient(100px 100px at 100px 100px,red,yellow);
background-image: radial-gradient(100px 100px at center center,red,yellow);
background-image: radial-gradient(ellipse,red,yellow);

样式切换过渡

transition 用于为样式设置过渡效果

支持过渡的属性：大部分属性都支持，其值是个能计算的值的属性

过渡有四个属性

（1）transition-property 指定要执行过渡的属性，多个属性间用,隔开，若所有属性都要过渡，则用 all 关键字。要出现过渡效果还需要搭配 transition-duration

（2）transition-duration 指定过渡的持续时间，单位有 s 和 ms

（3）transition-timing-function 过渡的时序函数，指定过渡的执行方式，可选值有
— ease 默认值，先加速再减速

— linear 匀速运动

— ease-in 加速运动

— ease-out 减速运动

— ease-in-out 先加速后减速

— cubic-bezier(xx,xx,xx,xx) 贝塞尔曲线，可在官网查看不同参数的效果

— step(步数,执行时间点) 分步执行过渡效果，第二个值可选，end 表示在时间结束时执行过渡（默认值），start 表示在时间开始时执行过渡

— transition-delay 过渡效果的延迟，等待一段时间后再执行过渡

过渡属性简写 transition 可同时设置过渡相关所有属性，无顺序要求，但若要写延迟，则持续时间要写在延迟时间之前

transition: height 0.3s;  //当元素高度发生变化时需要 0.3s 进行切换，但变化前后的高度不能有 auto 值
transition: all 0.3s;  //当元素样式发生变化时所有变化的样式需要 0.3s 进行切换
transition: 2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);

动画

动画与过渡的异同：动画和过渡类似，都可以实现动态效果，但是过渡需在某个属性发生变化时才会触发，而动画可自动触发动态效果

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

元素选择器{
    animation-name:动画名；//对当前元素生效的关键帧名字
    animation-duration: 2s; //动画执行时间
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;  //动画执行的次数，取值为数值或 infinite（无限次）
    animation-direction: normal; //动画运行的方向，
         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
}
@keyframe 动画名{
    from{
        margin-left: 0;
    }   //动画开始位置，也可用 0%{} 表示
    40%{
        xxxx;
    }  //可选项
    to{
        margin-left: 700px;
    }  //动画结束位置，也可用 100%{} 表示
}

动画属性简写 animation 可同时设置动画相关所有属性，无顺序要求，但若要写延迟，则持续时间要写在延迟时间之前

变形平移

transform 用来设置元素的变形效果

注意变形不会影响页面布局，即元素改变位置但不对其他元素产生影响，不会挤走其他元素，同时也没脱离文档流

1、平移

translateX(xxx) 沿着 x 轴方向平移，可设置像素或百分比
translateY(xxx) 沿着 y 轴方向平移，可设置像素或百分比
translateZ(xxx) 沿着 z 轴方向平移，可设置像素或百分比
百分比是相对于自身计算的

2、旋转

rotateX(xxxdeg或xxxturn) 沿着 x 轴方向旋转
rotateY(xxxdeg或xxxturn) 沿着 y 轴方向旋转
rotateZ(xxxdeg或xxxturn) 沿着 z 轴方向旋转

3、缩放

scaleX(xxx) 水平方向缩放
scaleY(xxx) 垂直方向缩放
scale(xxx) 双方向缩放
scaleZ(xxx) z轴方向缩放，对立体元素才会看到效果

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

html{
    perspective: 800px;  //设置当前网页视距（人眼与网页的距离），一般为 800-1200px
}

元素变形默认是 2D 效果，若要 3D 变形效果需设置 transform-style:preserve-3d 搭配 transform

backface-visibility 可设置旋转后背面效果，可选值：visible、
hidden

transform-origin: xxxpx xxxpx; 设置变形原点，默认值 center

transform中可同时设置平移和旋转，用空格隔开，写的顺序不同效果不同

利用变形可设置鼠标移入时元素浮出效果，如

元素选择器{
    transition: all .3s;  //设置过渡
}
元素选择器:hover{
    transform:translateY(-4px);  //鼠标移入时元素向上移
    box-shadow: 0 0 10px rgba(0,0,0,.3)
}

CSS 中的变量与计算（浏览器兼容不太好）

CSS 原生支持变量设置

变量：通过 --变量名; 声明变量，使用时通过 var(--变量名)

计算：通过 calc(表达式)进行属性值计算，如 width: calc(200px/2);

页面适配

像素

前端开发中像素分为 CSS 像素和物理像素两种，浏览器在显示网页时需将 CSS 像素转为物理像素然后呈现

一个 CSS 像素由几个物理像素显示是由浏览器决定，默认情况下在 PC 端，1 个 CSS 像素 = 1 个物理像素

浏览器开发者工具中的像素大小表示的是视口大小（CSS 像素）

视口

像素比

视口就是屏幕中用来显示网页的区域

可通过查看视口大小来改变 CSS 像素和物理像素的比值

— 默认情况下

    视口宽度 1920px（CSS像素），1920px（物理像素）

— 浏览器放大两倍时

    视口宽度 960px（CSS像素），1920px（物理像素），此时 CSS 像素 : 物理像素 = 1 : 2

改变视口

每款移动设备设计时都有一个最佳像素比，一般只需将像素比设置为该值即可得到最佳效果，将像素比设置为最佳像素比的视口大小，称其为完美视口

可通过 <meta> 设置视口大小

设置完美视口
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中 device-width 表示设备的宽度（完美视口），initial-scale=1.0 也表示完美视口，都写上是为了保险起见

移动端

不同屏幕的单位像素大小不同，像素越小屏幕越清晰

智能手机的像素点远小于计算机的像素点，在该网站可查看不同设备的分辨率

如 24 寸显示器：1920 x 1080，iPhone 6：750 x 1334（物理像素）

默认情况下移动端的网页会将视口设置为 980 像素（CSS像素），以确保 PC 端的网页可以在移动端正常访问，但若网页宽度超过 980 像素，则移动端的浏览器会自动对网页缩放以完整显示网页，所以大部分 PC 端网站都可在移动端正常浏览，但用户体验不太好，因此一般会设计两套网页

默认情况下移动端像素比为 CSS 像素 : 物理像素 = 980 : 移动端宽度，如当 980 像素的视口在 iPhone 6 的 750 x 1334 的屏幕中显示时 1 个 CSS = 零点几个物理像素

单位

使用 vw 作为单位，vw 相对于视口宽度计算，100 vw = 整个视口宽度

vw 在移动端浏览器中基本都支持

移动端设计图宽度一般为 750px 或 1125px

    100vw = 750px，即0.1333333333333vw = 1px

    6.4vw = 48px

vw适配

由于在编写网页时换算 px 与 vw 较为麻烦，设计图中某元素vw = 100vw * (设计图某元素px/设计图宽度)px，因此可结合 rem 来进行适配

对于 750px 大小的设计图
0.1333333vw = 设计图中 1px，但是不能设置小于 12px 的字体大小，所以扩大 40 倍
5.3333vw = 设计图中 40px
html{
    font-size: 5.3333vw;  //所以 1rem = 设计图中40px
}
此时要显示设计图中 48 * 35 px 的块
.box{
    width: 1.2rem;     //48/40 = 1.2 rem
    height: 0.875rem;  //35/40 = 0.875 rem
}

为了在写代码时更方便计算可使用 less 写样式，可在代码中直接写表达式

html{
    font-size:100vw / 750 * 40;
}
.box{
    width: 48/40rem;
    height: 35/40rem;
}

响应式布局

网页可根据不同的设备或窗口大小呈现出不同布局，使用响应式布局可使一个网页适用于所有设备

响应式设计的网页（1）移动端优先（2）渐进增强

注意：在移动端不能去设置鼠标移入后的效果（即 hover，因为是触屏），所以该效果需要通过 js 实现

媒体查询

通过媒体查询，可为不同设备（如有屏幕设备等，不是指 PC 和移动端）或设备不同状态来分别设置

可通过在样式中使用 @media 媒体类型{} 进行媒体查询，可通过 , 连接多个媒体类型表示或，用 and 表示与，也可在媒体类型前加 only（主要是为了兼容一些老版本浏览器，因为老版本浏览器不认识 only，会直接忽略这一部分）

1、媒体类型（即设备类型）

— all 所有设备

— print 打印设备

— screen 带屏幕的设备

— speech 屏幕阅读器

@media all{
    body{
        background-color: #bfa;
    }
}
@media print,screen{
    body{
        background-color: #bfa;
    }
}
@media only screen{
    body{
        background-color: #bfa;
    }
}

2、媒体特性

— width 视口宽度 @media(width:xxxpx){}

— height 收口高度

— min-width 视口的最小宽度（视口大于指定宽度时生效）@media(min-width:xxxpx){}

— max-width 视口的最大宽度（视口小于指定宽度时生效）@media(max-width:xxxpx){} 

@media (width:500px){  //视口宽度为 500 px 时生效
    body{
        background-color: #bfa;
    }
}
@media (min-width:500px){  //视口宽度大于 500 px 时生效
    body{
        background-color: #bfa;
    }
}
@media (min-width:500px),(max-width:300px){  //视口宽度大于 500 px 或小于 300px 时生效
    body{
        background-color: #bfa;
    }
}
@media only screen (min-width:500px) and (max-width:700px){  //视口宽度大于 500 px 且小于 700px 的有屏设备生效
    body{
        background-color: #bfa;
    }
}
@media not only screen (min-width:500px) and (max-width:700px){} //not 是对后面的整体作否定

断点：样式切换的分界点，称其为断点，网页会在该点发生变化，

一般常用断点有：

— 小于768（超小屏幕） max-width:768px

— 大于768（小屏幕） min-width:768px

— 大于992（中型屏幕） min-width:992px

— 大于1200（大屏幕） min-width:1200px

SEO 与 性能

1、标题标签

标题标签有 <h1> ~ <h6> 重要性递减，搜索引擎检索时首先看 <title> 判断网站主要内容，接着看 <h1>，<h1> 在网页中的重要性仅次于 <title> ，一般一个页面只有一个 <h1>，一般只会用 <h1> - <h3>

2、浏览器在解析网页时会自动对网页中不符合规范的内容进行修正，这会影响性能

如：（1）标签写在 <html> 外部（2）根元素 <html> 中出现除 <head> 和 <body> 以外的子元素（3）<p> 中嵌套了块元素

3、样式加载

当使用外部样式表时，浏览器第一次加载完该 css 文件或后会保存在浏览器的缓存中，下一个页面加载同一 css 文件时无需向服务器请求，直接在浏览器缓存中读取

4、雪碧图

浏览器加载外部资源（如图片）是按需加载，用则加载，不用则不加载，可通过雪碧图一次性将多个图片加载到页面中，降低请求的次数，加快访问速度，提升用户体验

5、text-indent 用于设置文字缩进，可用于文字隐藏，这样可以在设置一些标题供浏览器搜索但不在页面中显示

6、加快加载速度

为了使项目上线时加载速度尽量快，需删除代码中的注释以及无用的换行等，可通过在 VSCode 中安装插件 JS & CSS Minifier，选中要压缩的文件，按 F1，并输入 Minify:Document，则该插件会对文件进行压缩生成 xxx.min.css 或 xxx.min.js 文件，在 html 代码中 引入时换成压缩后的文件

其他

1、<hgroup> 用于标题分组，将一组相关的标题同时放入<hgroup> 中

2、隐藏元素可通过 display 或 visibility 或 opacity 属性进行设置

设置 display:none; 元素不在页面中显示，且不占位置

设置visibility:hidden; 元素不在页面中显示，但依然占据位置

（visibility:visible; 为默认值，元素在页面中正常显示）

3、文字在父元素中垂直居中：将父元素的 line-height 设置为和父元素 height 一样的值

4、子元素在父元素中垂直居中：

方式一：子元素开启绝对定位，父元素也开启定位后，在子元素中设置 top=0; bottom=0; margin-top=auto; margin-bottom=auto（但这种方式只适用于大小确定的元素）

方式二：将父元素设置为<td>单元格，display: table-cell; vertical-align: middle;

方式三：对于大小不确定的元素，可通过绝对定位配合 transform 设置水平或垂直居中，position: absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%);

方式四：通过弹性盒 flex 来设置，display:flex; justify-content:center; align-items:center;

5、图片闪烁问题————雪碧图

如超链接中若以背景图片表示不同状态下的显示效果，则 :link 会首先加载，而 :hover、:active 会在指定状态触发时才会加载，可能就会出现空白一闪的情况

解决：通过雪碧图来解决， 如将超链接三种状态的背景图片并排放在一张图里，通过 background-position 属性设置不同状态下显示背景图片的位置

6、当屏幕宽度缩小时，为了不让窗口宽度过小导致布局混乱，可给 body 设置 min-width: xxxpx;，当窗口小于 min-width 时 body 不会再缩小

7、轮播图

方法一：通过 CSS 实现轮播图

对图片开启绝对定位脱离文档流，使得多张图片摞在一起，当要显示哪一图片时设置该图片 z-index 即可

8、标签页或收藏栏中小图标

网站图标一般存储于根目录，名为 favicon.ico，通过 <link rel="icon" href="./favicon.ico"> 引入

9、动画

方式一：雪碧图 + 样式过渡 transition

方式二：通过 animation 属性

10、一般给 <body> 设置 background-color 是给 <html> 设置，因此要看 body 的真实大小要通过 border

11、设置透明度可通过 opacity:0.5;，但在 IE8 中需要使用 filter: alpha(opacity=50)

12、H5 本地存储技术

（1）sessionStorage（会话存储）

特点：

--- 生命周期：浏览器打开到关闭的过程

--- 大小：5M

--- 保存的位置：浏览器端

--- 写：setItem('key',value)

--- 读：getItem('key')

--- 删除：removeItem('key')

（2）localStorage（永久存储）

特点：

--- 生命周期：永久，除非人为删除

--- 大小：5M 甚至更大

--- 保存的位置：浏览器端

--- 写：setItem('key',value)

--- 读：getItem('key')

--- 删除：removeItem('key')

（3）cookie

作用：用于浏览器和服务器端进行通信的

特点：

--- 生命周期：

    --- 会话 cookie：浏览器打开到关闭的过程

    --- 人为设置 cookie：人为设置的时间

--- 大小：4kb

--- 每次发送请求都携带，导致占用带宽

--- 保存的位置：浏览器端

--- cookie 容易被截获，不安全

若 sessionStorage、localStorage 中不存在某对象，会返回 null，处理使用 JSON 转化读取除的内容不存在的情况：

JSON.parse(localStorage.getItem('xxx') || '[]');

13、在 html 文件中

<head> 里针对 IE 浏览器的一个特殊配置：让 IE 浏览器以最高的渲染级别渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<body> 里当浏览器不支持 js 时 noscript 中的元素会被渲染

<noscript>xxxxx</noscript>

13、请将类为”left”的div元素和类为”right”的div元素在同一行上向左浮动，且清除父级div元素内部的浮动：给父级设置 display:inline-block 或 overflow:hidden 或 height:子元素高度;clear:both;