本次我把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老師的博客-艾編程
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539369.html
標籤：Html/Css
上一篇：day32-JQuery05
下一篇：瀏覽器DevTools使用技巧