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