CSS
概念：css（cascading style sheet）-层叠样式表
层叠：css的一个特点，指的是样式覆盖时的处理方式，
样式：页面的外在特征。比如说背景颜色、字体大小、类型、边框大小等。即CSS就是专门用于处理页面样式的。
作用：美化页面。
跟HTML之间的关系：
HTML：书写网页的内容
CSS：对页面进行美化
使用方式：
内联方式：通过<head>中添加<style>标签，并在<style>中书写CSS代码。
外联方式：新建以.css为后缀的文件，在文件李写css代码，在HTML页面通过<link>标签来引入并使用css文件。
特点：将样式代码和HTML代码分离的更彻底，存在不同的文件当中，而且css文件可以在多个HTML页面中使用。
<link href="css文件地址" rel="stylesheet" type="text/css">
代码格式：css选择器{css属性名：属性值；}
style属性：直接在HTML标签里通过style属性来书写css代码。
<p style="color:red;"></p>
所有标签都支持style属性，一般需要最高优先级的时候才用style属性，一般推荐css文件>style标签>style属性
优先级：style属性>style标签>css文件
基础属性：
background-color:设置背景颜色
color：设置文本颜色
font-size：设置文字大小，以px为单位。
border：设置某个标签的边框。
margin：处理标签之间的距离。
背景：
background-color:设置背景颜色,
background-image：设置某个标签的背景图片，
background-image：url（图片地址）；
background-repeat：设置背景图片是否允许重复，
background-repeat：repeat/no repeat/repeat-x/repeat-y。
background-size：设置背景图片是否拉伸，
background-size：cover 拉伸 。
background-size：contain 尽可能让整张图片尺寸和标签的尺寸贴切，但不会超出标签的宽高。
文字：
font-size：设置文字大小；
text-align：设置某个标签内部内容的对齐方式，left、center、right，默认left。
text-decoration：设置超链接的字体样式，
text-decoration：underline/none/line-through。
font-family：设置文字的字体类型，
font-family："微软雅黑"，"宋体"，"黑体"，支持写多个字体，当上一个字体没有找到了，会寻找下一个字体，如果都没有，使用系统默认字体。
font-weight：100~900/bold/bolder 设置字体粗细
line-height：设置某个标签内部文字的行高，行高指一行文字所占的高度。对于行高，一行中的文字始终会显示在行高的中间。
尺寸：
width：设置标签宽度；
height：设置标签高度
列表：
list-style：设置列表样式；
list-style：none/circle
list-style基本是列表专属
将垂直列表变成水平列表：给li设置float：left。
盒模型：
padding：设置内容和边框之间的距离。列表有默认padding，如果要去掉，可以将padding设置为0.
表格：
border-spacing：用于设置单元格之间的空隙，替代cellspacing。
表单：
vertical-align：设置标签的垂直对齐方式，适用于表单元素或img
vertical-align：middle/top/bottom
选择器：
标签选择器：通过标签名，利用css对页面上所有同类标签设置样式。
class选择器：需要给多个标签设置 一样的样式，可以使用class选择器。
.class属性值{css属性名：属性值；}
使用步骤：给要设置一样样式的标签设置相同的class属；写css代码。
id选择器：当需要单独的给某一个标签设置样式时，可以选择使用id选择器。
步骤：先给要单独设置样式的标签添加id属性，属性值随意，不能以数字开头，编写css代码。
伪类选择器：能够根据用户鼠标的行为而改变样式
:link：当页面打开时，超链接的默认样式
:visited：当超链接被点击之后使用的样式
:hover：当鼠标悬停到标签时使用的样式
:active：当鼠标点击 不释放时使用的样式
使用：a:link{}
a:visited{}当超链接被点击后要使用的样式
a:active{}
群组选择器：，
优先级：一般情况下：id>class>标签
对同一个标签用不同的选择器设置了同一个css属性时才会触发优先级
居中问题：
1、水平居中：如果是相对于页面水平居中，需要该标签有宽高，
同时设置margin：0 auto；
目前能页面水平居中的标签：table、ul、ol、dl、p；
标签内部内容水平居中，给标签设置text-align：center；
2、垂直居中：标签内部的 内容进行垂直居中，
给标签设置line-height为标签的高度。只实用于有一行文字
BFC&IFC
FC：
● 概念：指格式化上下文，指页面的某个标签所在区域，每个FC有自己的渲染规则，具体规则分为BFC（块级格式化上下文）和IFC（行内格式化上下文）
●理解：BFC指的是某个标签页面所在的区域，当满足一定条件时，会成为BFC，就具有BFC的特点。
VFC
●特点：
1、 内部的box会在垂直方向，一个接一个地放置。
2、box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
3、 每个元素的左外边缘（margin-left），与包含块的左边（contain box left）相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
4、BFC的区域不会与float box重叠
利用这点，可以实现非浮动元素（bfc）和浮动元素实现同行显示，可以实现三栏式自适应布局。
5、 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。
6、计算BFC的高度时，浮动元素也参与计算。
可以解决浮动子元素的高度塌陷问题。
浮动元素重叠
完成布局（三栏式自适应布局）
● BFC的满足条件（任意一条）：
根元素（body）
float不为none
固定定位或绝对定位
指定的display：inline-block、table-ceil、flex、table-caption
overflow不为visible
IFC
概念：一行区域的渲染规则。确定了一行中里面的行内元素如何进行排列以及对齐。
行盒（line-box）：IFC的所负责的区域，指页面中的一行区域，它的尺寸是由多个css属性共同决定。
IFC决定了行盒里面的行内元素如何排列和对齐。
行盒的尺寸
行盒（line-box）的尺寸是由font-size、font-family、height、line-height来确定。
font-size：
font-size不同的取值会影响行盒的高度。
如果行盒里只有文字。font-size取值越大，行盒的高度越高，那么行盒的高度由最高的font-size来确定。
font-family：
同样的font-size，不同的font-family所造成文字的高度也不同
每个文字都有自己的内容区域高度（content-area），其内容区域高度是由自身的font-family及font-size来共同确定。
如果行盒里只有文字，那么行盒的高度是取最高的文字内容区域高度。
line-height：
设置行盒的高度。
line-height：normal； 表示行盒的高度由文字的内容区域高度来确定，也是默认方式。
line-height：具体数字； 表示行盒的高度是由font-size以及倍数来确定，数字即font-size的倍数。
line-height：具体px；表示行盒的高度是一个具体的值。如果line-height的取值小于文字的内容区域高度，那么实际上行盒高度等于内容区域高度。
vertical-align：设置行内元素的垂直对齐方式。
baseline：默认取值。指以行内元素的基线作为对齐参考线。
top：该元素的顶部和行盒的顶部对齐。
bottom：该元素的底部和行盒的底部对齐。
text-top：该元素的顶部跟父元素的内容区域的顶部对齐。
text-bottom：该元素的底部跟父元素的内容区域的底部对齐。
middle：垂直居中
div
概念：div本身是一个html标签
特点：默认宽度为100%，高度为0
div本身不支持width、height等属性，但可以通过css来设置
语法：<div></div>
应用场景：因为div本身没有过多的自带属性或样式，所以div可塑性很高。同时也是div+css布局的核心。
div+css布局
概念：指利用了div+css技术来对网页进行布局并实现网页的一种布局解决方案。
核心：
div：
css基础
css盒模型
css浮动
css定位
CSS盒模型
概念：在CSS中，将HTML页面上的每个HTML标签都看成一个盒子，可以利用css相关属性来控制这个盒子的尺寸和位置。而我们将这个盒子以及相关的css属性统称为盒模型。
相关css属性：
盒模型尺寸：
width
height
border
padding：标签内部内容和border之间的距离，设置padding之后HTML标签会自动撑大，可单独设置某一条边。
盒模型距离：控制盒子之间的距离（HTML标签之间的距离）
margin：在垂直方向上，盒子之间会有margin重叠现象，之间的距离会显示margin较大的一个。
在水平方向上，盒子之间的距离不会出现叠加现象
盒子总宽度：width+padding（左右）+margin（左右）+border（左右）
CSS浮动：
概念：css浮动是指将多个独行显示的标签可以设成同行显示，本质上是指css属性：float的使用
使用： float：left/right/none
作用：可以把多个独行显示的标签同行显示；当对HTML标签设置float时，该标签就已经变成了浮动标签（浮动元素），它会和其他浮动元素显示在同一行，如果该行宽度容不下浮动元素时，会自动切换到下一行。
当浮动元素遇上非浮动元素，会有一些影响：
1、非浮动元素会认为页面上没有浮动元素，会占用浮动元素原本的空间。
2、如果非浮动元素里有文本，文本会被浮动元素挤下去。
清除浮动：
取消浮动元素队非浮动元素的影响
给受影响的非浮动元素添加一个css属性
clear：both/left/right(清除浮动影响)
对浮动元素设置margin：0 auto；是没有效果的。
CSS定位：
问题：
1、有些HTML会固定在页面上
2、有些HTML标签会显示在页面正中间或特殊的位置
概念：css定位是借助某些css属性来达到可以将任意HTML标签放在页面上的任意位置，同时也可以实现固定位置。
作用：css定位可以帮助我们实现更复杂的页面布局，基本以css盒模型为主，css定位为辅。
css定位相关属性：
position：决定某个HTML标签在页面上的定位模式。
语法：position：absolute / relative / fixed / static
static:静态定位（默认）：HTML标签会按照HTML代码的书写顺序从上往下、从左往右依次进行排列，这种标签排列方式称为“文档流”。
absolute：（绝对定位）：设置绝对定位的HTML标签会脱离文档流，以body或非static定位的父元素为参考标签，配合top、left、right、bottom四个位置属性，能够将该HTML标签放在页面的任意位置。（和其他标签不在同一图层）
fixed:固定定位，特殊的绝对定位，可以固定在页面上。始终以body为位置参考标签。
relative：相对定位，设置了相对定位的标签不会脱离文档流，以原来的位置为参考位置进行移动。
top：HTML标签顶部和body之间的距离
left
right
bottom
应用场景：
1、需要固定在页面上，用固定定位fixed
2、要实现绝对的水平垂直居中，可以使用绝对定位absolute和相对定位relative
3、其他页面位置比较特殊的标签
控制非static HTML标签的层级关系：
使用css属性z-index来控制，确定先显示谁。
z-index：数字；默认为0. 数字越大，说明层级越高，会优先显示。最大支持99。
z-index只针对非static HTML标签有效。
常见操作：
●让img在div中垂直居中：
1、给div设置line-height 为div的高度
2、给img设置vertical-align：mddle
●如何让div中的内容垂直居中：
1、文字或超链接、表单元素：line-height设置为标签的高度
2、图片：line-height、给图片设置vertical-align：middle
●如何让HTML标签显示在一行并水平居中同行显示：
1、对于div或ul、p、h1等本身就是独行显示的标签，需设置float
2、对于img、input、span等本身就是同行显示的标签，不需要设置float
●如何改变表单元素的margin-top或margin-bottom，使其可以垂直方向上移动
1、给表单元素设置vertical-align：middle；
2、设置margin
●当对一个标签（必须是其父标签的第一个子标签）设置margin-top时，会将父标签一起移动
解决：给父标签设置overflow：hidden来取消影响
●如何让子div水平垂直居中大div？
计算子div的margin-top
css定位：
子标签{margin：auto；position：absolute；top：0；left：0；right：0；bottom：0；}
父元素{position：relative；}
●如何确保标签是参考父元素进行定位的
给子元素设置绝对或固定定位
给父元素设置相对定位（一般情况下）
●如何让表单元素对齐显示：
对这几个表单元素设置以下css代码：
vertical-align：middle；
box-sizing：border-box；
border：1px solid #cccccc；
● 如何让用户点击输入框时有样式变化
利用：focus伪类选择器
input:focus{
border:1px solid blue;
}
当input获取鼠标焦点时（鼠标点击input）时使用的样式
● 如何去掉浏览器表单元素的默认边框（比如input）
给表单元素添加outline css属性： outline：none；
行内元素与块级元素（行内块级元素）
●行内元素：能够同行显示的HTML标签
包含：img、a、span、input、select、button、textarea等
行内元素只会和其他行内元素同行显示
行内元素默认情况下是不能设置宽高的
●行内块级元素
包含：input、select、button、textarea、img
行内块级元素可以同行显示，也可以设置宽高
●块级元素
包含：div、p、h1~h6、ul、ol、dl、table
独占一行，可以设置宽高
行内元素与块级元素之间的切换（行内块级元素）
●display：设置标签的样式模式
inline：采用行内元素模式
inline-block：采用行内块级模式
block：采用块级元素
table：table专用模式
none：隐藏标签
显示/隐藏元素
把需要隐藏和显示的标签作为子标签
给父标签设置：hover并利用组合选择器来改变子标签的display
CSS中的颜色
css中颜色可以使用颜色单词、十六进制、rgb、rgba四种模式
分类：1、颜色名： color：red
2、十六进制： color：#数字和字母的组合
3、rgb：以red、、green、blue作为三原色，按照不同的比例来调和出其他的颜色。每一种原色取值范围是0~255。不用取值的组合形成了不同的颜色。
4、rgba：在rgb 的基础之上加上alpha（透明度）
透明底范围：0~1 0表示完全透明 1表示完全不透明
color：rgba（255，255，255，0.5）
CSS权重
概念：去计算css选择器的优先级大小，即权重，即选择哪个选择器的权重大，css就用谁的。权重值一样，就近原则。
条件：必须是对同一个HTML标签的同一个css属性进行设置时，才会需要比较优先级，即权重大小。
如何计算：
加法：
原理：每种css选择器的权重值不同，那么我们可以将每个选择器的权重值进行相加，之后再进行比较。
分配： id选择器权重值为100
class选择器权重值为10
标签选择器权重为1
伪类选择器权重值为1
4个0：
比较基础选择器的数量来进行权重判断。
语法（0,0,0,0）： 是否是行内样式（style），是为1，不是为0
拥有id选择器的数量，
拥有class选择器的数量，
标签选择器的数量
比较规则：从第一个0开始，比较两者数量，谁大就用谁的，如果数量一致，那么就比较第二个0，以此类推。
CSS继承
概念：有些css属性是具有继承特性的，指子标签可以使用定义在父标签上的样式。
作用：减少css代码
具有继承特性的css属性：color、font系列、text-align、line-height、opacity、list-style
补充CSS属性：
● box-shadow：设置盒子的阴影
box-shadow：0px 0px 10px black；
● overflow：当标签内容溢出的时候，怎么处理
hidden：隐藏溢出的内容
auto：如果溢出了就添加滚动条
scroll：无论有没有溢出，都有一个滚动条
额外：当给父元素设置overflow：hidden时，会抵消margin-top的bug所带来的影响
● opacity：设置盒子的透明度
语法：
opacity：数字 0~1之间
●opacity和rgba的区别
opacity是设置整个盒子的透明度，跟颜色无关
rgba是将颜色设置为透明色，对盒子的其他内容没有影响
应用场景：需要做透明动画时用opacity，比如配合过度（transition）或动画（animation）
●将标签放大1.5倍
transform：scale（1.5）；
IE盒模型（怪异盒模型）
在早期ie版本中，每个HTML标签的表现方式跟现在的标准盒模型不一致。
● ie盒模型：
和标准盒模型一样，ie盒模型中也包含了width+border+padding+margin
● 和标准盒模型之间的区别：
标准盒模型总宽度：width+border+padding+margin
ie盒模型总宽度：width+margin
width=内容区域宽度+padding+border
● 使用： 1、利用css属性 box-sizing
box-sizing：border-box（ie盒模型） / content-box（默认）
2、去掉页面声明<!DOCType html>，只适用于ie低版本浏览器
● 应用场景：
对表单元素的对齐处理
伪元素
● 概念：指可以在HTML标签的开头或结尾通过css来添加内容，该内容可以单独设置css样式。
●作用：能够实现一些页面效果，比如三角形。
●语法：
1、在标签开头添加内容：
：：before{
content:“ ”
} ：：before是伪元素专用选择器，能够在标签开头添加内容，内容可以是图片或文字或空格。
2、在标签结尾添加内容
：：after{
content:“ ”；
}● 特点：通过伪元素添加的内容可以被当做该标签的子元素，可以设置盒模型、宽高、颜色等css属性。
content属性可以设置图片，但本身不容易设置位置，一般来说如果要添加图片，会通过设置背景图片来处理。
伪元素本身是行内元素，所以要设置宽高的话需要改变display：inline-block
利用伪元素实现三角性：
利用：：after或：：before添加伪元素
宽高为0，然后设置透明的border
将伪元素设为绝对定位，父标签设为相对定位
利用top等属性来改变位置
补充：可以设置z-index来控制伪元素的显示层级
浏览器内核：
内核是浏览器底层架构最核心和基础的部分，按照功能可分为：渲染引擎和JS引擎。
渲染引擎：负责对网页语法的解释和渲染显示到浏览器。
浏览器内核流程：
1、加载网页代码
判断是否是网络资源，是就利用网络模块从网络上获取网页代码
如果是本地文件，则直接加载本地代码到内核中
2、经过HTML解释器，对代码进行解析
浏览器从代码的第一行开始依次解析，并把不同类型的代码交给对应的解析器来解析
css代码->css解析器 JavaScript->JS引擎 HTNL代码->HTML解析器
3、将各个解析器的结果综合进行布局
把标签和对应的css代码结合起来，每个标签都有自己的渲染对象，里面就包含了该标签有什么样的样式
4、布局和绘图（render）
会把每个标签的样式、位置给绘制在页面上，如果需要使用图片、视音频等内容，再利用对应模块来处理，处理完之后直接显示在页面上
CSS hack
什么是css hack:
根据不同浏览器的兼容性，为了能够在不同浏览器中能够显示一致，书写css兼容代码的过程就叫css hack
为什么要用:
因为不同的浏览器使用了不同的渲染引擎，里面对html和css进行解析的解释器也是不一样的，会导致同样的代码在不同浏览器下表现不一致，为了保证不同浏览器中页面效果尽可能表现一致，所以需要书写css hack
css hack的3种写法（目的：能够保证我们写的hack代码只能被特定的浏览器识别）
css属性前缀法
概念：给css属性末尾添加一些特殊符号。因为有的浏览器能够识别这些特殊符号，不能识别的浏览器会直接忽略该属性。
ie8＋能识别： css属性名\0：css属性值；
选择器前缀法
概念：利用了媒体查询以及特定的符号的组合，因为有些特殊组合智能是某些浏览器识别，所以也能够打到css hack的目的。
ie8能识别： @media \0 screen{
div{filter：alpha（opacity=数值）}
}
ie专属的条件注释写法
ie浏览器专属的一种特殊注释，只能满足条件的ie浏览器才能识别并执行里面的代码
<!--[if ie 8]>
只有ie8才能看到里面的代码并执行
<![endif]-->
ie 9 及以下：（lte表示小于或等于，lt表示小于）
<!--[if lte ie 8]>
<![endif]-->
ie 10及以上：（gte表示大于或等于，gt表示大于）
<!--[if gte ie 10]>
<![endif]-->
ie8中的常见兼容问题
ie8不支持rgba：
给一个纯背景颜色作为替代方案
利用ie提供的滤镜来实现透明效果
filter：alpha（opacity=数值）；
利用caniuse来查看哪些技术有兼容性问题
caniuse：一款前端兼容性自查工具
css兼容思想指导
优雅降级（推荐）
先不管兼容性，直接以现代浏览器为基础，实现最佳效果，然后再考虑低版本浏览器书写css hack保证低版本浏览器也能够有较好的效果
渐进增强
先把网页内容给设计好（不考虑效果），在内容不受影响的情况下逐步添加页面的效果,浏览器版本越高，效果越佳。
CSS3常用属性
box-shadow：给盒子添加阴影
box-shadow：x轴的偏移量 y轴的偏移量 阴影模糊的长度 阴影的长度 阴影的颜色；（前四个都是以px为单位）
text-shadow：文字阴影
text-shadow：x轴的偏移量 y轴的偏移量 阴影的模糊长度 阴影颜色；（前三个以px为单位）
box-reflect：实现图片倒影
box-reflect：below/above 倒影和图片之间的距离 [渐变]；
box-reflect目前就谷歌有实现，并且该css属性在谷歌中使用需加上 -webkit前缀
-webkit-box-reflect：below 0px -webkit-linear-gradient（transparent 20%，white）；
border-radius:渐变（径向和线性）
线性渐变：
background-image：linear-gradient（）；
使用关键字： to bottom（默认） to top to right to left
to top left to top right to bottom left to bottom right
使用角度：度数deg
色标，颜色取值范围：background-image：linear-gradient（颜色n%，颜色n%）；
重复线性渐变： background-image：repeating-linear-gredient（）；
兼容性：
ie10以下不兼容
对于低版本的谷歌或火狐浏览器，可以在css属性前加上浏览器前缀来支持线性渐变
谷歌替代方案：-webkit-linear-gradient（）；
火狐：-moz-linear-gradient（）；
IE：-ms-linear-gradient（）；
ie89兼容方案，使用ie滤镜
针对ie的6~9，可以使用ie提供的渐变滤镜来兼容
1、GradientType：指渐变方向，只支持水平和垂直，0代表垂直方向，1为水平
2、startColorstr：开始颜色
3、endColoratr：结束颜色
4、注意：ie低版本不支持自定义渐变方向以及超过第2种颜色
filter：progid：DXImageTransform.Microsoft.gradient（
GradientType=1，
startColorstr=“red”，
endColorstr=“green”
）
径向渐变：是以椭圆或圆进行颜色渐变
background-image：radial-gradient（red，blue）；
圆心设置：
方向单词：at center center（默认） at center bottom at center right ...at top right......
百分比（width，height）： at 50% 50%
具体像素（水平，垂直）： at px px
改变形状：
设置为圆：circle
色标，颜色取值范围：background-image：radial-gradient（颜色n%，颜色n%）；
size：定义渐变的形状大小，farthests-corner（默认）
<size>:closest-side/closest-comer/farthest-side/farthest-corner
closest-side:半径从圆心到最近边
closest-corner：半径从圆心到最近角
farthest-side：半径从圆心到最远边
farthest-corner：半径从圆心到最远角
border-image
background-clip
background-attachment：背景视觉差
概念：css3提供。用于设置某个盒子的背景图像是否固定在页面上还是跟随页面滚动。
语法： background-attachment：fixed/scroll（默认）；
CSS3选择器
css3结构选择器（后代选择器）
：first-child 第一个子标签
div p：first-child{}找到div中的第一个子标签，并且是p标签
：last-child
div p：first-child{}找到div中的最后一个子标签，并且是p标签
：nth-child（n） 找到第n个子标签
技巧：找到所有偶数子标签或基数子标签
偶数： div p：nth-child（even）{}
奇数： div p：nth-child（odd）{}
：nth-of-type（n） 找到指定类型的第n个子标签
div p：nth-of-type（）{}
：nth-last-child（n） nth-child的倒数版本
：nth-last-of-type（n） nth-of-type（n）的倒数版本
：nth-child（n）和 ：nth-of-type（n） 区别：
1、：nth-child（n） 表示找到父标签的第n个子标签，同时该标签为p标签，
2、：nth-of-type（n） 表示找到父标签的第n个p子标签
css3兄弟选择器
找到后续的第一个兄弟标签
+：相邻兄弟选择器
div+p{}找到所有div后的第一个兄弟标签，并且是p标签
找到后续的所有兄弟标签
~：后续兄弟选择器
div~p{}找到div后的所有兄弟p标签
CSS动画（2d & 3d）
CSS 2D转换
转换：css3提供transform属性来处理盒子（html标签）的转换，主要包含旋转、位移、缩放、倾斜等转换
旋转：可以让盒子进行2d的旋转 （rotate ）
transform：rotate（旋转角度）；
例：transform：rotate（30deg）；盒子以自身中心为基点，顺时针旋转30角度
transform：rotateX（旋转角度）；盒子以自身中心为基点，顺时针沿X轴旋转30角度
transform：rotateY（旋转角度）；transform：rotateZ（旋转角度）；
位移：让盒子进行移动。translate来控制移动
transform：translate（x轴移动量，y轴移动量）
transform：translateX（）
transform：translateY（）
例： transform：translate（100px，50px）；x轴向右移动了100px，y轴向下移动了50px。
缩放：对盒子进行放大或缩小 （scale）
transform：scale（宽度的倍数，高度的倍数）；
transform：scale（倍数）；等比例缩放
倾斜：让某个盒子沿着x或y轴进行倾斜转换。（skew）
transform：skew（角度）
例：transform：skew（）
transform：skewX（）
transform：skewY（）
矩阵：matrix
概念：matrix是css2d转换的底层实现（原理），利用matrix（）也可以实现旋转、位移、缩放、倾斜等转换。可以理解translate、rotate等是matrix的一个快捷方式。
作用：能够更深入的理解css2d转换
使用：
transform：matrix（1,0,0,1,0,0）；
位移：transform：matrix（1,0,0,1,x轴的偏移量,y轴的偏移量）；
缩放：transform：matrix（x轴的缩放比例,0,0,y轴的缩放比例 ,0,0）；
旋转：transform：matrix（cosa,sina,-sina,cosa,0,0）；
常见角度：30°：sin30°=0.5 cos30°=0.88（根号三/2）
45°：sin45°：0.850（根号二/2） cos45°=0.850
60°：sin60°：0.866 cos60°=0.5
倾斜：transform：matrix（1,tan（y轴倾斜的角度 ）,tan（x轴倾斜的角度）,1,0,0）；
常见角度： 谈30°=0.577（根号三/3） tan60°=1.73（根号三） tan0°=0
转换基点：利用 transform-origin来改变转换的中心点，即基点
transform-origin：x，y；
具体px/百分比/left right center bottom top
CSS 2D动画
动画概念：快速切换连续图片而达到流畅的画面效果，即动画
帧数：一秒钟切换图片的数量。数量越多，画面越流程和清晰。
css动画原理：通过不断改变盒子的css属性来达到动画效果。
关键帧：指盒子状态将要发生改变的帧。
css2d动画：定义动画关键帧
animation基本使用： css2d动画是通过animation来控制
步骤：1、利用@ktyframes属性来定义动画的所有关键帧，给动画设定一个名称
2、给要使用动画的盒子添加animation属性，指定要执行的动画以及速度、方向等相关属性
语法：
以百分比来表示关键帧，当动画执行到某个百分比时，是什么状态：
@keyframes动画名称{
form{ }
50%{ }
to{ }
}
div{animation:动画名称 动画时间; } 动画属性控制（速度、方向等）
概念：动画提供了很多的css属性来控制动画中的速度、方向、次数、延时执行等属性
animation-name：动画名称
animation-duration：动画持续时间
animation-delay：动画延时时间。默认0s。
animation-timing-function：设置动画速度。原理：通过贝塞尔曲线控制。 linear、ease
animation-iteration-count：设置动画的执行次数。 infinite
animation-direction：设置动画的执行方向，正向或反向。
normal：默认值，正常播放
alternate：轮流反向播放
animation-fill-mode：设置动画结束时的状态
animation：组合属性。对以上属性进行快速设置
animation：动画名称 动画时间 延时时间 速度 方向 次数 是否保持结束状态
贝塞尔曲线（自定义速度）
概念：一种专门用于构建二维图形的速度曲线，本质是一个数学曲线。
CSS3d
三维坐标系
概念：在xy轴的基础上加上z轴，构建3维坐标系。
景深
概念：在摄像中，景深是指相机对焦点前后相对清晰的成像范围，即镜头和物体之间的距离。在css中，景深指盒子和屏幕之间的距离。
作用：css可以通过prespective来设置盒子和屏幕之间的距离，即景深。景深越大，说明盒子和屏幕的距离越远。
特点：景深是给父元素设置的。子元素会以3d的形式来展现。
景深越大，3d效果越小，景深越小，3d效果越好。
景深是搭配3d转换一起使用。
3D转换
旋转：
rotate3d（x，y，z，角度）
x，y，z：表示是否有x，y，z轴旋转，1表示有，0表示没有
位移：
translate3d（x，y，z）
缩放：
跟2d一致
transform-style
概念：设置了某元素的子元素以何种方式展示在父元素空间里
transform-style：
- flat：子元素以2d的方式展示在父元素里面，默认。
- preaerve-3d：子元素以3d的方式进行展示。
语法：
transform：preserve-3d|flat(默认)
应用：结合景深来实现3d立体效果
技巧：会将transform-style设置给立体盒子的父元素，子元素设置3D效果
transform-origin
概念：transform-origin也支持指定z轴基点
语法：
transform-origin：x轴 y轴 z轴；
例： trandform-origin：center center center；
可以写px、%、单词名
perspective-origin
概念：设置3d盒子的观察位置。默认是正对盒子。
作用：以不同的角度查看3d盒子。
语法：
prespective-origin：x轴 y轴；
取值：百分比、px、方向单词
默认：perspective-origin：center center；正对盒子
注意：这个属性是给最大的盒子使用的（设置景深的盒子）
构建一个3D的盒子
- 设置最大的盒子box，给box设置景深prespective
- box里新建一个3d的盒子div-3dbox，该div设置transform-style：preserve-3d
- 所有3d的子元素就放在3dbox里面
- 对3dbox设置转换
CSS重置
背景：每次写页面时，都要清理标签的默认样式，也要考虑HTML5标签的兼容性问题。
概念：重置CSS（resetCSS）就给每个页面统一使用的样式，主要目的是为了尽可能所有标签的默认样式在不同浏览器下表现一致。
解决方案：
resetCSS
normalizeCSS
resetCSS
原理：清除所有标签的所有默认样式，用户在开发页面时自己设置样式。
一般reset.css
normalizeCSS
原理：是把浏览器有兼容性的css给统一了，其他浏览器表现一致的css样式只是进行基本的处理，仍会保留大多数的默认样式。
normalize.css
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
