代码收藏家 Python全栈开发之前端深度解析
python全栈-前端
文章目录
前端三剑客：HTML，JS，CSS
应用场景：APP，网页，小程序
HTML
超文本标记语言
HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以 .html 结尾。HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如： <html>
标签有两种表现形式：
1 双标签，例如： <html></html>
2 单标签，例如： <img>
HTML5的DOCTYPE声明
DOCTYPE是 document type (文档类型) 的缩写。 <!DOCTYPE html > 是H5的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。就是<!DOCTYPE html>
html标签
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开
始点和结束点。
head标签
head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
body标签
body 元素定义文档的主体，body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）它会直接在页面中显示出来，也就是用户可以直观看到的内容
title标签
1 可定义文档的标题。
2 它显示在浏览器窗口的标题栏或状态栏上。
3 <title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title
4 <title> 的增加有利于SEO优化
SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求
meta标签
meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset=“utf-8” 是说当前使用的是 utf-8 编码格式，在开发中我们经常会看到 utf-8 ，或是 gbk ，这些都是编码格式，通常使用 utf-8 。
<!-- 这是一段注释 -->
<!-- 可以换行
这里的内容不会被浏览器显示
-->
在开始标签中有一个叹号，但是结束标签中没有
标签
标题介绍与应用
标题（Heading）是通过 <h1> – <h6> 标签进行定义的。
<h1> 定义最大的标题 <h6> 定义最小的标题
正确使用标题
请确保将 HTML 标题标签只用于标题。
不要仅仅是为了生成粗体或大号的文本而使用标题。
正确使用标题有益于SEO
应该将 < h1> 用作主标题（最重要的），其后是 <h2> （次重要的），再其次是 <h3> ，以此类推
标题标签位置摆放
在标签中添加属性： align=“left | center | right” 默认居左
段落p、换行br、水平线hr
段落是通过 <p> 标签定义的
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>
<br /> 元素是一个空的 HTML 元素。
水平线 <hr/> 标签在 HTML 页面中创建水平线，使用率很低
水平线的属性：
1 color：设置水平线的颜色
2 width：设置水平线的长度px
3 size：设置水平线的高度
4 align：设置水平线的对齐方式（默认居中），可取值left|right
图片img
网站中最多的元素
网站中最多的元素毋庸置疑，一定是图片<img> 标签定义 HTML 页面中的图像<img> 是单标签，不需要进行闭合操作
属性：
1 src：路径（图片地址与名字）网络图片最好了。本地图片最好在项目文件里面
2 alt：规定图像的替代文本，当图片不能显示的时候，就会显示一个碎裂的图片，后面显示alt的文本内容
3 width：规定图像的宽度
4 height：规定图像的高度
5 title：鼠标悬停在图片上给予提示
如果高度或者宽度只设置了一个，那么这个图片就会等比例缩放
如果宽高都设置了，与原图片的比例不一致，这个图片就会被拉伸
路径src
绝对路径，绝对路径是电脑的盘符存储与访问的具体地址
相对路径，两者相对关系，两者在同⼀路径下可以直接访问
1 ⼦级关系: /
2 ⽗级关系: …/
3 同级关系: ./
网络路径，具体的⽹络地址
超文本链接a
HTML使用标签 <a> 来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
超链接属性
在标签 <a> 中使用了 href 属性来描述链接的地址
默认情况下，链接将以，以下形式出现在浏览器中：
1 一个未访问过的链接显示为蓝色字体并带有下划线。
2 访问过的链接显示为紫色并带有下划线。
3 点击链接时，链接显示为红色并带有下划线。按住不松手是红色
后期我们会通过CSS样式修改掉这些效果
超链接表现
当鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手
超链接之锚点href#id
超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。跳转到当前文档的某个部分的形式就是“锚点
类似哔哩哔哩首页的页面，两侧有视频推荐。点击某一类视频的时候，就会把当前的页面跳转过去，就是上下滑动。
锚点实现方式
<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>
a标签是超链接，在href后面写#号，后面跟想要跳转元素的id值。回到页面之后，点击超链接，就可以跳转过去了
可以成对出现，实现来回跳转的功能
文本
常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇
有序列表ol
有序列表
有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li> 标签。
就是整个列表，需要使用ol包住，每一个列表元素需要使用li包住
<ol>
<li>第一项元素</li>
<li>第二个</li>
</ol>
在页面显示的时候会自动生成序号
type属性<ol> 的属性type 拥有的选项
有序列表嵌套
列表是可以进行嵌套的
<ol>
<li>111</li>
<li>
<ol>
<li>1.1</li>
<li>1.2</li>
</ol>
</li>
<li>222</li>
</ol>
无序列表ul
无序指的是没有序号
在有序列表的序号位置是一个小黑点
使用方式和有序列表一样，但是ol变成ul了
无序列表也可以像有序列表嵌套，方式也一样
自定义列表
有三种标签：dl,dt,dd
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
作为了解即可，其他列表也可以实现这个效果
表格table
表格在数据展示方面非常简单，并且表现优秀
有border属性的时候，可以清晰的看到页面设计。如果没有border属性，可以利用表格的对齐方式，设计页面布局
行、列、单元格
单元格特点：同行等高、同列等宽
整个表格需要用table标签包裹，每一行元素需要用tr包住，每一行里面的每一列要用td包住
实际上效果不大，都可以使用普通表格加CSS设计出来
<table>
<caption>表格名字</caption>
<thead> 表格头部，首行
<th>姓名</th> 特殊单元格，其实没什么
<th>年龄</th>
</thead>
<tbody> 表格身
<tr>
<td>张三</td>
<td>30</td>
</tr>
</tbody>
<tfoot> 表格尾部
<tr>
<td>李四</td>
<td>20</td>
</tr>
</tfoot>
</table>
表格属性
单元格特点：同行等高、同列等宽
单元格的长宽都需要跟他所在的行列对齐，所以设置宽度，就是设置这一列的宽度。设置单元格高度，就是设置这一行的高度。
属性很多，根本记不住，有个概念即可，到时候回来看看就够了
单元格合并
水平合并：colspan
垂直合并：rowspan
合并几个单元格，就写数字几。虽说是合并单元格，不如说是把当前的单元格做拉伸。
如果不修改单元格的数量，因为一些单元格做了调整，剩下的单元格都会被迫让步，并不会消失覆盖，就有很多单元格相对于原表格来说突出来了。
为了表格美观，还需要对一些单元格进行删除。
一个单元格如果被别的单元格拉伸所影响，这个单元格只会不断的向右移动。比如，一个单元格，受到了上一行单元格的拉伸，这个单元格就会向右移动。
水平合并和垂直合并可以同时使用
<table align="center" border="1" width="500px" height="200px" cellspacing="0">
<tr>
<td colspan="3">单元格1单元格2单元格3</td> 把单元格1.1横向拉伸3格，原本的1.2和1.3单元格需要删除
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td rowspan="2">单元格6-11</td>
<td>单元格7</td>
<td rowspan="3">单元格8</td>
<td colspan="2" rowspan="2">单元格9</td>
</tr>
<tr>
<td>单元格10</td>
</tr>
<tr>
<td>单元格11</td>
<td>单元格12</td>
<td>单元格13</td>
<td>单元格14</td>
</tr>
</table>
表单Form
主要是实现用户输入，保证网站的交互性
表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件
格式：<form action="url" method="get|post" name="myform"></form>
属性说明
对于现阶段来说，不与服务器交互，这些网络属性没啥用
form表单是一个容器，不放控件，这个表单看不到
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮
就是输入框和按钮
input标签
就是输入框，需要使用input标签，同时typr属性需要是text
有name属性，与服务器交互的时候使用
密码字段字符不会明文显示，而是以星号或圆点替代
需要有一个value属性，也就是告诉服务器用户选择了哪个选项
使用name属性，把独立的单选按钮按照name的值，组合成一个选项组，没有name属性，单选按钮就变成了普通按钮
必要的属性：name区分这个选项是哪个组的，value
定义文件选择字段和 “浏览…” 按钮，供文件上传
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
属性有value，value的值/内容，会显示在按钮上面
定义重置按钮（重置所有表单值为默认值）。就是清空输入框
也可以使用value把重置按钮的文字内容修改
请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情
不再是input标签了，是button标签
是独立的标签，可以在表单外面。任意一个地方都可以。就是一个按钮。
把文本内容写在标签里面，就可以直接显示在页面的按钮上了，不需要使用value属性
定义图像作为提交按钮。就是把一个图片作为一个按钮
下拉列表，就是提供多个选项的，显示一个那种。需要使用select包住，option是创建选项的。optgroup可以创建选项组，比如几个选项是一组，这个组可以显示在下拉式列表里面，但是这个组不能被选择，只能选择选项。
有选项组的时候，是select包住optgroup，optgroup再包住选项option
选项组optgroup，需要使用属性label，显示选项组的名称
选项想要显示文本，直接写在option中间就可以
可以容纳无限文本内容，使用属性cols和rows控制这个多行文本框的大小。最好的方式还是使用CSS的width和height
没有任何特殊效果，但是有一个for属性，使用label的for属性可以绑定其他的控件
在其他元素中设置id属性，然后把id的值交给label的for属性。我们在点击label文本的时候，就会自动跳转到for绑定的元素。
如果for绑定的是按钮，点击label的时候就是勾选按钮。如果绑定的是输入框，点击label的时候，就是点击了输入框，可以直接输入信息
HTML5新增type属性
在提交表单的时候，自动验证这个email类型的输入框文本是不是邮箱类型，比如必须包含@符号
检查这个标签里面填写的文本是不是一个网址。
就是一个正常的输入框，但是在输入框的末尾有一个×，点击这个符号的时候，就会清空输入框，只对那一个输入框有效
类似在哔哩哔哩查找视频的时候，输错了内容，需要把内容全删，重新输入，这时候有了叉，就可以直接清空了
这个标签，没有任何提示，输入非数字内容也可以提交。没有效果。
这个标签就是一个拾色器，点击这个标签，就会打开一个拾色器窗口。显示颜色的RGB
定义输入数字的区间。这个标签会自动生成选项，类似下拉式列表，列表里面是纯数字。通过属性min和max控制数字的区间大小。用户可以点击输入框右侧的上下箭头选择数字。
如果用户直接输入数字，就可以跳过这个限制。
定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
是一个拖动条，用户可以随意拖动，背后是代表数值。类似播放音乐的音量，可以随意拖动。
使用下面的属性来规定限制：
max : 规定允许的最大值。
min : 规定允许的最小值。
step : 规定合法数字间隔。
value : 规定默认值。就是拖动条的按钮一开始所在的位置
点开这个标签的时候，弹出一个类似日历的窗口，然后让用户选择日期
刚刚的日期点开后，可以选择的是月份。就是没有几号了，只能选择这一年中的几月。
选择日期的周，使用率很低
HTML5新增常用属性
就是打开这个页面的时候，自动点击的控件。比如百度网页，打开百度的时候，自动点击搜索框。
只需要在控件中，加入autofocus属性就行
就是输入框的提示内容，比如，登录界面告诉你这个输入框可以填写什么内容，手机号，邮箱，或者qq号。这种提示内容。
鼠标选中这个输入框的时候，提示信息还有，但是一写文本，提示自动消失。
输入框不能为空，为空的时候，不让提交，类似之前设计登录界面的时候对各种输入框进行判空操作。
在想要添加判空条件的输入框加上这个属性就可以。
实体字符
就是关键字，比如大于小于号，在html网页中是特殊符号。
想要输出他们到网页上，不能直接写。需要使用别的符号代替
大小写不能忽略
前面是实体符号，后面是实体编号，效果一样
块元素与行内元素/内联元素
在页面中独占一行，垂直排列
可以设置长宽
块元素可以包含块元素和内联元素
常见块元素：div,form,h1~h6,hr,p,table,ul等
在页面中只占自身的大小，长宽设置无效
内联元素只能包含内联元素
常见内联元素：a,b,em,i,span,strong等
一般使用CSS设计样式，宽高什么的
容器元素div
主要是作为页面划分的容器，一种布局工具
通过CSS设计布局大小和样式,在css里面设计宽高的时候,可以使用%,占全屏的多少
HTML5新增布局标签
HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟 （W3C） 完成标准制定
在 HTML5 出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫SEO对我们页面的爬取。为了解决上述缺点， HTML5 新增了很多新的语义化标签
因为是新增标签，在老版本的浏览器上不能使用这些标签。也就是兼容性不好，对于用户量很大的网站，比如购物网站，只能采用老的办法去设计布局
常见新增标签：
视频音频
HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。
视频
Video标签定义视频，比如电影片段或其他视频流
因为老旧浏览器不支持这个标签，可以在video标签里面提醒用户一下。
<video >您的浏览器不支持视频播放</video>
当用户不能正常使用这个标签的时候，就会显示这段话。
属性：
在谷歌浏览器想要使用自动播放功能，必须搭配muted静音播放
设置宽高的时候，如果只设置一个长或宽，视频会等比例缩放。
如果宽高都设置了，这个视频会按照最长边缩放，其余部分用空白补全
音频
Audio 标签定义声音，比如音乐或其他音频流
属性：
source
因为浏览器对视频或者音频的解码方式不同，所以有了这个标签
这个标签要在视频或音频标签里面
<audio controls>
<source src="horse.ogg" > 视频解码格式
<source src="horse.mp3" >
</audio>
HTML5新增标签
使用率比较低，了解即可
就是给一个正常的图片下面写描述
<figure>
<img src="img.gif" alt="figure标签"title="figure标签" /> 图片资源
<figcaption>figure的标题</figcaption> 图片的描述
</figure>
用于描述文档或文档的某个部分的细节，类似于下拉列表
就是一个详情按钮，点开的时候，可以展示一些东西，文本等等
具有一个open属性，有这个属性的时候，我们想要展示的内容自动打开。也可以手动关闭。
用于包裹一些内容，高亮背景
类似拖动条
<meter min="0" max="100" value="81" low="20" high="80"></meter>
参数：
progress 进度条
datalist 配合input构成下拉列表的效果
canvas 定义图标，盛放图形等内容
CSS
文件的后缀名是.css
如果是在html文件里面设计css样式，就不用创建css文件了
css就是一个皮肤修改器，对网页中已有的标签进行样式的设计
我们通过各种属性设计的样式就是声明
CSS的引入方式
一般是这几种样式混合使用,允许混合使用
内联/行内样式
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性
比如:<p style="background: orange; font-size:24px;">CSS<p>
内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表
<head>
<style>
h1 {
background: red;
}
</style>
</head>
外部样式（推荐）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。 link 标签在（文档的）head头部
<link rel="stylesheet" type="text/css" href="xxx.css">
type代表是css文件,文件格式
href是css文件路径
rel代表外部样式表
导入式
此种方式使用率比较低,因为会影响加载速度
<style type="text/css">
@import url("css文件路径");
</style>
@import和link的区别
@import 是 CSS 提供加载样式的一种方式，只能用于加载 CSS 。 link 标签除了可以加载 CSS外，还可以做很多其它的事情，比如定义 rel 连接属性等
加载顺序的差别。当一个页面被加载的时候， link 引用的 CSS 会同时被加载， @import 引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显
兼容性的差别。
@import 在 IE5 以上才能识别，而 link 标签无此问题
使用 dom 控制样式时的差别。当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为 dom 操作元素的样式时，用 @import 方式的样式也许还未加载完成
使用 @import 方式会增 HTTP 请求，会影响加载速度，所以谨慎使用该方法
就是别用导入式就完了,用外部样式就可以
CSS特征
继承性
指被包含在内部的标签可以拥有外部标签的样式，比如：text-、font-、line-height，但有些属性不能继承，比如：border、padding、margin
我们在设计样式的时候,一般对容器设置,容器里面的标签也可以使用容器的样式,容器的样式也不是全都可以直接拿来用,所以有了继承性的概念,有的样式可以被拿来直接使用,有的不可以
层叠性
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。
例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果
优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式
行内样式>内部样式（外部样式）
内部样式和外部样式优先级一样，写在后面的生效
CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它
CSS注释以 /* 开始, 以 */ 结束,
/* 这是注释 */
CSS选择器
主要作用: 选择哪些标签,设计什么属性
全局选择器*
可以与任意选择器匹配,优先级最低,不推荐使用.也叫通配符,所有元素都生效
一般用于初始化操作,比如网页预留的内边距和外边距
*{
margin=0;
padding=0; 清空浏览器默认的边距
}
对于所有的标签元素来说,都有一个默认的边距,可以使用这个初始化操作,把所有的标签边距归零
元素选择器
class类选择器 (最常用的)
规定用圆点 . 来定义，针对你想要的所有标签使用
<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
width:800px;
}
只要给这个标签设置一个class属性,然后在css里面使用点+class值的方式,就可以对某个标签进行设计
而且这个类选择器是通用的,按照class属性设计的样式,可以给任何含有这个class属性相同的任何标签进行使用.
我们一开始只给一个p标签设计了class属性,拿着他的值进行设置,后面又创建了一个h标签,感觉p的设计很好,直接给h标签添加这个class属性就可以了.这个p标签和h标签共用一个类选择器.
class属性的特点
ID选择器
针对某一个特定的标签来使用，只能使用一次。 id后面的属性值,只能出现一次.
css 中的 ID选择器 以 #来定义
<h2 id="mytitle">你好</h2>
#mytitle{
border:3px dashed green;
}
ID是唯一的
ID不能以数字开头
合并选择器
选择器的优先级
div+css布局 布局的重要性
优点
布局时常用的属性
布局
float的默认是垂直摆放,float=left是水平靠左摆放，float=right是水平靠右摆放
CSS常用属性
字体属性
CSS字体属性定义字体，加粗，大小，文字样式
div{ color:red;} 直接写英文单词
div{ color:#ff0000;} 用十六进制，常用的
div{ color:rgb(255,0,0);} 用rgb值，颜色取值范围是0-255
div{ color:rgba(255,0,0,.5);} rgba的a代表透明度，a的取值范围是0-1，0是完全透明，1是完全不透明
一般美工，或者设计师会给你十六进制的颜色取值。按照美工的设计去编写前端页面
h1 {font-size:40px;}
p {font-size:14px;}
chrome浏览器接受最小字体是12px，再小就小不了了
如果确实有再小的字体要求，还有特殊方法实现
div{font-weight:bold;}
p{font-weight:900;} 常用数值取值
font-style 文本的字体样式
font-family 指定一个元素的字体
每个值用逗号分开，如果字体名称包含空格，它必须加上引号
font-family:"Microsoft YaHei","Simsun","SimHei";
可以一次性设置多个字体，浏览器按照从左到右去使用，第一个不支持就第二个字体，以此类推
背景属性
CSS背景属性主要有以下几个
background-color 设置背景颜色
background-image 设置背景图片
background-color 背景颜色
<div class="box"></div>
.box{
width: 300px;
height: 300px;
background-color: red;
}
和字体颜色的取值方式一样
在网页中显示图片的方式有两种：1. 使用img标签 2. 使用背景图片
元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分
<div class="box"></div>
.box{
width: 600px;
height: 600px;
background-image: url("img1.jpg");
}
因为是背景图片，我们还可以写文字内容，文字内容会浮现在图片上面。
如果使用的是img图片，就不可以直接写文字在图片上面。
这个是不改变图形大小，只是把有空余的地方使用图片填充。不缩放图片
.box{
width: 600px;
height: 600px;
background-image: url("img1.jpg");
background-repeat: no-repeat;
}
.box{
width: 600px;
height: 600px;
background-image: url("img1.jpg");
background-size: 100% 100%;
}
如果使用了length设置了长宽，图片的格式不一致，就会按照设置的长宽进行拉伸。如果只设置了一个长度，就会按照哪个长度对图片进行等比放大。多余的地方不显示。
.box{
width: 600px;
height: 600px;
background-image: url("img1.jpg");
background-position: center;
}
background-attachment 固定或者随页面滚动，正常是scroll
background 在一个声明中设置所有的背景属性。不利于初学者掌握
background-image、background-repeat、background-position其中background-size单独书写
就是第一个值代表图片，第二个值是重复方式，第三个是起始位置
.box{
width: 600px;
height: 600px;
background: url("img1.jpg") center scroll; 融合了
background-size: 100% 100%;
}
文本属性
控制文本显示效果
text-decoration:none;去除超链接的下划线
text-align 水平对齐方式
text-decoration 下划线、上划线、删除线
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
text-transform 大小写
captialize 每个单词开头大写
uppercase 全大写
lowercase 全小写
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
p{ text-indent:50px;}
负值是允许的。如果值是负数，将第一行左缩进.就是最左侧的内容被遮盖了
列表属性
line-height 列表字体高度
list-style-type
就跟之前使用列表标签的效果一样，但是这是CSS设计的
ul.a {list-style-type: circle;} ul.b {list-style-type: square;}
使用图像来替换列表项的标记
ul {list-style-image: url('sqpurple.gif');}
list-style-position 指示如何相对于对象的内容绘制列表项标记
inside 列表项目标记放置在文本内
outside 列表项目标记放置在文本外
ul { list-style-position: inside;}
就是列表前面的符号或图片，是否包含在列表项里面
给列表项设置边框，就可以看到列表项前面的符号在不在列表项里面了
可以设置的属性（按顺序）： list-style-type, list-style-position,list-style-image
就跟设置背景属性那个一样，除非特别熟练，否则别用
ul { list-style: none;} 这是唯一的作用，删除列表前面的标记
表格属性
table, td {border: 1px solid black;} 第三个参数是颜色，第二个参数是边框为实线的意思
设置表格的边框是否被折叠成一个单一的边框或隔开
table { border-collapse:collapse; }
就是每个单元格之间有没有空隙，或者说，单元格和表格之间有没有空隙
table { width:300px; height=500px}
属性设置水平对齐方式，向左left，右right，中心center
td { text-align:right; }
垂直对齐属性设置垂直对齐，上top，中center，下bottom
td { vertical-align:bottom; }
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性
td { padding:15px; }
设置这个内边距的时候，不要设置表格整体的大小了，会限制单元格大小的
table, td, th { border:1px solid green; }
这里面的第三个参数就是表格的颜色
td { background-color:green; color:white; }
指定背景颜色background-color
其他常用属性
length 定义字符间的固定空间
h1 {letter-spacing:10px}
字间距可以为负数，就叠在一起了，没有意义
h1 {line-height:30px}
一般是在一个容器里面，对一行文本进行垂直居中操作。比如给一个div设置高度为80px，把这个p标签的行高设置成80px。就是垂直居中了。
overflow 常用auto
white-space 元素内的空白怎样处理
就是在只有一行文本的情况下，超出的部分，会以。。。的形式隐藏
p { white-space: nowrap; 不会换行，以省略号的方式代替 overflow: hidden; 超出部分隐藏 text-overflow: ellipsis; 隐藏的部分用省略号代替 }
这三个属性必须同时使用，互相配合。。。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
img{vertical-align:middle;}
就是当图片和文本混合在一起的时候，文本相对于图片的对齐方式。比如一句话和一个图片，假设图片固定，这句话可以在图片的顶部对齐，也可以在底部对齐，也可以垂直居中对齐。
垂直方向对齐
取值0-1,0表示完全透明，1表示不透明
和字体属性里面的color的rgba的a一样
CSS选择器
关系选择器
回顾一下：
基础选择器
关系选择器分类
后代选择器 选择所有被A元素包含的B元素，中间用空格隔开
比如div p{} 意思是对在div容器里面所有p标签进行设计
也可以使用类选择器搭配后代选择器
<div class="test"><p>111111111</p></div>
可以使用.test p{} 前面的点，是类选择器，后面是后代选择器
因为是后代选择器，那上边的例子来说，是div容器里面的所有p标签都会生效。无论p标签被嵌套多少层。
比如div>p{}
只对与div紧贴着的p标签生效。如果p标签被嵌套在内层，就没有效果
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素
在同一容器里面有很多标签，比如a标签和p标签
使用相邻兄弟选择器，就是设计a标签后面的第一个p标签有效。其余的无效
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开
a标签后面的所有p标签都有效。a前面的p标签无效
伪类 选择器
同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示
对于网页中的超链接，如果是没有点击过是蓝色，鼠标按住不松手是红色。点击之后是紫色
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是橘色*/
a:visited{
color:orange;
}
/*鼠标悬停，放到标签上的时候是绿色*/
a:hover{
color:green;
}
/*鼠标点击链接，但是不松手的时候是黑色*/
a:active{
color:black;
}
记住，在css中，这四种状态必须按照固定的顺序写。如果不按照顺序，那么将失效。“爱恨准则” love hate 。必须先爱，后恨。
悬停和激活适用于所有标签
激活操作一般用在按钮上面
匹配其父元素中的第一个子元素
li:first-child{background:yellow;}
类似相邻兄弟选择器
匹配父元素中最后一个子元素
p:last-child{background:#ff0000;}
匹配父元素中的第 n 个子元素，元素类型没有限制. n 可以是一个数字，一个关键字
奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数odd或偶数even（该索引的第一个子节点是1）。 在这里，我们为奇数和偶数p元素指定两个不同的背景颜色
一般是奇偶选择，倍数选择
p:nth-child(odd){ 把odd换成2，就是第二个 background:#ff0000; } p:nth-child(even){ background:#0000ff; }
属于父元素中唯一子元素的元素.
就是在多个容器里面有不同数量的标签。唯一子元素，指的是在一个容器里面只能有一个设置的子元素。这个子元素才会生效。
比如，下面的这个。在div容器里面只有一个p标签的p标签才会生效
div p:only-child{ background:#ff0000; }
没有任何子级的元素（包括文本节点）
空的p元素的背景色p:empty{background:#ff0000;}
假设有很多个p标签，有的p标签里面有内容，有的p标签是空的。这个选择器就可以对空的p标签进行设计。
任何内容都不行，空格也不行。
为每个并非 p 元素的元素设置背景颜色
:not(p){ background:#ff0000;}
就是输入框，因为想要在输入框打字，就需要点击一下输入框，俗称把页面的焦点转移到输入框。
因为输入框可以有很多个，我们可以对用户正在输入的输入框进行选择。比如对选中的输入框修改背景颜色等等
就是选中哪个按钮，哪个按钮就可以应用样式。
伪对象/伪元素选择器
before，after 选择器在被选元素的“内容”前面或后面插入内容，用来和content 属性一起使用。
虽然 E:before/after 可转化为 E::before/after ，但是你写伪元素是要规范，用两个冒号
ul::before{ content:"这是ul的伪元素"; color: blue; } ul::after{ content:"这是之后的伪元素"; }
就是在不修改已经设计好的样式的情况下，在原来的基础上增加内容。
就像之前学习的类方法，或类属性。在类创建完之后，还有别的方法再次添加方法或属性。
属性选择器（了解即可）
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id属性
为带有 target 属性的 a 元素设置样式
a[target]{ background-color:yellow;}
a标签是：<a href="#" target="_blank">
为 target=“_blank” 的 a 元素设置样式
a[target=_blank]{background-color:yellow;}
选择 titile 属性包含单词 “flower” 的元素，并设置其样式
[title~=flower]{ background-color:yellow;}
因为在给标签添加属性的时候，可以添加多个属性值，比如class="test lll"等等
这个是含有某个属性值就可以
该值必须是整个单词，比如 lang=“en” ，或者后面跟着连字符，比如 lang=“en-us”，这个-是一个分隔符。en-us实际是两个单词en和us
选择 lang 属性值以 “en” 开头的元素，并设置其样式
[lang|=en]{ background-color:yellow;}
en是一个独立的单词，完整的单词
和上面的效果一样。但是这个要求更松，不需要-来分隔单词了。只要属性值开头能匹配上就行。
刚刚是匹配开头单词，现在是匹配结尾
这回是含有指定单词就可以了，不论开头结尾或中间
CSS盒子模型
在网页的设计和布局使用
它包括：外边距（margin），边框（border），内边距（padding）
之前使用的border：10px solid red； 这三个参数，分别是：厚度，线的形状，边框的颜色
内容区域（Content）
Content内容区域包含宽度（width）和高度（height）两个属性
块级元素默认宽度为100%，行内元素默认宽度是由内容撑开，不管块级元素还是行内元素，默认高度都是由内容撑开
块级元素可以设置宽高属性，行内元素设置宽高属性不生效
宽度（width）和高度（height）可以取值为像素（px）和百分比（%）
就是不设计盒子模型。可以直接往里面放置内容，盒子的大小由内容决定。产生了一个问题，必须把内容对齐，或者说内容一致才可以。不然从整体来看，由于内容不一致，盒子就会大大小小的，不美观。就需要手动设置宽高。
一般是在移动端使用百分比。pc端使用px像素。
设计盒子大小的时候必须写单位。
内边距（Padding）
边框与内容之间的空间，即上下左右的内边距
内边距在设置大小的时候，一般使用像素来设置，就可以通用全部的屏幕了
在CSS中，它可以指定不同的侧面不同的填充
简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。这就是所谓的简写属性。所有的填充属性的简写属性是 padding
Padding属性，可以有一到四个值
顺时针，上右下左
padding:25px 50px 75px 100px; 顺序：上 右 下 左
padding:25px 50px 75px; 顺序：上 (左右) 下，不常用
padding:25px 50px; 顺序：上下 左右
padding:25px; 顺序：所有方向
Padding需要注意的问题：会撑大容器
边框（Border）
CSS边框属性允许你指定一个元素边框的样式和颜色
有三个属性：边框样式border-style，边框宽度border-wdith，边框颜色border-color
C3新特性：边框圆角效果border-radius 取值是0%-50%.也可以是px
边框样式属性指定要显示什么样的边界
border-style属性用来定义边框的样式
border-style ：dotted点边框 dashed虚线边框 solid实线边框 double双层实线边框
通过 border-width 属性为边框指定宽度，单位是px
border-color属性用于设置边框的颜色
border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式
在CSS中，可以指定不同的侧面不同的边框
上边 border-top: 1px solid red;
下边 border-bottom: 1px solid red;
右边 border-right: 1px solid red;
左边 border-left: 1px solid red;
border 属性中设置
border : border-width border-style(必写项) border-color;
border-style:dotted solid double dashed; 顺序：上 右 下 左
border-style:dotted solid double; 顺序：上(左右) 下
border-style:dotted solid; 顺序：上下 左右
border-style:dotted; 顺序：所有方向
外边距 （margin）
CSS margin(外边距)属性定义元素周围的空间。不会增加自身大小，只是把元素之间分开。
取值
单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。所有边距属性的简写属性是 margin
margin属性可以有一到四个值
margin:25px 50px 75px 100px; 顺序：上 右 下左
margin:25px 50px 75px; 顺序：上 (左右) 下
margin:25px 50px; 顺序：上下 左右
margin:25px; 顺序：所有方向
外边距合并问题
垂直方向上外边距相撞时，取较大值
就是两个盒子都存在外边距的时候，两个外边距不会累加，而是取两个容器外边距最大的值。
是两个盒子之间的外边距。不是四周
怪异盒模型(IE盒子模型)box-sizing: border-box;
是IE老版本的盒子模型
在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)
盒子总宽度/高度=width/height +margin
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素
box-sizing: content-box; 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框
box-sizing: border-box; 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
即 box-sizing 属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为怪异盒模型
一般怪异盒模型用在页面已经设计好了，不想让新增的容器破坏页面布局，就可以使用这个模型。
怪异盒模型的特点就是不会撑大容器
主要应用在移动端。
弹性盒子模型（flex box）
弹性盒子是 CSS3 的一种新的布局模式，新版本才有。
CSS2是旧版本。CSS3是新版本。C3新增：圆角效果，弹性盒子模型。
CSS3可能存在兼容性问题。
CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
主要应用在移动端。。。。。。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
默认弹性盒里内容横向摆放
.flex-container { display: flex; width: 400px; height: 250px; }
父元素上的属性
display 属性
flex-direction 弹性子元素在父容器中的位置
justify-content 属性 水平对齐方式
flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）
space-between 弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）
一般不用最后两种，使用第三种和margin属性就够了
align-items 垂直方向对齐
子元素上的属性
经常用在移动端
设置的子元素宽度就失效了
宽度失效。
.flex-item2 { height: 150px; background-color: green; flex-grow: 2; 权重 } .flex-item3 { height: 150px; background-color: blue; flex-grow: 1; 权重 }
浏览器内核
浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染（显示）网页。
渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同
一些较新的css3特性，需要添加以上前缀兼容每个浏览器
.box{ flex: 1; -ms-flex: 1; -moz-flex:1; -webkit-flex:1; } .root{ display: flex; display: -ms-flex; display: -moz-flex; display: -webkit-flex; 全都写上，可以让浏览器自动选择 }
浮动和定位
Dispaly属性
display 可以修改元素的类型，让块级元素和内联元素相互转换
可以隐藏元素
块级元素可以设置宽高，行内元素不可以设置宽高。但是给行内元素设置display属性为block，就可以设置宽高了。并且变成了上下摆放。
只有块级元素才是上下摆放。就是独占一行的定义。
也可以给块级元素变成行内元素，设置display是inline
行内块元素，是可以设置大小，且横向摆放
文档流（排列方式）
就是标签的排列方式
例如：块元素自上而下摆放。内联元素，从左到右摆放
标准流里面的限制非常多，导致很多页面效果无法实现
当文本内容和图片在一个容器中时。会出现高低不齐的情况，图片总是比文本大一些。默认效果是文本和图片的底部对齐。很丑。
如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！脱离标准流！
脱离文档流
使⼀个元素脱离标准文档流有三种方式
浮动
float 属性定义元素在哪个方向浮动，任何元素都可以浮动。
left 元素向左浮动
right 元素向右浮动
脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象
当所有元素同时浮动的时候，会变成水平摆放，向左或者向右
当容器不足以横向摆放内容时候，会在下一行摆放
可以把两张图片之间的空隙删除，紧密贴合
浮动默认横向摆放，放不了就往下放
清除浮动
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动
浮动元素会造成父元素高度塌陷。
后续元素会受到影响
解决方案有很多种
一般是同时写两个方案：overflow:hidden;clear: both;
定位
position 属性指定了元素的定位类型
脱离文档流的有绝对定位和固定定位
设置定位之后：可以使用四个方向值进行调整位置： left、top、right、bottom
.box{ width: 200px; height: 200px; background-color: red; position: relative; 一个启动相对定位的开关 left: 100px; top:100px; }
启动相对定位之后，可以之间使用上下左右了，但是实际效果是相反的，使用左+像素单位，是往右移。其他的也一样，写上+距离，是往下移动。
是设定的元素距离父级容器边框的绝对位置，如果是左100px，就是距离父级容器最左边100px，在左上角。如果是right100px，就是距离最右边100px，在右上角。如果是下100px，就是距离底部100px，在底下排列
会随着页面的滚动而发生变化
和相对定位一样，也有上下左右四个方向
和绝对定位的设置方式一样，但是固定定位跟盗版网站的广告一样，会一直在页面的某个位置，不会随着页面的滚动而消失。就像小说网站的目录一样，一直在页面的左侧保持不动
设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档
想要定位跟着父级容器移动，父级容器也要设置定位模式。如果所有的父级容器都没定位，就会根据页面去移动。
固定定位只根据页面定位，无论父级有没有定位模式。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
只有脱离文档流的元素才有堆叠顺序，也就是绝对位置和固定位置可以使用
.box1{ width: 200px; height: 200px; background-color: red; position:absolute; z-index: 2; } .box2{ width: 300px; height: 300px; background-color: green; position:absolute; z-index: 1; 图层是第一层 }
定位实操-下拉列表效果
当鼠标移动到导航位置的时候，出现一个列表，可以再次选择。
就像在电影网站里一样，鼠标移到某个分类，然后这个分类还能再次选择种类
思路：
- 一个div容器存放导航列表
- 列表项由一个超链接和一个div容器构成
- div容器设置宽度100%，脱离文档流，使用绝对定位。调整左边框位置left=0；设置隐藏效果
- 使用li:hover>div 使用子代选择器，当鼠标移动到列表项的时候，就使用设计。解除隐藏效果
.nev ul li:hover>.nev-list{ 当列表项上有鼠标悬浮，就触发设计
display: block; 取消隐藏
}
.nev-list{
width: 100%;
height: 200px;
position: absolute;
left: 0;
display: none; 默认隐藏效果
}
定位实操-图片上面定位文字
在图片上面显示文字，就像你收到消息的时候，手机应用图标上那个小红点
.product-sign {
position: absolute; 脱离文档流
top: 30px; 定位
left: 30px; 定位
display: block; 块级元素
width: 60px;
height: 60px;
line-height: 60px; 垂直居中
color: #fff;
font-size: 16px;
text-align: center; 水平居中
border-radius: 50%; 圆角效果
background-color: #ff64a6;
}
定位实操-照片墙
用到了C3的新特性，动画里面的旋转：transform：rotate(deg) deg是角度，顺时针十度就是10deg，逆时针十度就是-10deg
先定位才可以旋转
CSS3新特性
圆角 border-radius
使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”
可以设置百分比，0-50%，0是直角效果，50%是圆。
也可以使用像素，0-50px，0是直角，50px是圆。
阴影
盒阴影 box-shadow 向框添加一个或多个阴影。
语法：box-shadow: h-shadow v-shadow blur spread color inset;
三个方向的阴影效果
四个方向阴影效果
如果阴影效果不明显，使用第四个参数spread，设置阴影的尺寸。单位px
盒阴影是阴影效果向盒子外模糊。
内阴影效果 阴影向盒子中心模糊。
box-shadow: 0 0 5px 5px red inset;字阴影 text-shadow 属性向文本设置阴影
语法：text-shadow: h-shadow v-shadow blur color;
背景渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
为了创建一个渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）
语法：background: linear-gradient(direction, color-stop1, color-stop2, …);
使用background属性，使用linear-gradient处理。第一个参数是方向，后面是颜色节点
不给方向的情况下，默认是从上到下
还可以是对角渐变，因为是上下左右四个方向。使用任意相邻的两个方向，就可以实现对角效果。右下角to right bottom。
使用角度
之前学的图片上的标签，图片上面定位文字，实现渐变。background: linear-gradient(120deg,#ff3149,#ff64a6);
转换（变形)transform
转换的效果是让某个元素改变形状，大小和位置
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
2D
.box { width: 100px; height: 80px; transform: translate(50px, 100px); }
就是把当前元素重新找个地方放。两个参数是偏移量。
.box { width: 100px; height: 80px; transform: rotate(30deg); }
就是之前实现照片墙的操作。把一个元素进行旋转。
就是对xy轴进行乘法运算。
之前学浏览器字体设置的时候，知道默认最小字体是12px，说还可以小，需要使用特殊方法，说的就是现在。
缩放实现将Chrome默认12px缩小为6px。
p{font-size: 12px; transform: scale(0.5);}
.box { width: 100px; height: 80px; transform: skew(30deg,20deg); }
3D
CSS3 允许您使用 3D 转换来对元素进行格式化
向屏幕里面旋转，从上面往后倒的那种感觉，就是元素倒向屏幕后面。
rotateY() 是从左往里面旋转
translate3d(x,y,z)
过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
通过过渡 transition ，可以让web前端开发人员不需要 javascript 就可以实现简单的动画交互效果
.box {
width: 100px;
height: 80px;
background-color: rgba(255, 0, 0, .8);
transition: width 2s ease 1s; 过渡设置 ，这里是改变宽度。如果想改变多个属性，比如高宽，就需要使用all
}
.box:hover{ 当鼠标悬浮时，下面的设置生效
width: 500px; 改变宽度的范围
}
上面这个代码实现的效果是，当鼠标悬浮到元素上时，等待1秒，元素宽度开始增大，增到500px，耗时两秒。一共耗时3秒。
当我们把鼠标移开的时候，也会耗时2秒，宽度从500变成100；
想要实现多个效果，同时改变宽高，需要使用transition: all 2s ease 1s; 使用all，可以实现多个属性发生改变。
就是我们之前写伪类属性的时候，比如鼠标悬浮操作等等。都是瞬间的事，有了这个过渡效果，是放慢了变换的速度。
transition的参数，至少有第一个参数，作用的元素。还有过渡时间，就是第二个参数。
动画
跟过渡的效果一样，但是更加灵活。可以调整的地方更多
过渡就是一种简单的动画。
动画是使元素从一种样式逐渐变化为另一种样式的效果
可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
过渡只能由一种状态变成另一状态。只能变化一次。而动画可以多次变化。
创建完动画之后，记得加上执行动画操作。
.box{
animation: anima 5s linear 5s infinite;
}
@keyframes name {
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}
name：动画名称，开发人员自己命名；
percent：为百分比值，可以添加多个百分比值；
animation执行动画
语法：animation: name duration timing-function delay iteration-count direction;
timing-function的参数
direction参数
绘制特殊图形
制作三角型使用的是border属性，内容区宽高值为0。
就是设置一个盒子，宽高都是0.只设置边框的颜色和边框厚度。还有边框设计是实线。
如果设计了四个边框，就会发现是四个直角三角形合成一个正方形。因此想要绘制三角形，只需要保留一条边即可。又因为一个多边形不能只存在一条边，所以把其他三个方向的边框颜色设为透明，既保留了边框，也不会妨碍绘制图形。
透明颜色是 border-right: 50px solid transparent;
绘制三角型时宽和高都是0像素，给它加100的宽度看看效果
媒体查询（适配屏幕）
媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式
就是根据用户的屏幕去分配样式。
使用设备的宽度作为视图宽度并禁止初始的缩放。在 head 标签里加入这个meta标签。
在新建一个html文件的时候，会加载一些初始框架，在head框架里面，有一下参数
<meta name="viewport" content="width=devicewidth, initial-scale=1,maximum-scale=1, userscalable=no">
媒体查询语法
@media screen and (max-width: 768px) {
/* 设备小于768px加载样式 */
body{
background-color: red;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
/* 设备小于768px但小于992px加载样式 */
body{
background-color: pink;
}
}
@media screen and (min-width: 992px) {
/* 设备大于992px加载样式 */
body{
background-color: green;
}
}
这是三个屏幕规格，设计了三个不同的样式body。
响应式布局-媒体查询的思维
本意是，让一套代码在多个设备同时显示
而且在不同的设备上显示不同的样式
就是在设计好网页布局之后，在style下面再写一个style，使用meta标签识别屏幕大小，然后隐藏一些元素，就是使用display隐藏。网页就是display显示
目前标准是：手机屏幕768px，平板768-992，笔记本992-1240，大屏1240以上
栅格系统
把元素做成单元格的形式，设置盒子属性，根据不同设备，一行显示几个单元格。手机屏小一行就显示一个元素，平板是一行3个，笔记本电脑是一行6个，大屏幕是一行12个
需要引入CSS样式
多列
可以将文本内容设计成像报纸一样的多列布局
雪碧图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去
字体图标
我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题
去网上随便找一个图标库就行。阿里图标库就有很多免费的图标。
优点
使用字体图标
图标太小，使用css设计的时候，如果不生效，看看选择器的优先级顺序
滑动门
当鼠标悬浮到列表的时候，出现一个新的列表展示内容的效果
作者：兆。
