日常專案推進中，各類開發人員經常遇到的一個問題就是頁面的樣式調整問題，有時候專案組的開發人員經常會自己親自上陣調整樣式，這樣可以快速的解決問題，但同時也有可能造成一些隱患，接下來就我在工作中參與的樣式調整經驗分享一些正確“姿勢”。
核心概念
css最核心的概念，就是盒模型，頁面上的每一個元素都可以看做是一個盒子，以chrome控制檯下某元素和模型為例
html:
<div class="box">我是一個元素</div>
css:
.box {
margin: 20px;
padding: 20px;
width: 200px;
height: 200px;
border: 1px solid #333;
}
複製程式碼效果：
對應的盒子模型：
以某個專案的前端頁面為例
選擇器
優先順序
在不同的複雜場景下，css選擇器的優先順序粗略如下（以五種比較常見的寫法為例）（從高到低排序） 1.在屬性後使用!important會覆蓋頁面內任何位置定義的元素樣式
2.作為style屬性寫在元素內的內聯樣式
3.id選擇器
4.類選擇器
5.萬用字元選擇器
6.瀏覽器自定義或繼承的屬性
可以看到，很多人最常用的style內聯屬性樣式的優先順序非常高，如果專案大量運用這種高優先順序的寫法的話，那麼這些元素的樣式後續的調整將是非常困的。 一般調整頁面的樣式。首選的方案就是通過link標籤引入css檔案，那麼css的選擇器那麼多，我如何知道這些選擇器的優先順序呢？
接下來介紹一下css選擇器優先順序演算法，css選擇器可以參考w3c，只要理解，無需死記硬背也能熟練使用。首先來看一下w3c官方文件對css優先順序計算的介紹
翻譯過來意思大概就是，選擇器的優先順序遵循以下準則： 1.計算id選擇器的數量賦值給a 2.計算類選擇器、屬性選擇器、偽類選擇器的數量賦值給b 3.計算標籤選擇器和偽元素選擇器的數量賦值給c 4.忽略萬用字元選擇器。。。 否定偽類中的選擇器也會被計算，而否定偽類本身不計算在內（這句不重要，使用場景很少，可以忽略） 計算出abc的值後，將abc連線起來，數值越大，優先順序越高。
還有一張有趣的css優先順序示例圖
相容性
只有高階瀏覽器才支援酷炫的css3屬性，如果專案相容性要求為ie7、8等“古老的瀏覽器”，那麼只能跟那些酷炫的效果say byebye了。。。如果你不清楚某個想要使用的css屬性的相容性，可以利用caniuse查詢。
經常遇到的問題及對應的解決方案
- 滾動條問題
- 樣式不生效
- 外邊距塌陷
- z-index
- 樣式錯亂