1,css3针对CSS2版本出现的弱点进行的一个补充性提升。主要提升了新的CSS样式的设置，
弹性盒子和媒体查询以适应手机端的开发。，增加动画和变形以适应动画特效的制作。
能够制作一些有弧度的元素框。增加关于背景的尺寸设置，增加新的css选择器类型。
2，css3为了解决浏览器兼容的问题，设置了一些常用浏览器私有前缀：
常用浏览器：
IE（内核：Trident），
chrome，苹果浏览器（webkit内核），
firfox(mozilla内核)
-webkit-css3样式名称
-ms-css3样式名称//IE的私有前缀。
-moz-css3样式名称
3，css3选择器：
1，属性选择器：
1),利用属性来查找HTML标签[attr]//标签的属性名英文单词：attr.
[attr="value"]利用属性名称和值来找标签的。
[attr*="内容"]寻找只要该属性内包含了该内容的所有标签
[attr^="内容"]以该内容开头的标签。
[attr$="内容"]以该内容结尾的标签。
2,结构伪类选择器：
父元素下的子元素选择器：
e:first-child{}
e:last-child{}
e:nth-child(n){}注意：这个n的取值必须计算标签e在父级元素下总的排序号，同时该序号所代表的标签名必须和冒号左侧的标签名能对上。
相同父元素下的相邻兄弟元素选择器：这个选择器只是选择父元素下同一类元素的顺序个数。
e:first-of-type{}
e:last-of-type{}
e:nth-of-type(n){}这里的n代表的是同一个父级下第n个同类元素.
3.状态伪类选择器：
：focus 当点击的行为获取焦点时 input:focus{color:red;}
：after 在元素的内容的后面插入内容 div:after{content:"hello";display:block;color:red;}
：before在元素的内容前面插入内容。
：enabled，当元素可以使用的时候
：disabled，当元素不可以使用的时候
css3:text属性：
text-shadow:x偏移量 y 偏移量 z轴上的模糊值 阴影的颜色
box-shadow:x偏移量 y 偏移量 z轴上的模糊值 阴影的颜色
text-stroke:文字轮廓线的宽度 文字轮廓线的颜色。
css2:overflow:的属性拓展：
overflow：hidden/scroll/auto
word-wrap:break-word 强制换行，主要针对长单词和URL地址。
透明属性：
rgba(255,245,10,0.5)//只能针对颜色设置透明，不能直接将标签设置为透明。
opacity(0.5)//具有继承性。、
渐变：
线性渐变：
background:linear-gradient(to 方向，开始颜色,结束颜色)；
径向渐变：
background:radial-gradient(定位点,渐变形状,开始颜色,结束颜色)//需要添加私有前缀
边框：
弧角border-radius:
border-radius:
上top left
右 top right
下 right bottom
左 bottom left;
圆形：正方形的标签框，使用border-radius:50%;
椭圆：长方形的，使用border-radius:50%;
半圆：宽取值：高取值=2:1 border-radius:高的值 高的值 0 0；
background:
background-size:背景图的尺寸控制：
关键词取值：
cover覆盖，
contain容纳。
固定取值：px取值：
background-size:
x轴取值
y轴取值
background:可以实现多背景写法：每个背景图片的引入需要用“,”号隔开
background:
url(icon4.png) no-repeat left,
url(icon6.png) no-repeat right,
url(icon5.png) no-repeat top,
url(icon7.png) no-repeat bottom;
变形：transform:
transform:有四种变形方法：
位移：translate(),
旋转：rotate();
缩放：scale()；
倾斜：skew();
因为变形是瞬间完成的，所以我们无法看到变形的过程，为了呈现更好的效果，
我们需要将变形的成果表现出来这就是我们需要学习
过渡：transition:
transition-property:对什么属性进行过渡（all,单独的具体属性），
transition-duration:过渡的持续时间。
transition-timing-function:linear//线性速度，从头到尾都是保持匀速变化，
transition-delay：变形的推迟时间。
不能出现过渡的属性：display：none ---display:block;
translate(500px)【位移】//向右移动500px；
translate(500px,600px)//元素沿着500px宽600px高的轨迹走的是对角线 ，走的距离可以取负值，代表相反方向。
rotate(360deg)【旋转】，沿着元素的中心点宣传360度。顺时针方向，负值是逆时针方向。
scale(1.5,1.5)【缩放】//沿着水平和垂直方向将元素放大为原来的1.5倍，取值小于1，大于0是指缩小。
skew(xxdeg);【倾斜】将元素倾斜一定的角度，形成平行四边形的立体效果。
变形中心点设置：
transform-origin:定位值
动画：面试题：动画和过渡的区别是什么？
1，过渡的特点：
1，所有的过渡变形都是一次性动作，中间无法做状态转换。
2，所有的过渡都无法重复运动，一次运动结束，立即停止。
3，所有过渡均需要使用人为触发才能实现。
4. 变形无法做批量运动设置。
动画：就是将整个形变动作都归于一个时间段内。并且能够对时间段进行相应的片段划分，实在在不同片段内，动作变形不一样。
动画内容属性：@keyframes{
0%{}
20%{}
40%{}
60%{}
80%{}
100%{}
}
如果我们的动画内容想要加载到指定的标签上，就需要使用另一个属性：animation。
animation-name:规定了动画的名称
animation-duration：动画持续时间
animation-timing-function:动画的运动方式
animation-delay：动画触发的延迟时间。
animation-iteration-count:播放次数：有一个永久播放：infinite
animation-derection:播放的方向：反向播放：reverse
alternate：奇数正向，偶数反向。
animation-play-state:播放状态。暂停：paused
创建动画：
animation：a1 5s linear infinite
媒体查询：
1，媒体查询的样式：@media。
如果我们要进行媒体查询，那么查询什么呢？
查询媒体类型：就是显示设备的类型：
1，阅读器设备kindle，
2，printer打印设备，
3，显示器：screen，
显示器根据尺寸分为四种类型屏幕。
1，屏幕宽度大于等于1200px的称为大屏幕。
2，大于992，小于1200，称为中屏。
3，大于768，小于992，称为小屏
4，小于768称为超小屏
为了配合媒体查询能够在手机设备上显示样式。我们需要讲在页面的head区域设置视窗。
<meta name="viewport" content="width=device-width,initial-scale=1">
弹性盒子：
弹性盒子的推出是为了对css2传统盒子的一种补充和改善，
1，提高了元素盒子的使用灵活性，
2，实现关键词取值，简化了css布局样式的使用，提升了浏览器的通用性。
样式属性：
设置弹性盒子：
用法：在父级元素上设置：
display:flex，能够直接作用在相邻子级元素上，让相邻子级元素变成弹性盒子。
当子级变成弹性盒子之后，所有的子级标签高度默认为父级高度。所有的子级都自动排为一行。不再需要浮动。
弹性盒子的排列方向：
flex-direction:
row/
row-reverse/
column/
column-reverse;
练习：综合利用弹性盒子排列和弹性盒子的设置来替代float实现一行四列的布局。
设置弹性盒子在默认排列方式下，
水平对齐的方式：
属性名称：
justify-content:取值：
flex-start//居左，
flex-end//居右，
center居中，
space-between:左右两侧紧挨着父级标签，子级块之间的间距相等。
space-around：子级块左右两侧间距等于子级块之间的间距的一半。
弹性盒子在垂直方向的对齐方式：
属性：align-items
值：
flex-start：顶部
flex-end：底部
center：居中
flex-wrap:wrap;弹性盒子的子级，换行
align-content:
flex-start,
flex-end,
center,
space-between,
space-around
以上属性均为：放在父级标签上实现对相邻子级的控制。
以下属性都是放在子级上实现对自身的控制
order：数值；数值大的排序在后面，。数字小的排前面，支持负数。
align-self:设置具体的子级在垂直方向的对齐问题，
flex-start，
flex-end，
center
flex：设置子级的所占比例问题，设置的数字表示子级标签所占份数。
