日常專案推進中，各類開發人員經常遇到的乙個問題就是頁面的樣式調整問題，有時候專案組的開發人員經常會自己親自上陣調整樣式，這樣可以快速的解決問題，但同時也有可能造成一些隱患，接下來就我在工作中參與的樣式調整經驗分享一些正確「姿勢」。
css最核心的概念，就是盒模型，頁面上的每乙個元素都可以看做是乙個盒子，以chrome控制台下某元素和模型為例
html:
"box">我是乙個元素
css:
.box
複製**
對應的盒子模型：
以某個專案的前端頁面為例
在不同的複雜場景下，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
樣式錯亂
漸進增強的酷炫效果
巧妙地利用偽元素
強大的計算屬性
合理利用單位
css布局簡單介紹
一，左右布局有一下幾種方式 1，float 2，position 3，flex 4，grid 主要介紹下grid。舉一下例子 twothree four five display grid grid template columns 50 50 grid template rows 50px 60p...
CSS基礎之簡單介紹
元素 元素是文件結構的基礎，在css中，每個元素都會生成乙個框 或者說盒 表現形式 替換元素 替換元素的內容並非有瀏覽器直接生成，典型的莫 過於img元素了 非替換元素 大部分html元素都是非替換元素，如div元素 p元素等 塊級元素 填充父元素的內容區 行內元素 在文字行內生成元素框 宣告css...
CSS基礎之簡單介紹
網頁誕生初期，沒有描述樣式的語言，建立了很多用於描述樣式的標籤。但這些標籤破壞了html作為一門結構語言的表現。於是，w3c在1995年開始起草css，提出將結構和樣式分離的解決方案。元素是文件結構的基礎，在css中，每個元素都會生成乙個框 或者說盒 表現形式 替換元素 替換元素的內容並非有瀏覽器直...