2022年Web前端開發(fā)面試題-CSS篇匯總
常見css面試題
1、標準盒模型和IE盒模型兩者的區(qū)別是什么？
標準的(W3C)盒模型：元素的實際寬度等于設置的寬高 + border + padding (默認方式)
IE盒模型： 元素的實際寬度就等于設置的寬高，即使定義有 border 和 padding 也不會改變元素的實際寬度，即 ( Element width = width )
2、怎么設置這兩種模型呢？
很簡單，通過設置 box-sizing就可以達到自由切換的效果。
box-sizing:content-box;(標準)box-sizing:border-box;(IE)
3、描述一下下面盒子的大小，顏色什么的（content-box模型）
考查點：
整個盒子的大小
padding的顏色
border的顏色
height為0了，看得見盒子嗎？
整個盒子的大小(內(nèi)容區(qū)) = 0 （因為height為0）
padding的顏色 = pink（默認背景色蔓延到padding和border區(qū)域）
border的顏色 = blue（會繼承color字體的顏色，默認為black）
height為0了，看得見盒子嗎？（雖然height為0，但是看得見盒子，因為有border和padding）
這里需要注意：
如果沒有寫border-style，那么邊框的寬度不管設置成多少，都是無效的。
border-color的顏色默認跟字體顏色相同
padding顏色跟背景顏色相同
4、當元素設置成inline-block會出現(xiàn)什么問題？怎么消除？
inline-block元素水平呈現(xiàn)的元素間，換行顯示或空格分隔的情況下會有間距，很簡單的個例子：
去除inline-block元素間間距的N種方法
元素間留白間距出現(xiàn)的原因就是標簽段之間的空格，因此，去掉HTML中的空格，自然間距就木有了。考慮到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以：
或者使用font-size:0
5、行內(nèi)元素可以設置padding，margin嗎？
行內(nèi)元素的margin左右有效，上下無效。
行內(nèi)元素的padding左右有效 ，但是由于設置padding上下不占頁面空間，無法顯示效果，所以無效。
6、什么是邊距重疊？什么情況下會發(fā)生邊距重疊？如何解決邊距重疊？
邊距重疊：兩個box如果都設置了邊距，那么在垂直方向上，兩個box的邊距會發(fā)生重疊，以絕對值大的那個為最終結(jié)果顯示在頁面上。
邊距重疊分為兩種：
同級關系的重疊：
同級元素在垂直方向上外邊距會出現(xiàn)重疊情況，最后外邊距的大小取兩者絕對值大的那個
父子關系的邊距重疊：
嵌套崩塌
父子關系，如果子元素設置了外邊距，在沒有把父元素變成BFC的情況下，父元素也會產(chǎn)生外邊距。
給父元素添加overflow：hidden 這樣父元素就變?yōu)?BFC，不會隨子元素產(chǎn)生外邊距。
7、什么是BFC？
BFC的基本概念–BFC就是“塊級格式化上下文”的意思，也有譯作“塊級格式化范圍”。
它是 W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進行定位，以及與其他元素的關系和相互作用。
通俗的講，就是一個特殊的塊，內(nèi)部有自己的布局方式，不受外邊元素的影響。
8、那么BFC的原理（規(guī)則）是什么呢？
內(nèi)部的Box會在垂直方向上一個接一個的放置
垂直方向上的距離由margin決定。（完整的說法是：屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊（塌陷），與方向無關。）
每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
BFC的區(qū)域不會與float的元素區(qū)域重疊
計算BFC的高度時，浮動子元素也參與計算
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素，反之亦然
9、BFC由什么條件創(chuàng)立?
float屬性不為none
position屬性為absolute或fixed
display屬性為inline-block、table-cell、table-caption、flex、inline-flex
overflow屬性不為visible（overflow: auto/ hidden;）
10、BFC的使用場景
(1) 清除元素內(nèi)部浮動
只要把父元素設為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設置overflow: hidden樣式，對于IE6加上zoom:1就可以了。
主要用到
計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。
(2) 解決外邊距合并問題(嵌套崩塌)
外邊距合并的問題。
主要用到
盒子垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊
屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊，那么我們創(chuàng)建不屬于同一個BFC，就不會發(fā)生margin重疊了。
(3) 制作右側(cè)自適應的盒子問題
主要用到
普通流體元素BFC后，為了和浮動元素不產(chǎn)生任何交集，順著浮動邊緣形成自己的封閉上下文
11、清除浮動影響的方法？
11.1額外標簽法（在最后一個浮動標簽后，新加一個塊標簽，給其設置clear：both；）
11.2 父級添加overflow屬性（父元素添加overflow:hidden）
通過觸發(fā)BFC方式，實現(xiàn)清除浮動
11.3 使用after偽元素清除浮動（推薦使用）
12、塊元素居中
一般常見的幾種居中的方法有：
對于寬高固定的元素
（1）我們可以利用margin:0 auto來實現(xiàn)元素的水平居中。
（2）利用絕對定位，設置四個方向的值都為0，并將margin設置為auto，由于寬高固定，因此對應方向?qū)崿F(xiàn)平分，可以實現(xiàn)水
平和垂直方向上的居中。
（3）利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過margin負值來調(diào)整元素
的中心點到頁面的中心。
（4）利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過translate來調(diào)整元素
的中心點到頁面的中心。
（5）使用flex布局，通過align-items:center和justify-content:center設置容器的垂直和水平方向上為居中對
齊，然后它的子元素也可以實現(xiàn)垂直和水平的居中。
對于寬高不定的元素，后面兩種方法，可以實現(xiàn)元素的垂直和水平的居中。
13、CSS 選擇器有哪些？
14、CSS 優(yōu)先級算法如何計算？
當設置樣式?jīng)_突時,選擇器優(yōu)先級高的設置的樣式生效!
從高往低: !important > 行內(nèi)樣式 > id選擇器 > class選擇器 > 標簽選擇器 > 通配符和繼承屬性
組合選擇器的權(quán)重是累加
!important的使用
p{
? ? font-size:24px !important;
}
/* 對于選中的p元素,字號強制設置為24px,比行內(nèi)樣式優(yōu)先級要高 */
15、position的屬性有哪些，區(qū)別是什么？
position有以下屬性值：
16、對 sticky 定位的理解
sticky 英文字面意思是粘貼，所以可以把它稱之為粘性定位。語法：position: sticky; 基于用戶的滾動位置來定位。
粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。它的行為就像 position:relative;
而當頁面滾動超出目標區(qū)域時，它的表現(xiàn)就像 position:fixed;它會固定在目標位置。
元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位。這個特定閾值指的是 top, right, bottom, left 之一，換言之，指定 top, right, bottom, left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
17、CSS 優(yōu)化、提高性能的方法有哪些？
加載性能：
css壓縮：將寫好的css進行打包壓縮，可以減小文件體積。
css單一樣式：當需要下邊距和左邊距的時候，很多時候會選擇使用margin-left:20px;margin-bottom:30px;
減少使用@import，建議使用link，因為后者在頁面加載時一起加載，前者是等待頁面加載完成之后再進行加載。
選擇器性能：
關鍵選擇器（key selector）。選擇器的最后面的部分為關鍵選擇器（即用來匹配目標元素的部分）。CSS選擇符是從右到左進行匹配的。當使用后代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；
如果規(guī)則擁有ID選擇器作為其關鍵選擇器，則不要為規(guī)則增加標簽。過濾掉無關的規(guī)則（這樣樣式系統(tǒng)就不會浪費時間去匹配它們了）。
盡量少的去對標簽進行選擇，而是用class。
盡量少的去使用后代選擇器，降低選擇器的權(quán)重值。后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關聯(lián)每一個標簽元素。
了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復指定規(guī)則。
渲染性能：
屬性值為0時，不加單位。
可以省略小數(shù)點之前的0。
標準化各種瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在后。
選擇器優(yōu)化嵌套，盡量避免層級過深。
css雪碧圖，同一頁面相近部分的小圖標，方便使用，減少頁面的請求次數(shù)，但是同時圖片本身會變大，使用時，優(yōu)劣考慮清楚，再使用。
不濫用web字體。對于中文網(wǎng)站來說WebFonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷性能。
可維護性、健壯性：
將具有相同屬性的樣式抽離出來，整合并通過class在頁面中進行使用，提高css的可維護性。
樣式與內(nèi)容分離：將css代碼定義到外部css中。
18、元素的層疊順序？
層疊順序，英文稱作 stacking order，表示元素發(fā)生層疊時有著特定的垂直顯示順序。下面是盒模型的層疊規(guī)則：
對于上圖，由上到下分別是：
背景和邊框：建立當前層疊上下文元素的背景和邊框。
負的z-index：當前層疊上下文中，z-index屬性值為負的元素。
塊級盒：文檔流內(nèi)非行內(nèi)級非定位后代元素。
浮動盒：非定位浮動元素。
行內(nèi)盒：文檔流內(nèi)行內(nèi)級非定位后代元素。
z-index:0：層疊級數(shù)為0的定位元素。
正z-index：z-index屬性值為正的定位元素。
注意: 當定位元素z-index:auto，生成盒在當前層疊上下文中的層級為 0，不會建立新的層疊上下文，除非是根元素。
19、兩欄布局的實現(xiàn)？
一般兩欄布局指的是左邊一欄寬度固定，右邊一欄寬度自適應，兩欄布局的具體實現(xiàn)：
利用浮動，將左邊元素寬度設置為200px，并且設置向左浮動。將右邊元素的margin-left設置為200px，寬度設置為auto（默認為auto，撐滿整個父元素）。
<style>
? ? .container {
? ? ? height: 100px;
? ? }
? ? .left {
? ? ? float: left;
? ? ? width: 200px;
? ? ? background: red;
? ? ? height: 100px;
? ? }
? ? .right {
? ? ? margin-left: 200px;
? ? ? width: auto;
? ? ? background: green;
? ? ? height: 100px;
? ? }
</style>
<body>
? ? <div class="container">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="right"></div>
? ? </div>
</body>
利用浮動，左側(cè)元素設置固定大小，并左浮動，右側(cè)元素設置overflow: hidden; 這樣右邊就觸發(fā)了BFC，BFC的區(qū)域不會與浮動元素發(fā)生重疊，所以兩側(cè)就不會發(fā)生重疊。
<style>
? ? .container {
? ? ? height: 100px;
? ? }
? ? .left {
? ? ? float: left;
? ? ? width: 200px;
? ? ? background: red;
? ? ? height: 100px;
? ? }
? ? .right {
? ? ? overflow:hidden;
? ? ? background: green;
? ? ? height: 100px;
? ? }
</style>
<body>
? ? <div class="container">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="right"></div>
? ? </div>
</body>
利用絕對定位，將父級元素設置為相對定位。左邊元素設置為absolute定位，并且寬度設置為200px。將右邊元素的margin-left的值設置為200px。
<style>
? ? .container {
? ? ? position:relative;
? ? ? height: 100px;
? ? }
? ? .left {
? ? ? position:absolute;
? ? ? width: 200px;
? ? ? background: red;
? ? ? height: 100px;
? ? }
? ? .right {
? ? ? margin-left:200px;
? ? ? background: green;
? ? ? height: 100px;
? ? }
</style>
<body>
? ? <div class="container">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="right"></div>
? ? </div>
</body>
利用flex布局，將左邊元素設置為固定寬度200px，將右邊的元素設置為flex:1。
<style>
? ? .container {
? ? ? display:flex;
? ? ? height: 100px;
? ? }
? ? .left {
? ? ? width: 200px;
? ? ? background: red;
? ? ? height: 100px;
? ? }
? ? .right {
? ? ? flex:1;
? ? ? background: green;
? ? ? height: 100px;
? ? }
</style>
<body>
? ? <div class="container">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="right"></div>
? ? </div>
</body>
20、三欄布局實現(xiàn)？
三欄布局一般指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的布局，三欄布局的具體實現(xiàn)：
利用絕對定位，左右兩欄設置為絕對定位，中間設置對應方向大小的margin的值。
<style>
.container{
? ? position: relative;
? ? height:100px;
}
.left{
? ? position: absolute;
? ? left: 0;
? ? top: 0;
? ? width: 100px;
? ? height: 100px;
? ? background-color: red;
}
.right{
? ? position: absolute;
? ? right: 0;
? ? top: 0;
? ? width: 200px;
? ? height: 100px;
? ? background-color: orange;
}
.center{
? ? margin-left: 100px;
? ? margin-right: 200px;
? ? height: 100px;
? ? background-color: blue;
}
</style>
<body>
? ? <div class="container">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="center"></div>
? ? ? ? <div class="right"></div>
? ? </div>
</body>
利用浮動，左右兩欄設置固定大小，并設置對應方向的浮動。中間一欄設置左右兩個方向的margin值，注意這種方式，中間一欄必須放到最后
<style>
.container{
? ? height:100px;
}
.left{
? ? float:left;
? ? width: 100px;
? ? height: 100px;
? ? background-color: red;
}
.right{
? ? float:right;
? ? width: 200px;
? ? height: 100px;
? ? background-color: orange;
}
.center{
? ? margin-left: 100px;
? ? margin-right: 200px;
? ? height: 100px;
? ? background-color: blue;
}
</style>
<body>
? ? <div class="container">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="right"></div>
? ? ? ? <div class="center"></div>
? ? </div>
</body>
利用flex布局，左右兩欄設置固定大小，中間一欄設置為flex:1。
<style>
.container{
? ? display:flex;
? ? height:100px;
}
.left{
? ? width: 100px;
? ? height: 100px;
? ? background-color: red;
}
.right{
? ? width: 200px;
? ? height: 100px;
? ? background-color: orange;
}
.center{
? ? flex:1;
? ? height: 100px;
? ? background-color: blue;
}
</style>
<body>
? ? <div class="container">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="center"></div>
? ? ? ? <div class="right"></div>
? ? </div>
</body>
21、圣杯布局？
<div class="container">
? ? <div class="content"></div>
? ? <div class="left"></div>
? ? <div class="right"></div>
</div>
圣杯布局，利用浮動和負邊距來實現(xiàn)。父級元素設置左右的 padding，三列均設置向左浮動，中間一列放在最前面，寬度設置為父級元素的寬度，因此后面兩列都被擠到了下一行，通過設置 margin 負值將其移動到上一行，再利用相對定位，定位到兩邊。
.container{
? ? position: relative;
? ? padding-left: 100px;
? ? padding-right: 200px;
? ? height: 100px;
}
.content{
? ? float: left;
? ? width: 100%;
? ? height: 100px;
? ? background-color: blue;
}
.left{
? ? float: left;
? ? width: 100px;
? ? height: 100px;
? ? background-color: red;
? ? margin-left: -100%;
? ? position: relative;
? ? left: -100px;
}
.right{
? ? float: left;
? ? width: 200px;
? ? height: 100px;
? ? background-color: green;
? ? margin-left: -200px;
? ? position: relative;
? ? right: -200px;
}
22、雙飛翼布局？
<div class="container">
? ? <div class="wrap">
? ? ? ? <div class="center"></div>
? ? </div>
? ? <div class="left"></div>
? ? <div class="right"></div>
</div>
雙飛翼布局相對于圣杯布局來說，左右位置的保留是通過中間列的 margin 值來實現(xiàn)的，而不是通過父元素的 padding 來實現(xiàn)的。本質(zhì)上來說，也是通過浮動和外邊距負值來實現(xiàn)的。
.container{
? ? width: 100%;
? ? height: 100px;
}
.wrap{
? ? float: left;
? ? width: 100%;
}
.center{
? ? background-color: blue;
? ? height: 100px;
? ? margin-left: 100px;
? ? margin-right: 200px;
}
.left{
? ? float: left;
? ? margin-left: -100%;
? ? width: 100px;
? ? height: 100px;
? ? background-color: red;
}
.right{
? ? float: left;
? ? margin-left: -200px;
? ? width: 200px;
? ? height: 100px;
? ? background-color: green;
}
flex實現(xiàn)
<div class="container">
? ? <div class="content"></div>
? ? <div class="left"></div>
? ? <div class="right"></div>
</div>
.container{
? ? display: flex;
? ? height: 100px;
}
.content{
? ? flex: 1 1;
? ? height: 100px;
? ? background-color: blue;
? ? order: 2;
}
.left{
? ? flex: 0 0 100px;
? ? height: 100px;
? ? background-color: red;?
? ? order: 1;?
}
.right{
? ? flex: 0 0 200px;
? ? height: 100px;
? ? background-color: green;
? ? order: 3;
}
23、CSS3中有哪些新特性？
新增各種CSS選擇器
圓角
陰影(文本、盒子)
漸變
元素變換(平移、旋轉(zhuǎn)、縮放)
過渡(transition)
背景
動畫(animation)
內(nèi)容有些多，大家可以先點贊收藏，但一定要去看。當你把大廠面試題知識點都看完并且理解了，以后就沒有你過不了的前端面試。資源都幫你整理好了，還不學就有些說不過去了。
更多學習資料以及面試題庫，需要的伙伴點擊下方可以無償獲?。?！
更多優(yōu)質(zhì)視頻
