本次我把CSS中的重難點整理出來，總共54個核心知識點，供大家複習，希望能幫到大家。這些重難點是進階高薪必需要掌握的知識點，同時也是面試必問的內容。
因爲涉及的內容較多，我分5篇內容發出來，好逐一進行讓大家消化這些內容，本次我把前1-12個CSS重難點整理出來，具體內容如下：
- CSS選擇器與優先級
- CSS中可繼承與不可繼承屬性有哪些
- display的block 、inline、inline-block的區別？
- line-height 繼承問題 ？
- min-width、max-width、width的包含(優先級)關係
- display屬性值及作用
- 如何消除inline-block元素或圖片之間的空白間隙？
- display:none與visibility:hidden的區別？
- 僞元素與僞類的區別和作用？對盒子模型的理解？
- 單行、多行文本溢出隱藏？
- 替換元素的概念與計算規則？
1、CSS選擇器與優先級
CSS選擇器的優先級比較規則
上面我們把選擇器分爲了 6 個等級，那麼選擇器在比較時，也是按等級逐個來比較的。
第一層比較：找第一等級選擇器 ，如果有以這個樣式爲主 ，如果沒有，則看第二等級選擇器
第二層比較：找第二等級選擇器 ，個數多的權重最高，如果都沒有，則看第三等級選擇器。
第三層比較：找第三等級選擇器 ，個數多的權重最高，如果都沒有，則看第四等級選擇器。
第四層比較：找第四等級選擇器 ，個數多的權重最高，如果都沒有，則看第五等級選擇器。
第五層比較：找五等級選擇器 ，個數多的權重最高，如果都沒有，則看第六等級選擇器
第六層比較：找六等級選擇器 ，個數多的權重最高，如果都沒有，看是否繼承父元素樣式。
如果在比較時，選擇器權重優先級相同，那寫在後面的樣式會覆蓋掉前面的樣式
特別注意，易錯點
選擇器最終都是要選擇到元素本身才可以，否則元素的樣式則以默認或繼承過來的樣式爲主，默認和繼承的樣式權重最低
!important 的作用是提升優先級。換句話說，加了這句的樣式的優先級是最高的（比行間樣式的優先級還高），不過這種方式基本不用，因爲不利於 css 樣式的重寫和 js 對樣式的操作。
2、CSS中可繼承與不可繼承屬性有哪些
可繼承屬性
字體系列的屬性：font-family、font-weight、font-size、font-style
文本系列屬性：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、color
列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image
其它：visibility、cursor
不可繼承
盒模型相關：margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、定位與浮動：position、left、right、top、bottom、z-index、float、clear其它：display、overflow、able-layout、vertical-align、page-break-after、page-bread-before、unicode-bidi。
3、display的block 、inline、inline-block的區別？
block： 會獨佔一行，可以設置 width、height、margin 和 padding 屬性；
inline： 元素不會獨佔一行，設置 width、height 屬性無效。但可以設置水平方向的 margin 和 padding 屬性，設置垂直方向的 padding 和 margin無效；
inline-block： 元素可以設置width、height、margin和padding屬性，並且不會獨佔一行，之後的內聯對象會被排列在同一行內。
4、line-height 繼承問題 ？
line-height 值的三種單位，在繼承時的差異點。
<style>
.box {width: 350px;height: 100px;background-color: pink;font-size: 30px;
line-height: 50px; /*情況一：子元素直接繼承父元素值*/
/*line-height:2; 情況二：子元素直接繼承父元素值*/
/*line-height:200%; 情況三：子元素繼承%百分比換算後的值 200%*30=60px */
}
.item1 {font-size: 20px;
/*情況一：從父元素直接繼承過來 line-height:50px; */
/*情況二：從父元素直接繼承過來 line-height:2; 最終2*20px 子元素行高爲40px*/
/*情況三：子元素繼承父元素%百分比換算後的值60px ，所以子元素line-height:60px*/
}
</style>
<body>
<div class="box">
<div class="item1">直接繼承父元素的line-height:50px;</div>
</div>
</body>5、min-width、max-width、width的包含(優先級)關係
屬性的含義：
min-width 限制元素的最小寬度
max-width 限制元素的最大寬度
width 元素的寬度
三者之間的優先級：
min-width > max-width > width 即使width後面出現!important
當瀏覽器縮小導致元素寬度小於 min-width 時，元素的 width 就會被 min-width 的值取代，瀏覽器出現滾動條來容納元素。
當瀏覽器放大導致元素的寬度大於 max-width 時，元素的 width 就會被 max-width 值取代。
當 min-width 值大於 max-width 時，則以 min-width 值爲準。
<style>
.box {
min-width: 600px;
max-width: 1000px;
/*當瀏覽器縮放過程中，計算得到width值<min-width時，則寬度爲600px*/
/*當瀏覽器放大程中，計算得到width值>max-width時，則寬度爲1000px*/
width: 100%;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="box"></div>
<div class="item"></div>
</body>6、display屬性值及作用
display的屬性值非常多，以下列出目前常見的
8、如何消除inline-block元素或圖片之間的空白間隙？
給圖片或元素設置float:left; 不足：有些容器不能設置浮動，會影響到後面元素等
將所有元素寫在同一行，不要換行。不足：代碼不美觀
將元素的父元素設置font-size:0; 。同時需要單獨給元素自身加上font-size樣式
將元素的父元素設置 letter-spacing:-8px; 同時需要將元素自身加上letter-spacing:normal;
對於單張圖片產生的空隙，可以加上display:block;
9、display:none與visibility:hidden的區別？
display: none; 加在元素自身，元素自身隱藏，元素佔據的位置也不存在了
visibility: hidden; 加在元素自身，元素自身隱藏，元素佔據的位置依然存
關於 display: none 與 visibility 的對比
9、僞元素與僞類的區別和作用？
僞元素： 在內容元素的前後插入額外的元素或樣式，但是這些元素實際上並不在文檔中生成。它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱爲“僞”元素。例如：
<style>
div{color:blue;}
div::before {content: "第一章：";}/*最前面加上文字 第一章*/
div::after {content: "Hot!";}/*最後面加上文字 Hot!*/
div::first-line {background: red;}/*第一行文字添加紅色背景色*/
div::first-letter {font-size: 30px;}/*第一行第一個字體大小爲30px*/
</style>
<body>
<div>我是用來測試僞元素的作用</div>
</body>
僞類： 將特殊的效果添加到特定選擇器上。它是已有元素上添加類別的，不會產生新的元素。例如：
a:hover {color: #FF00FF}
p:first-child {color: red}10、對盒子模型的理解？
CSS3 中的盒模型有以下兩種：標準盒模型、IE盒子模型(怪異盒模型)
盒模型是由四個部分組成的，分別是 margin、border、padding 和 content。
標準盒模型和 IE盒模型的區別在於設置 width 和 height 時，所對應的範圍不同：
標準盒模型的 width 和 height 屬性的範圍只包含了 content內容區
IE盒模型的 width 和 height 屬性的範圍包含了 border、padding 和 content。
盒模型轉換
可以通過修改元素的 box-sizing 屬性來改變元素的盒模型：
box-sizing: content-box表示標準盒模型（默認值）
box-sizing: border-box表示 IE 盒模型（怪異盒模型）
11、單行、多行文本溢出隱藏？
① 單行文本省略代碼
div {
white-space: nowrap; /*禁止換行*/
text-overflow: ellipsis; /*超出範圍的文本內容用省略號顯示*/
overflow: hidden; /*超出部分隱藏，只有設置了這個屬性，text-overflow:ellipsis才生效*/
}鼠標放上去，要顯示單行省略的內容，代碼如下：
div:hover {
width: auto;
}
② 多行文本省略代碼
div {
overflow: hidden; /*超出部分隱藏，只有設置了這個屬性，text-overflow:ellipsis才生效*/
text-overflow: ellipsis; /*超出範圍的文本內容用省略號顯示*/
display: -webkit-box; /*對象作爲彈性盒子模型顯示*/
-webkit-line-clamp: 2; /*來限制一個塊元素顯示文本的行數*/
-webkit-box-orient: vertical; /*必須結合的屬性，設置伸縮盒子對象的子元素的排列方式*/
}注意點：這裏要注意盒子的高度必需要滿足這個條件：height 值大小 = line-height 的值 乘以 -webkit-line-clamp 的值
鼠標放上去，要顯示單行省略的內容，代碼如下：
div:hover {
text-overflow: inherit;
overflow: visible;
-webkit-line-clamp: inherit;
}
12、替換元素的概念與計算規則？
在 CSS 中，可替換元素（replaced element）的展現效果不是由 CSS 來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立於 CSS 的。
簡單來說，它們的內容不受當前文檔的樣式的影響。CSS 可以影響可替換元素的位置，但不會影響到可替換元素自身的內容。CSS渲染模型並不考慮對此內容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之爲置換元素
典型的可替換元素有：<img>、<video>、<iframe>、<embed>
替換元素的計算規則
替換元素的尺寸從內而外分爲3類：固有尺寸、HTML尺寸和CSS尺寸。
（1）固有尺寸指的是替換內容原本的尺寸。例如，圖片、視頻作爲一個獨立文件存在的時候，都是有着自己的寬度和高度的。
（2）HTML尺寸只能通過HTML原生屬性改變，這些HTML原生屬性包括<img>的width和height屬性、<input>的size屬性、<textarea>的cols和rows屬性等。
（3）CSS尺寸特指可以通過CSS的width和height或者max-width/min-width和max-height/min-height設置的尺寸，對應盒尺寸中的content box。
這3層結構的計算規則具體如下
（1）如果沒有CSS尺寸和HTML尺寸，則使用固有尺寸作爲最終的寬高。
（2）如果沒有CSS尺寸，則使用HTML尺寸作爲最終的寬高。
（3）如果有CSS尺寸，則最終尺寸由CSS屬性決定。
（4）如果“固有尺寸”含有固有的寬高比例，同時僅設置了寬度或僅設置了高度，則元素依然按照固有的寬高比例顯示。
（6）內聯替換元素和塊級替換元素使用上面同一套尺寸計算規則。
爲幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，雲服務器部署上線，從入門到精通
- PC端項目開發（1個）
- 移動WebApp開發（2個）
- 多端響應式開發（1個）
共4大完整的項目開發 ！一行一行代碼帶領實踐開發，實際企業開發怎麼做我們就是怎麼做。從學習一開始就進入工作狀態，省得浪費時間。
從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規範，命名規範，項目代碼規範，SEO優化規範
從藍湖UI設計稿 到 PC端，移動端，多端響應式開發項目開發
- 真機調試，雲服務部署上線；
- Linux環境下 的 Nginx 部署，Nginx 性能優化；
- Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
- 企業項目域名跳轉的終極解決方案，多網站、多系統部署；
- 使用 使用 Git 在線項目部署；
這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只爲實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路 ！
過程中【不涉及】任何費用和利益，非誠勿擾 。
如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自博客園！老師會邀請你進入學習，並給你發放相關資料