本次我把CSS中的重難點整理出來，總共54個核心知識點，供大家複習，希望能幫到大家。這些重難點是進階高薪必需要掌握的知識點，同時也是面試必問的內容。 因為涉及的內容較多，我分5篇內容發出來，好逐一進行讓大家消化這些內容，本次我把前1-12個CSS重難點整理出來，具體內容如下： CSS選擇器與優先順序 ...
本次我把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選擇器與優先順序
|
選擇器 |
優先順序權重 |
等級 |
實例 |
|
!important |
10000 |
一等 |
a{color:red !important;} |
|
內聯樣式 |
1000 |
二等 |
<p style='color:blue'><p> |
|
id選擇器 |
100 |
三等 |
#box{color:red;} |
|
class類選擇器、屬性選擇器、偽類選擇器 |
10 |
四等 |
.box{color:red;} |
|
標簽選擇器、偽元素選擇器 |
1 |
五等 |
div{color:red;} |
|
相鄰兄弟選擇器、子選擇器、後代選擇器、通配符選擇器 |
0 |
六等 |
h2+p{color:red;}ul>li{color:red;} |
|
繼承的樣式沒有權值 |
|
|
|
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 值的三種單位，在繼承時的差異點。
|
父元素 line-height 值 |
繼承規則 |
子元素 line-height 值 |
|
50px |
直接繼承該 值 |
50px |
|
2 |
直接繼承該比例 |
2 |
|
200% |
繼承%百分比計算後的值 如果父元素font-size: 20px; 則計算得到父元素 line-height 的值是 40px; |
40px |
<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的屬性值非常多，以下列出目前常見的
|
屬性值 |
作用 |
|
none |
元素不顯示，並且會從文檔流中移除。 |
|
block |
設置元素為塊級元素，塊級元素可以獨占⼀⾏，可設寬⾼，預設寬為父元素寬。 |
|
inline |
行內元素類型。預設寬度為內容寬度，不可設置寬高，同行顯示。 |
|
inline-block |
預設寬度為內容寬度，可以設置寬高，同行顯示。 |
|
flex |
彈性佈局，採用flex佈局元素稱為flex容器。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。項目（子項）預設沿主軸排列 |
|
grid |
網格佈局，網格是一組相交的水平線和垂直線，它定義了網格的列和行。這個元素的所有直系子元素將成為網格元素 |
|
list-item |
像塊類型元素一樣顯示，並添加樣式列表標記。 |
|
table |
此元素會作為塊級表格來顯示。 |
|
inline-table |
inline-table得到的是，外⾯是“內聯盒⼦”，⾥⾯是“table盒⼦”。 |
|
table-cell |
元素會作為⼀個表格單元格顯⽰，類似 td和 th。 |
|
table-row-group |
此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。 |
|
table-header-group |
此元素會作為一個或多個行的分組來顯示（類似 <thead>）。規定應該從父元素繼承 display 屬性的值 |
|
table-footer-group |
此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。 |
|
table-row |
此元素會作為一個表格行顯示（類似 <tr>）。 |
|
table-column-group |
此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。 |
|
table-column |
此元素會作為一個單元格列顯示（類似 <col>） |
|
table-caption |
此元素會作為一個表格標題顯示（類似 <caption>） |
|
inherit |
規定應該從父元素繼承 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 的對比
|
區別 |
display: none |
visibility: hidden |
|
空間占據性 |
不占據空間 |
占據原空間 |
|
在渲染樹中 |
不渲染元素 |
渲染元素，只是不可見 |
|
重排與重繪 |
修改此屬性，會產生迴流與重繪 |
修改此屬性不會產生重排，只會產生重繪 |
|
繼承性 |
非繼承屬性，子孫節點會隨著父節點從渲染樹消失，通過修改子孫節點的屬性也無法顯示； |
繼承屬性，可通過設置visibility:visible可以讓子孫節點顯示 |
|
對子元素影響 |
子孫元素全部隱藏不可見。並且只要父元素隱藏，子孫沒有任何辦法可見 |
子孫元素全部不可見，但是給子孫加上 visibility: visible;時，子孫可見。 |
|
事件觸發 |
不觸發 |
不觸發 |
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天挑戰學習計劃，來自博客園！老師會邀請你進入學習，並給你發放相關資料
30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程
