前端面試CSS

權重分為四級：

代表內聯樣式，如style="***"，權值為 1000；

代表 id 選擇器，如#content，權值為 100；

代表類、偽類和屬性選擇器，如.content、:hover、[attribute]，權值為 10；

代表元素選擇器和偽元素選擇器，如div、p，權值為 1。

需要注意的是：通用選擇器（*）、子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，所以他們的權值都為 0。權重值大的選擇器其優先順序也高，相同權重的優先順序又遵循後定義覆蓋前面定義的情況。

box-sizing屬性：

div設定了box-sizing:border-box之後，width的寬度是內容 + padding + 邊框的寬度（不包括margin），這樣就比較符合我們的實際要求了。

float被設計出來的初衷是用於文字環繞效果，即乙個一段文字，float:left之後，文字會環繞.

float 的破壞性 —— float 破壞了父標籤的原本結構，使得父標籤出現了坍塌現象。導致這一現象的最根本原因在於：被設定了 float 的元素會脫離文件流。其根本原因在於 float 的設計初衷是解決文字環繞的問題。大家要記住 float 的這個影響。

.clearfix:after .clearfix

inline元素使用

text-align: center

block元素使用

margin: auto

絕對定位元素可結合left和margin實現，但是必須知道寬度。

.item

inline 元素可設定line-height的值等於height值，如單行文字垂直居中：

.container

絕對定位元素，可結合left和margin實現，但是必須知道尺寸。

.container .item

絕對定位可結合transform實現居中。

.container .item

絕對定位結合margin: auto，不需要提前知道尺寸，相容性好

.container .item

首先，使用@keyframes定義乙個動畫，名稱為testanimation，如下**，通過百分比來設定不同的 css 樣式，規定動畫的變化。所有的動畫變化都可以這麼定義出來。

@keyframes myfirst 25% 50% 75% 100%

}

然後，針對乙個 css 選擇器來設定動畫，例如針對div元素設定動畫，如下：

div