1.什么是css3（css的一个升级版本）；
2.需注意的事项：兼容性的问题；
如果针对的浏览器有兼容性的问题需要加前缀：
prefix(前缀) 浏览器（browser）
-webkit- chrome safar
-moz- friefox
-ms- IE
-o- opera
3.css有专门指定的规范
4.css3选择器
1-----关系选择器：
（1）：包含选择器（E F）：选择所有被E包含的F元素
（2）：子代选择器（E>F）:选择所有作为E元素的直接子元素F，对更深层次的元素不起作用
（3）：相邻选择器（E+F）：选择紧跟E元素后的F元素，用加号表示,选择相邻的第一个兄弟元素。
（4）.兄弟选择器（E~F）：选择E元素之后的所有的兄弟元素F，作用于多个元素
2----属性选择器：
（1）；E[att]:选择具有att属性的E元素；
（2）：E[att="val"]：选择属性att值为val的E元素；
（3）：E[att^="val"]：选择属性att的值以val开头的E元素；
（4）：E[att$="val"]:选择属性att的值以val结尾的E元素；
（5）：E[att*="val"]：选择具有att属性且属性值为包含val的E元素
（6）：E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。
3----伪元素选择器：
（1）：E:frist-letter:选择元素中的第一个字；
（2）：E：frist-line:选择元素中的第一行字；
（3）：E：placeholder：文本框提示文本的样式；
（4）：E：selection:文本选中后的样式（只能设置三个属性------color；background；text-shadow）
（5）：E:before:在E元素前面生成一个新的内容（content:"内容"）
（6）：E:after：在E元素后面生成一个新的内容（content：“内容”）
4----伪类选择器（被选中元素的一种状态）：
（1）：E:not（s）：选择以
（2）：E:root(根元素)：在HTML中root相当于
（3）：E：target（被锚点标记的一种状态）
-------（考虑到别的元素）任意标签——css的选择是从第一个开始的---------
（4）：E：frist-child(第一个子元素)
（5）：E:last-child（最后一个子元素）
（6）：E:only-child 匹配父元素仅有的一个子元素E。
（7）：E:nth-child(n) 匹配父元素的第n个子元素E
（8）：E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
（9）：E:first-of-type 匹配父元素下第一个类型为E的子元素。
（10）：E:last-of-type 匹配父元素下的所有E子元素中的倒数第一个
（11）：E:only-of-type 匹配父元素的所有子元素中唯一的那个子元素E。
（12）：E:nth-of-type(n) 匹配父元素的第n个子元素E。
（13）：E:nth-last-of-type(n) 匹配父元素的倒数第n个子元素E。
（14）：E:empty 匹配没有任何子元素（包括text节点）的元素E。
（15）：E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
（16）：E:enabled 匹配用户界面上处于可用状态的元素E
（17）：E:disabled 匹配用户界面上处于禁用状态的元素E。
（18）：E:target 匹配相关UR（锚点标记的状态）L指向的E元素。
5.CSS3（圆角属性）--border-radius（圆角属性）
border-radius （简写属性，设置所有四个border-*-radius属性）：（1）：border-top-left-radius:40px; (修改左上角的边框)
（2）：border-top-right-radius:40px;（修改右上角的边框）
（3）：border-bottom-left-radius:40px;（修改坐下角的边框）
（4）：border-bottom-right-radius:20px; （修改右下角的边框）
6.CSS3边框阴影（border-shadow）
写法：box-shadow:x,y,r,s ,color
（1）.x,y表示阴影处的坐标的位置
（2）.r:高斯模糊---沿着阴影两边同时扩散
（3）.s:(放大)---放大多少像素就死四周同时放大多少像素
（4）.inset----如果加上inset就表示内阴影；没有交就表示外阴影
7.background（css3背景）
background-size：x,y(背景图片的大小)：
（1）：background-size:100%(写百分比的时候图像会根据盒子的宽度把图像拉伸（设置一个值）)
（2）：background-size：cover---（根据容器的边进行等比缩放；图片可能溢出）
（3）：background-size：contain---（根据容器的最小的边进行等比缩放；图片可能会重复）
background-origin（背景图片的起始位置）
background-clip(规定背景的绘制区域)：
（1）：border-box 背景被裁剪到边框盒
（2）：padding-box 背景被裁剪到内边距框
（3）：content-box 背景被裁剪到内容框
8.弹性布局（flex）
（1）：弹性布局：display：flex；
（2）：换行：flex-warp:warp
（3）：规定主轴的方向：
row(默认值)---从左往右
row-reverse----从右往左
column---从上往下
column-reverse 从下往上
（4）：规定主轴的对齐方式：
flex-start：从箭头开始的地方看齐
flex-end：从箭头结束的地方看齐
center：元素处于中间位置对齐
space-between：元素中间进行隔开
（5）：基于交叉轴的对齐方式
单行：
flex-start：从箭头开始的地方看齐
flex-end：从箭头结束的地方看齐
center：元素处于中间位置对齐
baseline：基于文本对齐
strench：如果项目设计宽高的时候，会被撑满
多行：align-content
用法一样；适用于多行
（6）：order(排序)：数值小的在前面（默认值为0）
（7）.弹性盒子中content属性
flex-grow：会根据比例来瓜分剩下的空间
flex-shrink：按照比例定义元素的伸缩比例
flex-basis：（等同于content.width）----加权值；
flex-basis表示设定的最小宽度；width：表示设定的最大的宽度
9.css3动画（animation）；css3转换（transition）；css3转换（transform）：
附带css思维导图（全）
