css3的总结

css3 gxj

css3参考手册

css3新增伪类选择器

el:nth-child(n)/li:nth-child(2n+1):el父级下第n个el元素,n值是父级下所有元素的统一的索引  

el:nth-child(even/odd):关键字 

el:nth-of-type(n):el父级下第n个el元素,n值不同类型的el会有自己单独的索引   

el:nth-last-child(n)/el:nth-last-of-type(n):从后往前索引排列   

el:first-child/el:last-child:选中第一个/最后一个el   

el:only-child:el父级下只有一个子节点,类型是el(子节点不包含文本节点)   

el:only-of-type:el父级下只有一个类型为el的子节点,可以包含其他的不同类型的节点  

el:target:表示当前的URL片段的元素类型(...#el)，这个元素必须是el  

el:disabled 表示不可点击的表单控件   

el:enabled 表示可点击的表单控件   

el:checked 表示已选中的checkbox或radio   

el:first-line 表示E元素中的第一行 

el:first-letter 表示E元素中的第一个字符 

el::selection表示E元素在用户选中文字时 

el::before 生成内容在E元素前 

el:after:在el之后生成内容

E:not(s) 表示E元素不被匹配 

E~F表示E元素毗邻的F元素 

E+F表示相邻 

E>F表示直接的子元素

css3新增的属性选择器

[attr]:只要包含attr这个属性就被选中 

el[attr]:选择的是el元素当中包含attr这个属性的就被选中  

el[attr=val]:选择的是el元素当中包含attr这个属性并且值是val的就被选中  

el[attr^=val]:选择的是el元素当中包含attr这个属性且属性值以val开头的就被选中  

el[attr$=val]:选择的是el元素当中包含attr这个属性且属性值以val结尾的就被选中   

el[attr*=val]:选择的是el元素当中包含attr这个属性且属性值包含val的就被选中  

css3新增UI样式

border-radius:设置圆角。

background-size:绝对值/百分比/关键字  

background-size:100px 50px/50% 40%/cover,contain  

text-shadow:x y 模糊距离 阴影颜色，x:横向偏移 y:纵向偏移  

box-shadow:inset x y 模糊距离 扩展阴影半径 阴影的颜色inset向内显示阴影   

mask:Mask-image/Mask-position/Mask-repeat 设置遮罩   

文本超出省略号显示：white-space: nowrap;overflow: hidden;text-overflow: ellipsis;  

background-image:linear-gradient():线性渐变,设置的是元素的背景图,默认是从顶部渐变到底部,  

方向的设置:to right/left/bottom/top/right bottom/角度30deg   

repeating-linear-gradient:设置平铺    

radial-gradient(red,blue):径向渐变

浏览器的内核前缀

--webkit--:chrome

--moz--ff

--o--:欧朋

--ms--:ie

transition过渡

用的时机:某个元素某些样式发生了变化,而且你想让它带有过渡效果的变化，  
那么transition是一个不错的选择。

transition是一个复合样式   

<' transition-property '>：检索或设置对象中的参与过渡的属性 

<' transition-duration '>：检索或设置对象过渡的持续时间 

<' transition-timing-function '>：检索或设置对象中过渡的动画类型 

<' transition-delay '>：检索或设置对象延迟过渡的时间

css3的2D变换

transform:skew/scale/translate/rotate  

skew(x,y)/skewX()/skewY():斜切函数,值是角度  

scale(x,y)/scaleX()/scaleY():缩放函数,值是正数。  

translate(x,y)/translateX()/translateY():平移函数绝对值带px   

rotate():旋转函数 值是角度  

旋转基点:  

transform-origin:  

关键字:left/right/top/bottom/center  

绝对值:100px 200px   

百分比:永远是相对于设置的对象的宽高  

css33D变换

transform-style:preserve-3d;把容器变成3D空间  

perspective:具体值:值越小越接近真3d效果

常用的是translate3d/rotate3d/x,y,z

css3关键帧动画

animation:复合样式  

<' animation-name '>：检索或设置对象所应用的动画名称 

<' animation-duration '>：检索或设置对象动画的持续时间   

<' animation-timing-function '>：检索或设置对象动画的过渡类型 

<' animation-delay '>：检索或设置对象动画延迟的时间 

<' animation-iteration-count '>：检索或设置对象动画的循环次数 

<' animation-direction '>：检索或设置对象动画在循环中是否反向运动 

<' animation-fill-mode '>：检索或设置对象动画时间之外的状态<' animation-play-state '>：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

@keyframes 动画名称{from..to../0%...10%...}

弹性盒子

用途:布局用(浮动布局,定位布局,弹性盒子)

父元素的相关样式设置:  

display:flex;把父元素变成一个弹性空间    

justify-content:flex-start/flex-end/center/space-around/space-between; 设置子元素主轴的对齐方式  

align-items:flex-start/flex-end/center/baseline/stretch 设置子元素在侧轴上对齐方式  

flex-direction:row/row-reverse/column/column-reverse设置子元素的排列方式  

flex-wrap:wrap/nowrap/wrap-reverse:设置子元素是否换行  

flex-flow:复合样式。复合了flex-direction flex-wrap  

子元素身上的样式:

order:设置子元素的顺序  

flex-shrink:默认值1,设置或检索弹性盒的收缩比率。根据弹性盒子元素所设置的收缩因  
子作为比率来收缩空间。

flex-grow:默认值0,设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子  
作为比率来分配剩余空间。  

align-self:可以设置子元素单独的对齐方式