css题目汇总

1. 媒体查询@media如何使用?

@media mediatype and|not|only (media feature){
	CSS-Code;
}

例:
@media screen and (max-width: 420px){
  body{width:420px}
}

2. animation动画属性

div{
  animation: mymove 5s infinite;
}

@keyframes mymove{
  from {left:0px}
  to {left:200px}
}

3. transform使用

div{
  transform: rotate(-8deg)
}

rotate 旋转
scale 缩放
skew  倾斜
translate 平移

4. 常用的清除浮动方法

• Clear:both
• :after伪元素
• overflow:hidden

5. 三栏布局实现:

• display: flex
• table
• grid
• position定位
• float+margin
• float+overflow

6. calc属性

​ 动态计算长度值 width: calc(100% - 10px);

7. css性能优化

• 内联首屏关键c s s
• 异步加载css
• 文件压缩
• 去除无用css
• 有选择性的使用选择器
• 减少使用昂贵的（需要浏览器进行操作/计算）属性： box-shadow/boder-radius/filter/opacity/:nth-child
• 优化重排与重绘
• 不要使用@import