34、CSS高频前端面试题之CSS基础
參考：https://juejin.cn/post/6905539198107942919
目錄
一、CSS基礎
1. CSS選擇器及其優先級
2、CSS中可繼承與不可繼承屬性有哪些
2.1 無繼承性的屬性
2.2 有繼承性的屬性
3、display的屬性值及其作用
4、display的block、inline和inline-block的區別
5. 隱藏元素的方法有哪些
6. link和@import的區別
7. transition和animation的區別
8、對盒模型的理解
9、為什么有時候?translate來改變位置?不是定位？
10、li 與 li 之間有看不見的空白間隔是什么原因引起的？如何解決？
11、CSS3中有哪些新特性（10個）
?12、常見的圖片格式及使用場景
13、對 CSSSprites 的理解
14、margin 和 padding 的使用場景
15、對line-height 的理解及其賦值方式
16、CSS 優化和提高性能的方法有哪些？
17、CSS預處理器/后處理器是什么？為什么要使用它們？
18.?Sass、Less 是什么？為什么要使用他們？
19、::before 和 :after 的雙冒號和單冒號有什么區別？
20. display:inline-block 什么時候會顯示間隙？
21. 單行、多行文本溢出隱藏
22、對媒體查詢的理解？
23. 對 CSS 工程化的理解
29. 如何判斷元素是否到達可視區域
30. z-index屬性在什么情況下會失效
一、CSS基礎
1. CSS選擇器及其優先級
| id選擇器 | #id | 100 |
| 類選擇器 | .classname | 10 |
| 屬性選擇器 | input[type="text"]{ ????????????color:?red; ????????} | 10 |
| 偽類選擇器 | li:last-child 或?a:hover | 10 |
| 標簽選擇器 | div | 1 |
| 偽元素選擇器 | li::after | 1 |
| 相鄰兄弟選擇器 | div + p ：選擇緊跟 <div> 元素的首個 <p> 元素。 | 0 |
| 子選擇器 | div > p ：選擇父元素是 <div> 的所有 <p> 元素。 | 0 |
| 后代選擇器 | div p ：選擇 <div> 元素內的所有 <p> 元素 | 0 |
| 通配符選擇器 | * | 0 |
（1）選擇器的優先級：
- 標簽選擇器、偽元素選擇器：1
- 類選擇器、偽類選擇器、屬性選擇器：10
- id 選擇器：100
- 內聯樣式：1000
（2）注意事項：
- !important聲明的樣式的優先級最高；
- 如果優先級相同，則最后出現的樣式生效；
- 繼承得到的樣式的優先級最低；
- 通用選擇器（*）、子選擇器（>）和相鄰同胞選擇器（+）并不在這四個等級中，所以它們的權值都為 0 ；
- 樣式表的來源不同時，優先級順序為：內聯樣式 > 內部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認樣式。
（3）偽類與偽元素選擇器的區別
1）偽元素：在內容元素的前后插入額外的元素或樣式，但是這些元素實際上并不在文檔中生成。它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱為“偽”元素。
例如·：在p標簽前后添加了兩個偽元素，不在文檔生成，只在外部顯示可見
<style>p::before {content:"第一章：";} /* 在p標簽前面添加偽元素。內容為：第一章 */p::after {content:"Hot!"; color: red;} /* 在p標簽后面添加偽元素。 */ </style> </head> <body><p>偽元素</p> </body>?
2）偽類：將特殊的效果添加到特定選擇器上。它是已有元素上添加類別的，不會產生新的元素。
例如：為a標簽添加偽類，當鼠標放到a標簽，a標簽中的字體變紅。
a:hover{color: red; /* 為a標簽添加偽類。 */} </style> </head> <body><a href="#">偽類</a> </body>
3）區別：
- 偽元素在一個選擇器中只能出現一次，并且只能出現在末尾
- 偽類與偽元素的本質區別就是是否抽象創造了新元素（偽元素抽象創建了新元素）。
- 偽類的效果可以通過添加實際的類來實現；偽元素的效果可以通過添加實際的元素來實現
它們的本質區別就是是否抽象創造了新元素
（4）偽類選擇器
1）鏈接偽類選擇器：hover、active、link、visited。
2）結構偽類選擇器：根據文檔結構來選擇。
- li:nth-child(odd)：排在奇數的li。第1個、第3個...
- li:nth-child(even)：排在偶數的li。?第2個、第4個...
- li:nth-child(2n)：2n：是指第2、4、6、8等個li。若為3n：是指第3、6、9、12等個li。若為4n：是指第4、8、12、16等個li。
舉例：
<ul><li>靜夜思</li><li>李白</li><li>唐</li><li>床前明月光，</li><li>疑是地上霜。</li><li>舉頭望明月，</li><li>低頭思故鄉。</li></ul>?<1>將所有奇數列，變為紅色：li:nth-child(odd/2n-1)
li:nth-child(odd){ /*方法一*/color: red;}li:nth-child(2n-1){ /*方法二*/color: red;}??
?<2>第一個元素顏色不變，其它元素的顏色變為紅色：li:nth-child(n+2)
li:nth-child(n+2){ /*從第2個元素開始變化*/color: red;}?<3>最后一個元素顏色不變，其它元素的顏色變為紅色：li:nth-last-child(n+2)
li:nth-last-child(n+2){ /*從倒數第2個元素開始變化*/color: red;}?
補充：?
- li: nth-of-type(n)：父標簽包含多個類型的子元素時，選擇類型為li的子元素
- li:nth-last-of-type(n)：從后向前查找
2、CSS中可繼承與不可繼承屬性有哪些
繼承就是指子節點默認使用父節點的樣式屬性。
2.1 無繼承性的屬性
1）display：規定元素應該生成的框的類型
2）文本屬性：
- vertical-align：垂直文本對齊
- text-decoration：規定添加到文本的裝飾
- text-shadow：文本陰影效果
- white-space：空白符的處理
- unicode-bidi：設置文本的方向
3）盒子模型的屬性：width、height、margin、border、padding
4）背景屬性：background、background-color、background-image、background-repeat、background-position、background-attachment
5）定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6）生成內容屬性：content、counter-reset、counter-increment
7）輪廓樣式屬性：outline-style、outline-width、outline-color、outline
8）頁面樣式屬性：size、page-break-before、page-break-after
9）聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
2.2 有繼承性的屬性
1）字體系列屬性
- font-family：字體系列
- font-weight：字體的粗細
- font-size：字體的大小
- font-style：字體的風格
2）文本系列屬性
- text-indent：文本縮進
- text-align：文本水平對齊
- line-height：行高
- word-spacing：單詞之間的間距
- letter-spacing：中文或者字母之間的間距
- text-transform：控制文本大小寫（就是uppercase、lowercase、capitalize這三個）
- color：文本顏色
3）元素可見性
- visibility：控制元素顯示隱藏
4）列表布局屬性
- list-style：列表風格，包括list-style-type、list-style-image等
5）光標屬性
- cursor：光標顯示為何種形態
記憶方法：
不可繼承的屬性太多了不要背，記住可以繼承的屬性有哪些就行了。
可以繼承的屬性很少，只有顏色，文字，字體間距行高對齊方式，和列表的樣式可以繼承。
- 所有元素可繼承：visibility和cursor。?
- 內聯元素（行內元素）可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。?
- 終端塊狀元素可繼承：text-indent和text-align。?
- 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。
?
3、display的屬性值及其作用
| none | 元素不顯示，并且會從文檔流中移除。 |
| block | 塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示。 |
| inline | 行內元素類型。默認寬度為內容寬度，不可設置寬高，同行顯示。 |
| inline-block | 默認寬度為內容寬度，可以設置寬高，同行顯示。 |
| list-item | 像塊類型元素一樣顯示，并添加樣式列表標記。 |
| table | 此元素會作為塊級表格來顯示。 |
| inherit | 規定應該從父元素繼承display屬性的值。 |
4、display的block、inline和inline-block的區別
（1）block： 會獨占一行，多個元素會另起一行，可以設置width、height、margin和padding屬性；
（2）inline： 元素不會獨占一行，設置width、height屬性無效。但可以設置水平方向的margin和padding屬性，不能設置垂直方向的padding和margin；注意：在垂直方向上設置內邊距（padding-bottom），在顯示上是將元素范圍擴大了，但實際上不會對周圍元素有任何影響。
（3）inline-block： 將對象設置為inline對象，對象的內容作為block對象呈現，之后的內聯對象會被排列在同一行內。
對于行內元素和塊級元素，其特點如下：
（1）行內元素
- 設置寬高無效；
- 可以設置水平方向的margin和padding屬性，不能設置垂直方向的padding和margin；
- 不會自動換行；
（2）塊級元素
- 可以設置寬高；
- 設置margin和padding都有效；
- 可以自動換行；
- 多個塊狀，默認排列從上到下。
5. 隱藏元素的方法有哪些
- display: none：渲染樹不會包含該渲染對象，因此該元素不會在頁面中占據位置，也不會響應綁定的監聽事件。
- visibility: hidden：元素在頁面中仍占據空間，但是不會響應綁定的監聽事件。visibility: hidden會被子類繼承，子類也可以通過顯示的設置visibility: visible;來反隱藏。
- opacity: 0：將元素的透明度設置為 0，來實現元素的隱藏。元素在頁面中仍然占據空間，并且能夠響應元素綁定的監聽事件。
- position: absolute：通過使用絕對定位將元素移除可視區域內，以此來實現元素的隱藏，不會影響布局，能夠響應元素綁定的監聽事件。
- z-index: 負值：來使其他元素遮蓋住該元素，以此來實現隱藏。當前dom脫離文檔流的前提下，才起作用。被其他元素遮擋部分，無法響應事件。
- transform: scale(0,0)：將元素縮放為 0，來實現元素的隱藏。這種方法下，元素仍在頁面中占據位置，但是不會響應綁定的監聽事件。
- clip/clip-path ：使用元素裁剪的方法來實現元素的隱藏，這種方法下，元素仍在頁面中占據位置，但是不會響應綁定的監聽事件。
總結：
visibility：仍在頁面占據空間，不響應事件；動態修改此屬性會引起重繪。
opacity：仍在頁面占據空間，響應事件；
display：不占據空間，不響應事件；動態改變此屬性時會引起重排；
position不占據空間，響應事件；???
display:none與visibility:hidden的區別：
1）在渲染樹中
- display:none?會讓元素完全從渲染樹中消失，渲染時不會占據任何空間；
- visibility:hidden?不會讓元素從渲染樹中消失，渲染的元素還會占據相應的空間，只是內容不可見。
2）是否是繼承屬性
- display:none?是非繼承屬性，子孫節點會隨著父節點從渲染樹消失，通過修改子孫節點的屬性也無法顯示；
- visibility:hidden?是繼承屬性，子孫節點消失是由于繼承了hidden，通過設置visibility:visible可以讓子孫節點顯示；
3）修改常規文檔流中元素的 display 通常會造成文檔的重排，但是修改visibility屬性只會造成本元素的重繪；
4）如果使用讀屏器，設置為display:none的內容不會被讀取，設置為visibility:hidden的內容會被讀取。
6. link和@import的區別
兩者都是外部引用CSS的方式，它們的區別如下：
- link除了引用樣式文件，還可以引用圖片等資源文件；而import是CSS提供的語法規則，只引用樣式文件 。
- link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。
- link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
- link支持使用Javascript控制DOM去改變樣式；而@import不支持。
7. transition和animation的區別
- transition是過渡屬性，強調過渡，它的實現需要觸發一個事件（比如鼠標移動上去，焦點，點擊等）才執行動畫。它類似于flash的補間動畫，設置一個開始關鍵幀，一個結束關鍵幀。
- animation是動畫屬性，它的實現不需要觸發事件，設定好時間之后可以自己執行，且可以循環一個動畫。它也類似于flash的補間動畫，但是它可以設置多個關鍵幀（用@keyframe定義）完成動畫。
7.1 transition 過渡屬性
單純的代碼不會觸發任何過渡操作，需要通過用戶的行為（如點擊，懸浮等）觸發，可觸發的方式有：??:hoever? ?:focus? ? :checked? ?媒體查詢觸發? ? JavaScript觸發。
?（1）屬性：屬性可以分開寫，也可以放在一起寫
- liner ：勻速
- ease-in：減速
- ease-out：加速
- ease-in-out：先加速再減速
- cubic-bezier：三次貝塞爾曲線
注意：合起來寫transition的屬性時，第一個time會解析為過渡所需時間transiton-duration，第二個解析為過渡延遲時間transition-delay。
（2）transition局限性
transition的優點在于簡單易用，但是它有幾個很大的局限。
CSS Animation就是為了解決這些問題而提出的。
（3） 舉例
圖片的寬高本來都是15px，想要讓它1秒的時間內過渡到寬高為450px，通過：hover來觸發。
鼠標移入時，寬高會過渡到450px; 移出時，寬高過渡回15px
img{height:15px;width:15px;transition: 1s 1s height ease;/*合在一起*/ } 或者： img{height：15px;width: 15px;transition-property: height;transition-duration: 1s;transition-delay: 1s;transition-timing-function: ease;/*屬性分開寫*/ } img:hover{height: 450px;width: 450px; }7.2?animation動畫屬性
CSS3的animation屬性可以像Flash制作動畫一樣，通過控制關鍵幀來控制動畫的每一步，實現更為復雜的動畫效果。ainimation實現動畫效果主要由兩部分組成：
注意：animation屬性到目前位置得到了大多數瀏覽器的支持，但是，需要添加瀏覽器前綴哦！?
（1）animation動畫屬性
（2）關鍵幀 @keyframes
CSS3的animation制作動畫效果主要包括兩部分：
@keyframes就是關鍵幀。這個幀與Flash里的幀類似，一個動畫中可以有很多個幀。
一個@keyframes中的樣式規則是由多個百分比構成的，可以在這個規則上創建多個百分比，從而達到一種不斷變化的效果。另外，@keyframes必須要加webkit前綴。
（3）舉例
div的背景色變化，寬度變為300px，通過：hover來觸發。
/*情況一：鼠標放到div上時觸發*/div{background: cadetblue;height: 100px;width: 100px;}/*（1）使用animation調用關鍵幀聲明的動畫*/div:hover{-webkit-animation: 3s changeColor;animation: 3s changeColor; /*播放所需時間3s，指定關鍵幀changeColor*/}/*（2）定義關鍵幀*/@keyframes changeColor{ /*定義關鍵幀changeColor*/0% {background: cornflowerblue;width: 150px;} /*開始狀態 （可在關鍵幀中修改多個屬性）*/50% {background: crimson; width: 200px;} /*中間狀態*/100% {background: plum; width: 300px;} /*結束狀態*/}@-webkit-keyframes changeColor{ /*定義關鍵幀changeColor*/0% {background: cornflowerblue;width: 150px;} /*開始狀態*/50% {background: crimson; width: 200px;} /*中間狀態*/100% {background: plum; width: 300px;} /*結束狀態*/}也可頁面加載時，自動觸發動畫。將animation屬性放到div
/*情況二：若直接將animation屬性加到div，進入頁面會自動執行動畫*/div{background: cadetblue;height: 100px;width: 100px;-webkit-animation: 3s changeColor; animation: 3s changeColor; /*播放所需時間3s，指定關鍵幀changeColor*/}瀏覽器兼容性
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。
Chrome 和 Safari 需要前綴 -webkit-。
?7.3?區別
8、對盒模型的理解
CSS3中的盒模型有以下兩種：
- 標準盒子模型
- IE盒子模型
1）盒模型都是由四個部分組成的，分別是margin、border、padding和content。
2）標準盒模型和IE盒模型的區別在于設置width和height時，所對應的范圍不同：
- 標準盒模型的width和height屬性的范圍只包含了content，
- IE盒模型的width和height屬性的范圍包含了border、padding和content。
3）可以通過修改元素的box-sizing屬性來改變元素的盒模型：
- box-sizeing: content-box表示標準盒模型（默認值）
- box-sizeing: border-box表示IE盒模型（怪異盒模型）
9、為什么有時候?translate來改變位置?不是定位？
translate 是 transform 屬性的?個值。改變transform或opacity不會觸發瀏覽器重新布局（reflow）或重繪（repaint），只會觸發復合（compositions）。
?改變絕對定位會觸發重新布局，進?觸發重繪和復合。transform使瀏覽器為元素創建?個 GPU 圖層，但改變絕對定位會使?到 CPU。 因此translate()更?效，可以縮短平滑動畫的繪制時間。
translate改變位置時，元素依然會占據其原始空間，絕對定位就不會發?這種情況。
10、li 與 li 之間有看不見的空白間隔是什么原因引起的？如何解決？
1）問題：在寫頁面時，有時會需要將<li>這個塊狀元素橫排顯示，此時就需要將display屬性設置為inline-block，此時問題出現了，在兩個<li>元素之間會出現大約8px左右的空白間隙，例：
/*CSS*/ li{display: inline-block;list-style: none;width: 100px;height: 100px;}.l1{ background: pink; }.l2{ background: gray; }.l3{ background: black;}<!-- html --> <ul><li class="l1"></li><li class="l2"></li><li class="l3"></li> </ul>
2）原因：瀏覽器會把inline內聯元素間的空白字符（空格、換行、Tab等）渲染成一個空格。為了美觀，通常是一個<li>放在一行，這導致<li>換行后產生換行字符，它變成一個空格，占用了一個字符的寬度。
3）解決辦法：
1）為<li>設置float:left。
不足：有些容器是不能設置浮動，如左右切換的焦點圖等。
2）將所有<li>寫在同一行。
不足：代碼不美觀。
3）將<ul>內的字符尺寸直接設為0，即font-size:0。
不足：<ul>中的其他字符尺寸也被設為0，需要額外重新設定其他字符尺寸，且在Safari瀏覽器依然會出現空白間隔。
4）消除<ul>的字符間隔letter-spacing:-8px，
不足：這也設置了<li>內的字符間隔，因此需要將<li>內的字符間隔設為默認
letter-spacing:normal，即
.wrap ul{letter-spacing: -5px;} // ul.wrap ul li{letter-spacing: normal;} //記得設置li內字符間隔11、CSS3中有哪些新特性（10個）
（1）CSS3的選擇器
例：
（2）邊框圓角
border-radius:?8px;（3）多列布局 （multi-column layout）
column-count、column-width、column-gap、column-rule
兼容性不好，還不夠成熟
/*CSS*/ .mul-col{column-count: 3; /*列數*/column-gap: 10px; /*列之間的間隙*/column-rule: 2px solid green; /*列之間的間隔線*/ } /*HTML*/ <div class="mul-col"><div style="background: grey;"><h3>新手上路</h3></div><div style="background: palevioletred;"><h3>付款方式</h3></div><div style="background: cornflowerblue;"><h3>淘寶特色</h3></div> </div>
（4）@Font-face 特性
Font-face 可以用來引入任意字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。
@font-face { font-family: BorderWeb; src:url(BORDERW0.eot); } .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }（5）為文字和盒子添加陰影：text-shadow、box-shadow
語法：text-shadow / box-shadow:? ?h-shadow? v-shadow? ?blur? ?color;
- h-shadow表示水平陰影的位置，允許負值，該值必需。
- v-shadow表示垂直陰影的位置，允許負值，該值必需。
- blur表示陰影的距離，color表示陰影的顏色，這兩個值是可選的。
例：
/*CSS*/ .class1{ text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); box-shadow: 5px 2px 6px rgba(64, 64, 64, 0.6);}//HTML <div class="class1"><h3>新手上路</h3> </div>?
（6）CSS3 的漸變效果?
基本語法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(開始顏色值),to(結束顏色值));
- 參數type（類型）為 linear（線性漸變）
- x1 y1, x2 y2是 顏色漸變體的兩個點的坐標，從(x1,y1)到(x2,y2)
例：
.class1{ background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));} <div class="class1"></div>（7）旋轉,縮放,定位,傾斜
transform:
- 旋轉 rotate(90deg) ：沿Z軸方向順時針旋轉90度
- 伸縮 scale(0.85,0.90) ：水平方向變成原來的0.85倍，垂直方向變為原來的0.9倍
- 平移 translate(45px,30px) ：向右移動45像素，向下移動30像素的距離
- 傾斜 skew(30deg,10deg)：沿X軸傾斜30度，沿Y軸傾斜10度
（8）在CSS3中唯一引入的偽元素是 ::selection
（9）CSS3 @keyframes 規則，可以自己創建一些動畫等
例：鼠標放到div上，觸發動畫animations，維持2s（從0%變化到100%的狀態）
.main:hover{animation: animations 2s ease 0s;}@keyframes animations {0%{left: 10px;opacity: 1;}50%,70%{left: 50%;opacity: .7;margin-left:-150px;}100%{left: 100%;opacity: 0;margin-left:-300px;}}<div class="main"></div>
（10）多背景（添加多個背景）
background-image: url("images/overcast.png"),url("images/rainbow.png"), url("images/overcast.png");?12、常見的圖片格式及使用場景
（1）BMP，是無損的、既支持索引色也支持直接色的點陣圖。這種圖片格式幾乎沒有對數據進行壓縮，所以BMP格式的圖片通常是較大的文件。
（2）GIF是無損的、采用索引色的點陣圖。采用LZW壓縮算法進行編碼。文件小，是GIF格式的優點，同時，GIF格式還具有支持動畫以及透明的優點。但是GIF格式僅支持8bit的索引色，所以GIF格式適用于對色彩要求不高同時需要文件體積較小的場景。
（3）JPEG是有損的、采用直接色的點陣圖。JPEG的圖片的優點是采用了直接色，得益于更豐富的色彩，JPEG非常適合用來存儲照片，與GIF相比，JPEG不適合用來存儲企業Logo、線框類的圖。因為有損壓縮會導致圖片模糊，而直接色的選用，又會導致圖片文件較GIF更大。
（4）PNG-8是無損的、使用索引色的點陣圖。PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的情況下，應該盡可能的使用PNG-8而不是GIF，因為在相同的圖片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8還支持透明度的調節，而GIF并不支持。除非需要動畫的支持，否則沒有理由使用GIF而不是PNG-8。
（5）PNG-24是無損的、使用直接色的點陣圖。PNG-24的優點在于它壓縮了圖片的數據，使得同樣效果的圖片，PNG-24格式的文件大小要比BMP小得多。當然，PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。
（6）SVG是無損的矢量圖。SVG是矢量圖意味著SVG圖片由直線和曲線以及繪制它們的方法組成。當放大SVG圖片時，看到的還是線和曲線，而不會出現像素點。SVG圖片在放大時，不會失真，所以它適合用來繪制Logo、Icon等。
（7）WebP是谷歌開發的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的點陣圖。從名字就可以看出來它是為Web而生的，就是說相同質量的圖片，WebP具有更小的文件體積。現在網站上充滿了大量的圖片，如果能夠降低每一個圖片的文件大小，那么將大大減少瀏覽器和服務器之間的數據傳輸量，進而降低訪問延遲，提升訪問體驗。目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，兼容性不太好。
- 在無損壓縮的情況下，相同質量的WebP圖片，文件大小要比PNG小26%；
- 在有損壓縮的情況下，具有相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%；
- WebP圖片格式支持圖片透明度，一個無損壓縮的WebP圖片，如果要支持透明度只需要22%的格外文件大小。
13、對 CSSSprites 的理解
CSSSprites（精靈圖），將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background-repeat，background-position屬性的組合進行背景定位。
1）優點：
- 利用CSS Sprites能很好地減少網頁的http請求，從而大大提高了頁面的性能，這是CSS Sprites最大的優點；
- CSS Sprites能減少圖片的字節，把3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。
2）缺點：
- 在圖片合并時，要把多張圖片有序的、合理的合并成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景。在寬屏及高分辨率下的自適應頁面，如果背景不夠寬，很容易出現背景斷裂；
- CSSSprites在開發的時候相對來說有點麻煩，需要借助photoshop或其他工具來對每個背景單元測量其準確的位置。
- 維護方面：CSS Sprites在維護的時候比較麻煩，頁面背景有少許改動時，就要改這張合并的圖片，無需改的地方盡量不要動，這樣避免改動更多的CSS，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增加了，還要改動CSS。
14、margin 和 padding 的使用場景
- margin：需要在border外側添加空白，且空白處不需要背景（色）；
- padding：需要在border內測添加空白，且空白處需要背景（色）。
15、對line-height 的理解及其賦值方式
（1）line-height的概念：
- line-height 指一行文本的高度，包含了字間距，實際上是下一行基線到上一行基線距離；
- 如果一個標簽沒有定義 height 屬性，那么其最終表現的高度由 line-height 決定，而不是容器內的文本內容；
- 把 line-height 值設置為 height 一樣大小的值可以實現單行文字的垂直居中；
（2）line-height 的賦值方式：
- 帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高
- 純數字：會把比例傳遞給后代。例如，父級行高為 1.5，子元素字體為 18px，則子元素行高為 1.5 * 18 = 27px
- 百分比：將計算后的值傳遞給后代
16、CSS 優化和提高性能的方法有哪些？
加載性能：
（1）css壓縮：將寫好的css進行打包壓縮，可以減小文件體積。
（2）css單一樣式：當需要下邊距和左邊距的時候，很多時候會選擇使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;執行效率會更高。
（3）減少使用@import，建議使用link，因為link在頁面加載時一起加載，@import是等待頁面加載完成之后再進行加載。
選擇器性能：
（1）關鍵選擇器（key selector）。選擇器的最后面的部分為關鍵選擇器（即用來匹配目標元素的部分）。CSS選擇符是從右到左進行匹配的。當使用后代選擇器時，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；
補充：
- 從右向左的規則在第一步時就篩選掉不滿足條件的葉子節點，省去了很多不必要的查詢；
- 從左向右的規則大部分性能都浪費在了不滿足條件的查找上；
- 從右向左的匹配規則效率比從左向右的匹配規則效率更高。
（2）如果規則擁有ID選擇器作為其關鍵選擇器，則不要為規則增加標簽。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）。
（3）避免使用通配規則，如*{}計算次數驚人，只對需要用到的元素進行選擇。
（4）盡量少的使用標簽進行選擇，而是用class。
（5）盡量少的去使用后代選擇器，降低選擇器的權重值。后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關聯每一個標簽元素。
（6）了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復指定規則。
渲染性能：
（1）慎重使用高性能屬性：浮動、定位。
（2）盡量減少頁面重排、重繪。
（3）去除空規則：｛｝。空規則的產生原因一般來說是為了預留樣式。去除這些空規則無疑能減少css文檔體積。
（4）屬性值為0時，不加單位。
（5）屬性值為浮動小數0.**，可以省略小數點之前的0。
（6）標準化各種瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在后。
（7）不使用@import前綴，它會影響css的加載速度。
（8）css雪碧圖，同一頁面相近部分的小圖標，方便使用，減少頁面的請求次數，但是同時圖片本身會變大，使用時，優劣考慮清楚，再使用。
（10）正確使用display的屬性，由于display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。
（11）不濫用web字體。對于中文網站來說WebFonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷性能。
可維護性、健壯性：
（1）將具有相同屬性的樣式抽離出來，整合并通過class在頁面中進行使用，提高css的可維護性。
（2）樣式與內容分離：將css代碼定義到外部css中。
17、CSS預處理器/后處理器是什么？為什么要使用它們？
1）預處理器
- 用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。
- 通俗的說，“CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，然后再編譯成正常的 CSS 文件，以供項目使用。
- CSS 預處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題
- 目前最主流的 CSS 預處理器：Sass、LESS、scss（項目用到了）、Stylus 、Turbine、Swithch css。
? ? 優點：語言級邏輯處理，動態特性，改善項目結構
? ? 缺點：采用特殊語法，框架耦合度高，復雜度高
2）后處理器， 如： postCss，通常是在完成的樣式表中根據css規范處理css，讓其更加有效。目前最常做的是給css屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。（是對 CSS 進行處理，并最終生成 CSS 的 預處理器，它屬于廣義上的 CSS 預處理器。）
? ? 優點：使用 CSS 語法，容易進行模塊化，貼近 CSS 的未來標準
? ? 缺點：邏輯處理能力有限.
3）使用原因：
- 結構清晰， 便于擴展
- 可以很方便的屏蔽瀏覽器私有語法的差異
- 可以輕松實現多重繼承
- 完美的兼容了CSS代碼，可以應用到老項目中
補充：
Js中可以自定義變量，而CSS僅僅是一個標記語言，不是編程語言，因此不可以自定義變量，不可以引用等。CSS有具體以下幾個缺點：
- 語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重復的選擇器；
- 沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護。這就導致了我們在工作中無端增加了許多工作量。
而使用CSS預處理器，提供 CSS 缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大提高了我們的開發效率。
18.?Sass、Less 是什么？為什么要使用他們？
- 他們都是 CSS 預處理器，是 CSS 上的一種抽象層。他們是一種特殊的語法/語言編譯成 CSS。
- 例如 Less 是一種動態樣式語言，將 CSS 賦予了動態語言的特性，如變量，繼承，運算， 函數；
- LESS 既可以在客戶端上運行 (支持 IE 6+, Webkit, Firefox)，也可以在服務端運行 (借助 Node.js)。?
- less是在現有的CSS語法上，添加了很多額外的功能。就語法規則而言，LESS和Sass一樣，都是使用CSS的標準語法，只是LESS的源文件的擴展名是“.less”。
18.1 為什么要使用它們？
- 結構清晰，便于擴展。 可以方便地屏蔽瀏覽器私有語法差異。封裝對瀏覽器語法差異的重復處理， 減少無意義的機械勞動。
- 可以輕松實現多重繼承。 完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
18.2 Sass和Less的比較
不同點：
Less環境較Sass簡單；
Less使用較Sass簡單：LESS 并沒有裁剪 CSS 原有的特性，而是在現有 CSS 語法的基礎上，為 CSS 加入程序式語言的特性；
從功能出發，Sass較Less略強大一些：sass有變量和作用域；sass有函數的概念；有數據結構；有進程控制（if、for、extend等）；
Less與Sass處理機制不一樣：Less是通過客戶端處理的，Sass是通過服務端處理，相比較之下Less解析會慢一點；
關于變量在Less和Sass中的唯一區別就是Less用@，Sass用$。
相同點：
1、混入(Mixins)——class中的class；
2、參數混入——class中可以傳遞參數，就像函數一樣；
3、嵌套規則——Class中嵌套class，從而減少重復的代碼；
4、運算——CSS中用上數學；
5、顏色功能——可以編輯顏色；
6、名字空間(namespace)——分組樣式，從而可以被調用；
7、作用域——局部修改樣式；
8、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。
18.3?sass和scss
現在的Sass已經有了兩套語法規則：
- 一個依舊是用縮進作為分隔符來區分代碼塊的；
- 另一套規則和CSS一樣采用了大括號（｛｝）作為分隔符，又名SCSS。
SCSS 是 Sass 3 引入新的語法，完全兼容sass之前的功能，又有了些新增能力。
唯一不同的是，sass是靠縮進表示嵌套關系，scss是花括號。
- sass
- scss
（1）使用$符號去聲明一個變量
（2）嵌套
可以使用&引用父元素。比如a:hover偽類，可以寫成：
a {&:hover { color:red; }}（3）繼承?@extend?
SASS允許一個選擇器，繼承另一個選擇器。使用@extend?
?（4）混入?@mixin 、@include
Mixin是可以重用的代碼塊。使用@mixin命令，定義一個代碼塊；使用@include命令，調用這個mixin。
（5）引入外部文件@import
?
更多關于scss和sass，參考https://blog.csdn.net/qq_40323256/article/details/109138173
19、::before 和 ::after 的雙冒號和單冒號有什么區別？
（1）冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。
（2）::before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。并不存在于dom之中，只存在在頁面之中。
注意： :before 和 :after 這兩個偽元素，是在CSS2.1里新出現的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進化，在CSS3的規范里，偽元素的語法被修改成使用雙冒號，成為::before、::after。
20. display:inline-block 什么時候會顯示間隙？
- 有空格時會有間隙，可以刪除空格解決；
- margin正值時，可以讓margin使用負值解決；
- 使用font-size時，可通過設置font-size:0、letter-spacing、word-spacing解決；
21. 單行、多行文本溢出隱藏
- 單行文本溢出
- 多行文本溢出
注意：由于上面的三個屬性都是 CSS3 的屬性，沒有瀏覽器可以兼容，所以要在前面加一個-webkit- 來兼容一部分瀏覽器。
22、對媒體查詢的理解？
媒體查詢適合web??應對不同型號的設備?做出對應的響應適配（比如根據頁面不同的寬度、高度等，做出不同的響應）。
- 媒體查詢包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。
- 如果媒體查詢中指定的媒體類型 匹配 展示?檔所使?的設備類型，并且所有的表達式的值都是true，那么該媒體查詢的結果為true。
- 那么媒體查詢內的樣式將會?效。
簡單來說，使用 @media 查詢，可以針對不同的媒體類型定義不同的樣式。@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是需要設置設計響應式的頁面，@media 是非常有用的。當重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
<!-- link元素中的CSS媒體查詢 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- 樣式表中的CSS媒體查詢 --> <style> @media (max-width: 600px) { //對寬度大于600px的頁面應用樣式.facet_sidebar { display: none; } } </style> 復制代碼23. 對 CSS 工程化的理解
CSS 工程化是為了解決以下問題：
以下三個方向都是時下比較流行的、普適性非常好的 CSS 工程化實踐：
- 預處理器：Less、 Sass 等；
- 重要的工程化插件： 后處理器PostCss；
- Webpack loader 等 。
基于這三個方向，可以衍生出一些具有典型意義的子問題，這里我們逐個來看：
（1）預處理器：為什么要用預處理器？它的出現是為了解決什么問題？
預處理器，其實就是 CSS 世界的“輪子”。預處理器支持我們寫一種類似 CSS、但實際并不是 CSS 的語言，然后把它編譯成 CSS 代碼： 為什么寫 CSS 代碼寫得好好的，偏偏要轉去寫“類 CSS”呢？
這三點是傳統 CSS 所做不到的，也正是預處理器所解決掉的問題。預處理器普遍會具備這樣的特性：
- 嵌套代碼的能力，通過嵌套來反映不同 css 屬性之間的層級關系 ；
- 支持定義 css 變量；
- 提供計算函數；
- 允許對代碼片段進行 extend 和 mixin；
- 支持循環語句的使用；
- 支持將 CSS 文件模塊化，實現復用。
（2）后處理器PostCss：PostCss 是如何工作的？我們在什么場景下會使用 PostCss？
- 它和預處理器的不同就在于，預處理器處理的是 類CSS，而 PostCss 處理的就是 CSS 本身。
- PostCss 可以編譯尚未被瀏覽器廣泛支持的先進的 CSS 語法，還可以自動為一些需要額外兼容的語法增加前綴。
- 更強的是，由于 PostCss 有著強大的插件機制，支持各種各樣的擴展，極大地強化了 CSS 的能力。
PostCss 在業務中的使用場景非常多：
- 提高 CSS 代碼的可讀性：PostCss 其實可以做類似預處理器能做的工作；
- 當我們的 CSS 代碼需要適配低版本瀏覽器時，PostCss 的 Autoprefixer 插件可以幫助我們自動增加瀏覽器前綴；
- 允許我們編寫面向未來的 CSS：PostCss 能夠幫助我們編譯 CSS next 代碼；
（3）Webpack 能處理 CSS 嗎？如何實現？
1）Webpack 能處理 CSS 嗎：
- Webpack 在裸奔的狀態下，是不能處理 CSS 的，Webpack 本身是一個面向 JavaScript 且只能處理 JavaScript 代碼的模塊化打包工具；
- Webpack 在 loader 的輔助下，是可以處理 CSS 的。
2）如何用 Webpack 實現對 CSS 的處理：
- Webpack 中操作 CSS 需要使用的兩個關鍵的 loader：css-loader 和 style-loader
- 還需要了解每個 loader 都做了什么事情：
- css-loader：導入 CSS 模塊，對 CSS 代碼進行編譯處理；
- style-loader：創建style標簽，把 CSS 內容寫入標簽。
在實際使用中，css-loader 的執行順序一定要安排在 style-loader 的前面。因為只有完成了編譯過程，才可以對 css 代碼進行插入；若提前插入了未編譯的代碼，那么 webpack 是無法理解這坨東西的，它會無情報錯。
3）談談你對webpack的看法
- webpack是一個模塊打包工具，可以使用它管理項目中的模塊依賴，并編譯輸出模塊所需的靜態文件。
- 它可以很好地管理、打包開發中所用到的HTML,CSS,JavaScript和靜態文件（圖片，字體）等，讓開發更高效。
- 對于不同類型的依賴，webpack有對應的模塊加載器，而且會分析模塊間的依賴關系，最后合并生成優化的靜態資源。
4）webpack的基本功能和工作原理？
- 代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等等
- 文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合并圖片等
- 代碼分割：提取多個頁面的公共代碼、提取首屏不需要執行部分的代碼讓其異步加載
- 模塊合并：在采用模塊化的項目有很多模塊和文件，需要構建功能把模塊分類合并成一個文件
- 自動刷新：監聽本地源代碼的變化，自動構建，刷新瀏覽器
- 代碼校驗：在代碼被提交到倉庫前需要檢測代碼是否符合規范，以及單元測試是否通過
- 自動發布：更新完代碼后，自動構建出線上發布代碼并傳輸給發布系統。
5）webpack構建過程
- 從entry里配置的module開始遞歸解析entry依賴的所有module
- 每找到一個module，就會根據配置的loader去找對應的轉換規則
- 對module進行轉換后，再解析出當前module依賴的module
- 這些模塊會以entry為單位分組，一個entry和其所有依賴的module被分到一個組Chunk
- 最后webpack會把所有Chunk轉換成文件輸出
- 在整個流程中webpack會在恰當的時機執行plugin里定義的邏輯
29. 如何判斷元素是否到達可視區域
以圖片顯示為例：
- window.innerHeight 是瀏覽器可視區的高度；
- document.body.scrollTop || document.documentElement.scrollTop 是瀏覽器滾動過的距離；
- imgs.offsetTop 是imgs元素頂部距離文檔頂部的高度（包括滾動條的距離）；
- 內容到達顯示區域，需滿足：
? ?img.offsetTop < window.innerHeight + document.body.scrollTop;
? ?即img頂部距離文檔頂部的高度 小于 （可視區的高度+滾動過的高度）
30. z-index屬性在什么情況下會失效
通常 z-index 的使用是在有兩個重疊的標簽，在一定的情況下控制其中一個在另一個的上方或者下方出現。z-index值越大就越是在上層。z-index元素的position屬性需要是relative，absolute或是fixed。
z-index屬性在下列情況下會失效：
- 父元素position為relative時，子元素的z-index失效。解決：父元素position改為absolute或static；
- 元素沒有設置position屬性為非static屬性。解決：設置該元素的position屬性為relative，absolute或是fixed中的一種；
- 元素在設置z-index的同時還設置了float浮動。解決：float去除，改為display：inline-block；
總結
以上是生活随笔為你收集整理的34、CSS高频前端面试题之CSS基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 任意重循环（循环阶数不定、循环层数不定）
- 下一篇： 浏览器缓存时间