浏览器的型号和css3前缀
五种主流的浏览器：IE、Firefox、Safari、Chrome及Opera。
-moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o- /* Opera浏览器(早期) */
-ms- /* Internet Explorer (不一定) */
需要添加前缀属性的主要属性
@keyframes
移动和变换属性
(transition-property, transition-duration, transition-timing-function, transition-delay)
动画属性
(animation-name, animation-duration, animation-timing-function, animation-delay)
border-radius
box-shadow
backface-visibility
column属性
flex属性
perspective属性
易混淆的内联元素和块级元素
- 内联元素：
<a></a><i></i><input><img>selectspan - 块级元素：
<ul></ul><li></li><h></h><hr>
table属性的几个值运用
table-layout:auto|fixed(表格固定算法)border-collapse:separate | collapsedisplay:table|cell|row(表格里的元素会自动根据表格里面文字大小计算表格大小)(td标签就可以自由控制表格宽度)
css3选择器
- 兄弟选择器 ~
- 相邻兄弟选择器 +
- :nth-child(n/2n/2n+1/2n-1/1/2/3)
- :nth-of-type(li/ul/span)
<ul>
<span>a</span>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
ul li:nth-child(1){...}/*无法选中第一个li元素，因为渲染时会先检查小括号里面的，在看外面的li*/
ul li:nth-of-type(li){...}/*可以选中第一个li元素*/
css3中几个常用的属性
border-radiusbox-shadow@font-facetransformtansition@keyframes
另附几点
- css-sprite
- css3动画小技巧：位置改变一定会重绘页面，渲染GPU > CPU translateZ(0)、translate3d(X,Y,0)【渲染告诉浏览器开启GPU加速】
