系列文章目錄
| 內容 | 鏈接 |
|---|---|
| 2023前端面試筆記 | HTML5 |
| 2023前端面試筆記 | CSS3 |
前言
歡迎閱讀本篇前端面試筆記的CSS3篇！CSS3是前端開發(fā)中非常重要的一部分，它為我們提供了豐富的樣式和動畫效果，使得網(wǎng)頁更加美觀和交互性更強。在前端面試中，對CSS3的掌握程度往往是評判候選人技術水平的重要指標之一。本篇筆記將圍繞CSS3的常見問題和知識點展開，幫助您更好地準備和應對前端面試。
一、CSS選擇器的優(yōu)先級
CSS選擇器的優(yōu)先級順序：
!important > 行內樣式 >id選擇器> 類選擇器 > 標簽選擇器 > 通配符* > 繼承 （權重若相同，后面的樣式會覆蓋前面的）
優(yōu)先級的計算：
優(yōu)先級是由 A、B、C、D 四個值來決定的，具體計算規(guī)則如下
- A={如果存在內聯(lián)樣式則為1，否則為0}
- B={ID選擇器出現(xiàn)的次數(shù)}
- C={類選擇器、屬性選擇器、偽類選擇器出現(xiàn)的總次數(shù)}
- D={標簽選擇器、偽元素選擇器出現(xiàn)的總次數(shù)}
計算示例：
樣式一：
/*
A=0 不存在內聯(lián)樣式
B=0 不存在ID選擇器
C=1 有一個類選擇器
D=3 有三個標簽選擇器
最終計算結果：{0,0,1,3}
*/
div ul li .red { ... }
樣式二：
/*
A=0 不存在內聯(lián)樣式
B=1 有一個ID選擇器
C=0 不存在類選擇器
D=0 不存在標簽選擇器
最終計算結果：{0,1,0,0}
*/
#mydiv { ... }
我們通過從A到D的順序進行值的大小比較，權重由A到D從高到低，只要比較出最大值即可。例如上面的兩個樣式：
1. 樣式一的A=0，樣式二的A=0 【相等，繼續(xù)往下比較】
2. 樣式一的B=0 < 樣式二的B=1 【樣式二的大，不繼續(xù)往下比了，即認為樣式二的優(yōu)先級更高】
二、通過 CSS 的哪些方式可以實現(xiàn)隱藏頁面上的元素
| 方式 | 說明 |
|---|---|
| opacity: 0 | 通過將元素的透明度設置為0，實現(xiàn)看起來隱藏的效果；但是依然會占用空間并可以進行交互 |
| visibility: hidden | 與透明度為0的方案非常類似，會占據(jù)空間，但不可以進行交互 |
| display: none | 可以徹底隱藏元素并從文檔流中消失，不占據(jù)空間也不能交互，且不影響布局 |
| transform: scale(0,0) | 通過將元素進行縮放，縮小為0；依然會占據(jù)空間，但不可交互 |
| overflow: hidden | 只會隱藏元素溢出的部分；占據(jù)空間且不可交互 |
| z-index: -9999 | 通過將元素的層級置于最底層，讓其他元素覆蓋住它，達到看起來隱藏的效果 |
| left: -9999px | 通過將元素定位到屏幕外面，達到看起來看不到的效果 |
transform 變換只是一個視覺效果, 不會影響其他盒子的布局
三、px、em、rem之間有什么區(qū)別？
相對單位, 絕對單位, 以及適配問題
| 單位名稱 | 說明 |
|---|---|
| px | 絕對單位。代表像素數(shù)量，頁面會按照給出的精確像素進行展示 |
| em |
相對單位。默認的基準點為父元素的字體大?。ǜ冈責o則再往上找），而如果自身定義了字體大小則按自身的來算。所以即使在同一個頁面內，1em可能不是一個固定的值。 |
| rem |
相對單位?？梢岳斫鉃?root em，即基準點為根元素<html>的字體大小。rem是CSS3中新增單位，Chrome/FireFox/IE9+都支持, 一般用于做移動端適配 |
- 使用rem布局:
- 使用 rem 作為單位 (轉換問題 => 利用webpack插件, 寫px自動轉rem)
- 動態(tài)的設置 html font-size (媒體查詢, js設置, 插件設置(flexible.js)都可以)
- em
- 如果將元素的寬度設置為2em，那么它的寬度將是父元素字體大小的2倍。
- rem
- 它的值不會受到父元素字體大小的影響。例如，如果根元素的字體大小為16px，那么1rem等于16px。如果將元素的寬度設置為2rem，那么它的寬度將是根元素字體大小的2倍。
在實際開發(fā)中，我們可以根據(jù)需求選擇合適的單位。如果需要相對于父元素字體大小進行調整，可以使用em單位。如果需要相對于根元素字體大小進行調整，可以使用rem單位。如果需要固定的尺寸，可以使用px單位。
四、讓元素水平居中的方法有哪些
方法一：使用 margin
通過為元素設置左右的 margin 為 auto，實現(xiàn)讓元素居中。
<div class="center">本內容會居中</div>
.center {
height: 500px;
width: 500px;
background-color: pink;
margin: 0 auto;
}
方式二: 轉成行內塊, 給父盒子設置 text-align: center
<div class="father">
<div class="center">我是內容盒子</div>
</div>
.father {
text-align: center;
}
.center {
width: 400px;
height: 400px;
background-color: pink;
display: inline-block;
}
方法三：使用 flex 布局
使用 flex 提供的子元素居中排列功能，對元素進行居中。
<div class="father">
<div class="center">我是內容盒子</div>
</div>
.father {
display: flex;
background-color: skyblue;
justify-content: center; // 主軸居中
align-items: center; // 側軸居中
}
.center {
width: 400px;
height: 400px;
background-color: pink;
}
方式四: 使用定位布局
<div class="father">
<div class="center">我是內容盒子</div>
</div>
.father {
background-color: skyblue;
position: relative;
height: 500px;
}
.center {
width: 400px;
height: 400px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
五、在 CSS 中有哪些定位方式
static 正常文檔流定位
-
此時設置
top、right、bottom、left 以及 z-index都無效 -
塊級元素遵循
從上往下縱向排列，行級元素遵循從左到右排列
relative 相對定位
這個 “相對” 是指相對于自身正常文檔流的位置(相對于它原來的位置進行偏移，但仍然占據(jù)原來的空間。)
absolute 絕對定位
當前元素相對于 最近的非 static 定位的祖先元素 來確定自己的偏移位置(元素會被移出正常文檔流，并不為元素預留空間)
例如，當前為 absolute 的元素的父元素、祖父元素都為 relative，則當前元素會相對于父元素進行偏移定位。
fixed 固定定位
當前元素相對于屏幕視口 viewport 來確定自己的位置。并且當屏幕滾動時，當前元素的位置也不會發(fā)生改變
(元素會被移出正常文檔流，并不為元素預留空間)
sticky 粘性定位
這個定位方式有點像 relative 和 fixed 的結合。當它的父元素在視口區(qū)域、并進入 top 值給定的范圍內時，當前元素就以 fixed 的方式進行定位，否則就以 relative 的方式進行定位。(使元素在滾動到指定位置時固定在屏幕上)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header, .nav, .main, .footer {
border: 2px solid #000;
margin: 5px;
}
.header {
height: 200px;
}
.nav {
position: sticky;
/* 設置盒子, 距離瀏覽器的頂部邊緣, 多少時, 開始吸頂 */
top: 10px;
background-color: orange;
z-index: 999;
}
</style>
</head>
<body>
<!--
position:
1. static; (默認)
2. fixed; 固定定位
3. absolute; 絕對定位
4. relative; 相對定位
5. sticky; 粘性定位(吸頂效果) (兼容性, 目前大部分場景, 通過js模擬效果實現(xiàn)的)
-->
<div class="header">
<p>這是頭部</p>
<p>這是頭部</p>
<p>這是頭部</p>
</div>
<div class="nav">
<p>導航</p>
<p>導航</p>
<p>導航</p>
</div>
<div class="main">
<p>我是主體1</p>
<p>我是主體2</p>
<p>我是主體3</p>
<p>我是主體4</p>
<p>我是主體5</p>
</div>
<div class="footer">
<p>底部</p>
<p>底部</p>
<p>底部</p>
</div>
</body>
</html>
六、 如何理解 z-index
- 元素默認的 z-index 為 0，可通過修改 z-index 來控制設置了postion 值的元素的圖層位置
z-index的小坑, 如果父輩元素有定位, 且配置了z-index, 優(yōu)先按照父輩元素的定位的z-index進行比較層級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 100%;
height: 200px;
position: relative;
background-color: skyblue;
z-index: 1;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: 0;
top: 0;
z-index: 999;
}
.box2 {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
left: 0;
top: 0;
z-index: 100;
}
</style>
</head>
<body>
<!-- z-index的小坑: 如果父輩元素有定位, 且有z-index, 優(yōu)先按照父輩元素進行比較 -->
<!-- z-index: 1 -->
<div class="father">
<!-- 子絕父相的盒子 -->
<div class="son"></div>
</div>
<!-- z-index: 100 -->
<div class="box2"></div>
</body>
</html>
son盒子按理說應該在.box2的上面，可是因為.son的父盒子也有z-index，所以.son盒子的z-index按照z-index: 1 來比較
七、如何清除浮動（五種方法）
- 使用場景：父盒子內的子盒子浮動，導致父盒子高度塌陷
<div class="father">
<div class="son left"></div>
<div class="son right"></div>
</div>
.father {
width: 400px;
border: 1px solid red;
}
.son {
width: 100px;
height: 100px;
background-color: aqua;
}
.left {
float: left;
}
.right {
float: right;
}
- 清除浮動的 種辦法
1.定高法：給父元素的height屬性設一個固定值
.father {
width: 400px;
border: 1px solid red;
height: 100px;
}
缺點：定高法導致父盒子的高度將不再由子盒子撐開
2.空div法：給父元素最后添加一個子元素div，并設置樣式
<div class="father">
<div class="son left"></div>
<div class="son right"></div>
<div style="clear: both"></div>
</div>
.clear:both {
clear: both;
}
缺陷：添加無意義標簽，語義化差
3.BFC法：為父元素添加 overflow: hidden/auto 轉為BFC塊級格式化上下文
.father {
width: 400px;
border: 1px solid red;
overflow: hidden;
}
缺陷：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素
4.偽元素法：:after 偽元素是添加到父元素內容的末尾，并可以用來插入額外的內容或樣式
給父元素添加 clearfix 類名，并且設置如下樣式
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執(zhí)行，其他瀏覽器不執(zhí)行*/
}
優(yōu)點：符合閉合浮動思想，結構語義化正確，推薦使用
5.雙偽元素法：使用before和after雙偽元素清除浮動
給父元素添加 clearfix 類名，并且設置如下樣式
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
推薦使用
八、談談你對 BFC 的理解
- 何為BFC
BFC 的全稱是 Block Formatting Context，塊級格式化上下文。這是一個用于在盒模型下布局塊級盒子的獨立渲染區(qū)域，將處于BFC區(qū)域內和區(qū)域外的元素進行互相隔離。
- 何時會形成 BFC：
滿足下列條件之一就可觸發(fā)BFC：
HTML根元素
position 值為absolute或fixed
float 值不為none
overflow 值不為visible
display 值為inline-block、table-cell或table-caption
- BFC應用:
- 防止兩個相鄰塊級元素的上下 margin 發(fā)生重疊 (上下margin合并問題)
<style>
.box1 {
width: 200px;
height: 100px;
background-color: red;
margin-bottom: 10px; /* 下外邊距為 10px */
}
.box2 {
width: 200px;
height: 100px;
background-color: green;
margin-top: 10px; /* 上外邊距為 10px */
}
</style>
<div class="box1"></div>
<div class="box2"></div>
下面我們讓其中一個盒子觸發(fā)BFC，從而達到間隔 20px 的期望效果：
.box2 {
width: 200px;
height: 100px;
background-color: green;
margin-top: 10px;
display: inline-block; /* 通過設置 display 為 inline-block 可以觸發(fā) BFC */
}
- 處理margin塌陷
當塊級元素和父元素的外邊距相遇時，它們的外邊距會合并成一個較大的外邊距。
外邊距塌陷只會發(fā)生在垂直方向上，水平方向上的外邊距不會合并。
給父元素添加overflow屬性，轉為BFC
- 清除浮動
如上清除浮動的第三中方法 - 實現(xiàn)自適應布局 (左邊固定, 右邊自適應)
浮動 => 先浮動左邊并定寬, 再右邊盒子overflow: hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
height: 600px;
background-color: pink;
}
.left {
height: 400px;
width: 100px;
background-color: red;
float: left;
}
.right {
height: 400px;
background-color: orange;
overflow: hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
利用flex => display: flex; 左邊定寬, 右邊 flex: 1;
九、什么是CSS Sprites以及它的好處
考察: 性能優(yōu)化的方案
CSS Sprites，俗稱雪碧圖、精靈圖。這是一種CSS圖片合并技術，就是將CSS中原先引用的一些較小的圖片，合并成一張稍大的圖片后再引用的技術方案。它可以減少請求多張小圖片帶來的網(wǎng)絡消耗（因為發(fā)起的HTTP請求數(shù)變少了,多張小圖變成了一張大圖回來），并實現(xiàn)提前加載資源的效果。
操作方式：
可以手工使用圖片編輯軟件（如Photoshop），將多張小圖片合并編輯變成一張大圖片，并針對這張大圖片，編寫CSS樣式來引用這張大圖片中對應位置的小圖片（涉及到的樣式：background-image、background-position、background-size）。然后在HTML元素中使用這些樣式即可。
.one {
display: inline-block;
width: 24px;
height: 24px;
background: url('./sprite.png') 0px -40px; // 雪碧圖向上移40px
}
<i class="one"></i>
缺點：
- CSS Sprites中任意一張小圖的改動，都
需要重新生成大圖；并且用戶端需要重新下載整張大圖，降低了瀏覽器緩存的優(yōu)勢 - 隨著HTTP2的逐漸普及，HTTP2的
多路復用機制可以解決請求多個小圖片所創(chuàng)建多個HTTP請求的消耗，讓CSS Sprites存在的價值降低了 - 圖片如果放大, 是
會失真
目前其他主流的處理圖片的方案: iconfont 字體圖標, svg矢量圖…
十、你對媒體查詢的理解是什么樣的
考察點: 響應式適配
根據(jù)不同的屏幕尺寸, 顯示不同的效果 (設置盒子的樣式)
媒體查詢是自 CSS3 開始加入的一個功能。它可以進行響應式適配展示。
媒體查詢由兩部分組成：
- 一個可選的
媒體類型（如 screen、print 等） - 零個或多個媒體功能
限定表達式（如 max-width: 500px、orientation: landscape 等）
這兩部分最終都會被解析為 true 或 false 值，然后整個媒體查詢值為 true，則和該媒體查詢關聯(lián)的樣式就生效，否則就不生效。
使用示例：
.box {
width: 100%;
background-color: pink;
height: 500px;
margin: 0 auto;
}
/* 媒體查詢 (不會增加任何的權重, 一般放下面)
1. width: xxx 固定值
2. max-width: 樣式生效的最大寬度 <= 這個寬, 樣式生效
3. min-width: 樣式生效的最小寬度 >= 這個寬, 樣式生效
*/
@media screen and (min-width: 1200px) {
.box {
width: 1170px;
}
}
/* 992 <= x < 1200 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
.box {
width: 980px;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.box {
width: 750px;
}
}
@media screen and (max-width: 767px) {
.box {
width: 100%;
}
}
十一、你對盒子模型的理解是什么樣的
瀏覽器的渲染引擎在對網(wǎng)頁文檔進行布局時，會按照 “CSS 基礎盒模型” （CSS Basic Box Model）標準，將文檔中的所有元素都表示為一個個矩形的盒子，再用 CSS 去決定這些盒子的大小尺寸、顯示位置、以及其他屬性（如顏色、背景、邊框等）。
下圖就是盒模型示意圖，它由幾部分組成：
- 內容（content）
- 內邊距（padding）
- 邊框（border）
- 外邊距（margin）
十二、標準盒模型和怪異盒模型有哪些區(qū)別
兩者的區(qū)別主要體現(xiàn)在元素尺寸的表示上。
盒模型的指定：
在CSS3中，我們可以通過設置 box-sizing 的值來決定具體使用何種盒模型：
- content-box 標準盒模型
- border-box 怪異盒模型
標準盒模型：
box-sizing: content-box; (默認值)
在標準盒模型下，元素的寬（width）和高（height）值即為盒模型中內容（content）的實際寬高值。
因此，計算一個元素寬度的公式如下(不考慮margin, margin是外邊距, 如果是計算占用頁面的空間, 就要帶上margin)：
盒子寬度 =
border-left+padding-left+width+padding-right+border-right占據(jù)頁面寬度 =
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
怪異盒模型：
box-sizing: border-box; (目前主流常用值)
在怪異盒模型下，元素的 width 和 height 值卻不是 content 的實際寬高，而是去除 margin 后剩下的元素占用區(qū)域的寬高，即：
因此，計算一個元素占用了頁面總寬度的公式如下：
盒子寬度 =
width盒子占據(jù)頁面寬度 =
margin-left+width+margin-right
十三、說說偽類和偽元素的區(qū)別
什么是偽類？
偽類（pseudo-class）是以冒號:為前綴，可被添加到?個選擇器的末尾的關鍵字。
它用于讓樣式在元素的特定狀態(tài)下才被應用到實際的元素上。比如：:checked、:hover、:disabled、 :first-child等。
:hover
:nth-child(1)
:nth-child(2)
:checked
注意: 偽類, 雖然是寫法比較特殊, css選擇器的權重 和 類 一致的
什么是偽元素？
:before 或 :after
偽元素?于創(chuàng)建?些并不在 DOM 樹中的元素，并為其添加樣式。偽元素的語法和偽類類似，可以一個冒號或兩個冒號為前綴。
?如，可以通過 :before 、:after 來在?個元素前、后增加?些額外的?本并為它們添加樣式；
并且，雖然?戶可以看到這些?本，但其實它們并不在 DOM 樹中。(坑: 偽元素是無法注冊事件的, 所以不要通過js控制偽元素)
兩者的區(qū)別
雖然它們在語法上是一致的，但是它們的功能區(qū)別還是非常明顯的。
- 偽類是用來匹配元素的
特殊狀態(tài)的 - 偽元素是用來匹配元素的隸屬元素的，這些隸屬元素
可以在界面中展示，但在 DOM 中不體現(xiàn)
十四、談談你對 flex 的理解
在真實的應用場景中，通常會遇到各種各樣不同尺?和分辨率的設備，為了能在所有這些設備上正常的布局我們的應用界面，就需要響應式的界?設計方式來滿?這種復雜的布局需求。
flex 彈性盒模型的優(yōu)勢在于開發(fā)?員只需要聲明布局應該具有的?為，?不需要給出具體的實現(xiàn)?式，瀏覽器負責完成實際布局，當布局涉及到不定寬度，分布對?的場景時，就要優(yōu)先考慮彈性盒布局。
你能聯(lián)想到的flex語法有哪些呢?
flex-direction: 調整主軸方向
row：主軸方向為水平向右
column：主軸方向為豎直向下
row-reverse:主軸方向為水平向左
column-reverse:主軸方向是豎直向上。
justify-content主要用來設置主軸方向的對齊方式
flex-start: 彈性盒子元素將向起始位置對齊
flex-end: 彈性盒子元素將向結束位置對齊。
center: 彈性盒子元素將向行中間位置對齊
space-around: 彈性盒子元素會平均地分布在行里
space-between:第一個貼左邊，最后一個貼右邊，其他盒子均分，保證每個盒子之間的空隙是相等的。
align-items用于調整側軸的對齊方式
flex-start： 元素在側軸的起始位置對齊。
flex-end： 元素在側軸的結束位置對齊。
center： 元素在側軸上居中對齊。
stretch： 元素的高度會被拉伸到最大（不給高度時, 才拉伸）。
flex-wrap屬性控制flex容器是單行或者多行,默認不換行
nowrap | wrap | wrap-reverse;
align-content用來設置多行的flex容器的排列方式
flex-start： 各行向側軸的起始位置堆疊。
flex-end： 各行向彈性盒容器的結束位置堆疊。
center： 各行向彈性盒容器的中間位置堆疊。
space-around： 各行在側軸中平均分布。
space-between： 第一行貼上邊，最后一個行貼下邊,其他行在彈性盒容器中平均分布。
stretch：拉伸，不設置高度的情況下。
文章來源：http://www.zghlxwxcb.cn/news/detail-670751.html
總結
最后，提醒大家在面試前進行充分的準備，機不可失！熟悉相關的 CSS3 特性和概念，并能夠清晰地表達自己的理解和經(jīng)驗。同時，也要注意注重實踐，通過實際的項目經(jīng)驗來加深對 CSS3 的理解和應用。文章來源地址http://www.zghlxwxcb.cn/news/detail-670751.html
到了這里，關于2023前端面試筆記 —— CSS3的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
