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：变形的推迟时间。 简写方式： transition:transform 2s linear 2s; 需要结合着用： transition:all 0.5s linear ; transform:translate(0px,-6px); 不能出现过渡的属性：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区域设置视窗。弹性盒子： 弹性盒子的推出是为了对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：设置子级的所占比例问题，设置的数字表示子级标签所占份数。
