在通往前端开发的进阶之路上，CSS基础面试题不可不知！

CSS基礎

1. 標準的CSS的盒子模型是什麼？與低版本IE的盒子模型有什麼不同？

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin

低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

2. CSS選擇器有哪些類型？各有什麼特點？

• 元素選擇器： 用於選擇具有指定元素名稱的元素。
• 類選擇器： 用於選擇具有指定類名稱的元素。
• ID選擇器： 用於選擇具有指定ID的元素。
• 通用選擇器： 用於選擇頁面中的所有元素。
• 相鄰選擇器： 用於選擇緊挨著另一個元素的元素。
• 子選擇器： 用於選擇元素的子元素。
• 偽類選擇器： 用於選擇滿足特定條件的元素。
• 偽元素選擇器： 用於選擇元素的特定部分。

3. CSS繼承是什麼？有哪些繼承類型？

CSS繼承是指元素可以從其父元素繼承屬性值。

• 一般繼承： 元素繼承其父元素的所有屬性值。
• 特定繼承： 元素只繼承其父元素的某些屬性值。
• 強制繼承： 元素強制繼承其父元素的某個屬性值，即使該屬性值被該元素的子元素覆蓋。

CSS佈局

4. CSS有哪些佈局方式？各有什麼特點？

• 塊級元素佈局： 塊級元素獨佔一行，換行排列，不能與其他塊級元素共享同一行。
• 行內元素佈局： 行內元素與其他行內元素共享同一行，可以和其他行內元素排在一起。
• 行內塊級元素佈局： 行內塊級元素既具有塊級元素的獨佔一行、換行排列的特性，又具有行內元素可以與其他元素共享同一行的特性。
• 浮動元素佈局： 浮動元素可以脫離正常的文檔流，相對於其父元素的位置進行定位。
• 定位元素佈局： 定位元素相對於其父元素或相對於視口進行定位，可以精確控制元素的位置。

5. CSS的flex佈局是什麼？有什麼優點？

CSS的flex佈局是一種新的佈局方式，它可以讓元素在容器中更靈活地排列。

• 靈活性： flex佈局可以讓元素在容器中更靈活地排列，即使容器的大小發生變化，元素也可以自動調整其大小和位置。
• 響應式： flex佈局是響應式的，它可以讓元素在不同的設備上自動調整其大小和位置。
• 易用性： flex佈局非常易於使用，只需要添加一些簡單的屬性就可以實現複雜的佈局。

CSS定位

6. CSS有哪些定位方式？各有什麼特點？

• 靜態定位： 元素的位置由其父元素的布局決定。
• 相對定位： 元素的位置相對於其父元素的位置進行定位。
• 絕對定位： 元素的位置相對於其最近的已定位祖先元素的位置進行定位。
• 固定定位： 元素的位置相對於視口的位置進行定位。

7. CSS的z-index屬性是什麼？有什麼作用？

CSS的z-index屬性用於指定元素的前後順序。

• z-index屬性值越大，元素越靠前。
• z-index屬性值相等，元素的順序由元素在HTML中的順序決定。

CSS動畫

8. CSS動畫是什麼？有什麼優點？

CSS動畫是用於創建動畫效果的CSS屬性。

• 優點：
  • 高效： CSS動畫非常高效，它不會阻塞瀏覽器的渲染引擎。
  • 跨瀏覽器兼容： CSS動畫在所有主流瀏覽器中都得到支持。
  • 易於使用： CSS動畫非常易於使用，只需要添加一些簡單的屬性就可以創建複雜的動畫效果。

**9. CSS動畫有哪些類