號用于每日更新前端最新面試題，React、Vue、小程序、JavaScript、HTML5、CSS、uniapp、ES6、前端工程化、性能優化等熱點面試題~~~

歡迎關注，面試題刷起來~~升職加薪不是夢~~

以下是一些常見的前端面試題和答案，涉及 CSS 的主題：

1. 請解釋一下 CSS 盒模型。
   答案：CSS 盒模型是用來描述元素在頁面中占據空間的方式。它由內容區域、內邊距、邊框和外邊距組成。
2. 請解釋一下 CSS 選擇器的優先級。
   答案：CSS 選擇器的優先級是用來確定哪個規則應用于特定的元素。它由選擇器的特殊性、重要性和源代碼順序決定。
3. 請解釋一下 CSS 清除浮動。
   答案：清除浮動是一種技術，用于處理浮動元素引起的父元素高度塌陷的問題。常見的清除浮動的方法包括使用空元素清除浮動、使用 clearfix 類、使用偽元素等。
4. 請解釋一下 CSS 偽類和偽元素的區別。
   答案：CSS 偽類用于選擇處于特定狀態的元素，如:hover、:active；而偽元素用于創建元素的特定部分，如::before、::after。
5. 請解釋一下 CSS 相對定位和絕對定位的區別。
   答案：相對定位是相對于元素在正常文檔流中的位置進行定位，它不會影響其他元素的布局；絕對定位是相對于最近的已定位祖先元素進行定位，或者如果沒有已定位的祖先元素，則相對于初始包含塊進行定位。
6. 請解釋一下 CSS 選擇器的子代選擇器和后代選擇器的區別。
   答案：子代選擇器（>）選擇作為某個元素直接子元素的元素；后代選擇器（空格）選擇作為某個元素后代的所有元素，無論它們是直接子元素還是更深層次的子元素。
7. 請解釋一下 CSS 中的層疊上下文（stacking context）。
   答案：層疊上下文是指在 HTML 文檔中的一個三維概念，它決定了元素在 z 軸上的顯示順序和如何相互堆疊。層疊上下文可以通過特定的 CSS 屬性（如position、z-index）創建。
8. 請解釋一下 CSS 中的浮動（float）屬性。
   答案：浮動是一種布局方式，用于將元素從正常的文檔流中移動并使其根據浮動方向對齊。浮動元素會影響周圍元素的布局。
9. 請解釋一下 CSS 中的盒子模型和內容溢出（overflow）屬性。
   答案：CSS 盒子模型是用來描述元素的布局方式，內容溢出屬性用于控制當元素中的內容超過元素框時如何處理溢出的部分。
10. 請解釋一下 CSS 中的媒體查詢（media queries）。
    答案：媒體查詢是一種在 CSS 中使用媒體類型和特定條件來應用樣式的方法。它可以根據設備的特性（如屏幕寬度、像素密度等）動態地調整樣式。
11. 請解釋一下 CSS 中的盒子陰影（box-shadow）屬性。
    答案：盒子陰影屬性用于在元素周圍創建一個或多個陰影效果。它可以指定陰影的顏色、模糊半徑、偏移量等。
12. 請解釋一下 CSS 中的動畫（animation）屬性。
    答案：動畫屬性用于在元素上創建動畫效果。它可以定義動畫的關鍵幀、持續時間、延遲等屬性。
13. 請解釋一下 CSS 中的彈性布局（Flexbox）。
    答案：彈性布局是一種用于創建靈活的、自適應的布局的 CSS 模塊。它通過使用容器和項目的屬性來控制元素在主軸和交叉軸上的對齊和分布。
14. 請解釋一下 CSS 中的網格布局（Grid）。
    答案：網格布局是一種二維布局系統，用于將頁面劃分為行和列，并通過使用容器和項目的屬性來控制元素在網格中的位置和大小。
15. 請解釋一下 CSS 中的響應式設計（Responsive Design）。
    答案：響應式設計是一種設計方法，通過使用媒體查詢和流動布局等技術，使網站或應用能夠在不同的設備和屏幕尺寸上提供最佳的用戶體驗。
16. 請解釋一下 CSS 中的變量（Variables）。
    答案：CSS 變量是一種用于存儲和重用值的機制。它們使用自定義屬性（如 --color: red;）來定義，并通過 var() 函數在其他地方引用。
17. 請解釋一下 CSS 中的漸變（Gradients）。
    答案：漸變是一種在元素背景或文本中創建平滑過渡效果的方法。它可以是線性漸變（沿著一條直線方向）或徑向漸變（從中心向外擴散）。
18. 請解釋一下 CSS 中的字體圖標（Icon Fonts）。
    答案：字體圖標是使用字體文件來顯示圖標的方法。通過將圖標設計為字體字符，并將字體文件引入頁面，可以使用 CSS 控制圖標的樣式和大小。
19. 請解釋一下 CSS 中的屏幕閱讀器隱藏（Screen Reader Hiding）。
    答案：屏幕閱讀器隱藏是一種技術，用于將某些內容隱藏或屏蔽，以使屏幕閱讀器用戶不會聽到或感知到這些內容。
20. 請解釋一下 CSS 中的響應式圖像（Responsive Images）。
    答案：響應式圖像是一種優化圖像顯示的方法，使圖像能夠根據設備的屏幕尺寸和分辨率自動調整大小和加載適當的圖像版本。常見的實現方法包括使用 srcset 和 sizes 屬性。

大學生的學習過程中，遇到難題和疑惑是常有的事情。然而，隨著互聯網的普及和技術的發展，搜題和學習軟件成為了大學生們解決問題的利器。今天，我將向大家推薦幾款備受大學生喜愛的搜題和學習軟件，幫助我們更好地應對學習和考試的挑戰。

1.彩虹搜題

這是微信公眾號

是一個公眾號，題庫還是比較全的，基本上大部分作業和考試的答案都能搜到

下方附上一些測試的試題及答案

1、測定植物樣品的淀粉含量時，可以現將淀粉水解呈還原糖，然后測定還原糖的含量，折算成淀粉含量

答案：正確

2、KMnO4滴定C2O42-時，速度由慢到快，這種現象由下列何種原因引起？

A、催化反應 B、自動催化反應 C、?誘導反應 D、?副反應

答案：自動催化反應

3、與股票相比，債券有_______特點

答案：債券投資的風險小于股票,債券的求償權優于股票,債券代表一種債權債務關系,債券持有人無權參與企業決策

4、瀝青瓦的固定方式以釘為主，粘貼為輔

答案：正確

5、《轉運漢遇巧洞庭紅波斯胡指破鼉龍殼》一則中，文若虛是因賣_______而最終轉運。

答案：橘子

6、Excel中對單元格數據排序后，空白單元格總是放在（　　）。

答案：最后

7、如果某種物質的血漿清除率大于125mL/min。表明該物質不僅經過腎小球濾過,還被()分泌

答案：腎小管

8、目前臨床使用喉罩的種類包括

A、ProSeal喉罩 B、插管型喉罩 C、Supreme喉罩 D、SLIPA喉罩 E、Aura(可彎曲)和Aura(直弧形)喉罩 此題為多項選擇題。

答案：A,B,C,D,E

9、【判斷題】理想理想,有利才想;前途前途,有錢才圖

答案：錯誤

10、企業持有的下列投資中，不計提損失準備的是（ ）0

A、交易性金融資產 B、債權投資 C、其他債權投資 D、長期股權投資

答案：交易性金融資產

11、光中繼器的作用就是（? ）。

A、對光信號進行放大，補償光信號的衰減 B、對波形失真的脈沖進行整形 C、把輸入的電信號轉換為光信號 D、用戶信息轉換為原始電信號

答案：對光信號進行放大，補償光信號的衰減#對波形失真的脈沖進行整形

12、企業董事會通過的利潤分配方案中擬分配的現金股利，應確認為應付股利。（　）

答案：錯誤

13、光纖間的連接、光纖與光端機的連接及耦合都離不開對光纖連接器、耦合器等無源器件的使用。

答案：正確

14、最注重汽車安全性的汽車廠商是()汽車公司 A、沃爾沃 B、奔馳 C、通用 D、福特

答案：A

15、?LTE系統上行采用了（ ）多址接入方式。?OFDMA SDMA TDMA SC-FDMA

答案：D

2.超級PDF

一款完全免費好用的在線工具

有各種PDF轉換功能，不僅支持圖片轉PDF，轉換效果也很好，不壓畫質，同時也支持PDF之間的加密，拆分，加水印去水印等，還包含多種文檔的格式轉換，PDF長圖也可以進行操作，網站另外也有圖文識別和圖片處理的功能

3.Google翻譯

可提供簡體中文和另外 100 多種語言之間的互譯功能，可讓您即時翻譯字詞、短語和網頁內容

Google的免費翻譯服務

4.菜鳥教程

菜鳥教程是一個完全免費的編程學習軟件。

它免費提供了HTML / CSS 、JavaScript 、服務端、移動端、XML 教程、http://ASP.NET 、Web Service 、開發工具、網站建設；每類教程還細分了很多種不同的教程，例如服務端學習教程包括：PHP 教程、Python 基礎教程、Python 3 教程、Linux 教程、Java 教程、Ruby 教程、C 語言教程、C++ 教程、Go 語言教程、正則表達式等豐富的編程學習教程

這些日常學習工具的使用不僅可以提高我們的學習效率，還能幫助我們更好地規劃時間和管理任務。

言：

最近總結了一些自己做題過程中遇到的易錯問題，附帶解析，希望對大家有幫助。

1.下面哪些執行結果為true()

A 'foo' == new function(){ return String('foo'); };

B 'foo' == new function(){ return new String('foo'); };

C [] == 0

D ![]

E !0

點擊查看答案

答案：B C E

點擊查看涉及到的知識點

1.new返回值

2.String()與 new String()區別

3.隱式類型轉換

解析：

A 'foo' == new function(){ return String('foo'); };

1. String('foo') => 'foo'
2. new function 的return會判斷返回值是否為引用數據類型，如果不是引用數據類型會返回空對象{}，所以new function(){ return String('foo'); }返回{}
3. 'foo' == {} ，{}進行隱式類型轉換，{}調用valueOf方法返回{}對象，判斷{}不是基本數據類型，繼續調用toString()方法，返回'[object Object]'。
4. 'foo' == '[object Object]',返回false

B 'foo' == new function(){ return new String('foo'); };

1. new String('foo');返回String對象。
2. 'foo' == new String('foo'), new String('foo')調用自身valueOf方法，返回'foo'
3. 'foo' == 'foo' 返回 true

C [] == 0

引用數據類型會先轉換為String，然后再轉換為number

1. 數組會先調用自身toString()方法 [].toString(); => ''
2. 使用Number('')轉為數字 Number('') => 0
3. 0 == 0 => true

D ![]

將[]隱式轉化為布爾值

1. Boolean([]) => true
2. !true => false

E !0

1. Boolean(0) => false
2. !false => true

Tips:

在==比較時遵循以下原則

1. 如果有一個操作數是布爾值，則在比較相等性之前，將其轉換為數值；

2. 如果一個操作數是字符串，另一個操作數是數值，在比較之前先將字符串轉換為數值；

3. 如果一個操作數是對象，另一個操作數不是，則調用對象的 valueOf() 方法，用得到的基本類型值按照前面的規則進行比較；

4. 如果有一個操作數是 NaN，無論另一個操作數是什么，相等操作符都返回 false；

5. 如果兩個操作數都是對象，則比較它們是不是同一個對象。如果指向同一個對象，則相等操作符返回 true；

6. 在比較相等性之前，不能將 null 和 undefined 轉成其他值。

7. null 和 undefined 是相等的。

2.以下哪些事件會在頁面加載完成（onload）之前觸發？

A readystatechange

B pageshow

C beforeunload

D DOMContentLoaded

點擊查看答案

答案：A D

點擊查看涉及到的知識點

1.渲染過程

解析

A readystatechange

document有個readyState屬性來描述document的狀態，當readyState發生變化時會觸發readystatechange事件。

loading:文檔加載中

interactive：文檔加載完畢，此時同樣會觸發DOMContentLoaded事件

complete：文檔以及所引入的圖片等資源加載完畢，此時同樣會觸發load事件

B pageshow

當load事件觸發完畢后會觸發pageshow事件

C beforeunload

當dom卸載時會觸發，瀏覽器刷新頁面、跳轉頁面、關閉頁面時會觸發。

D DOMContentLoaded

當dom解析完畢，同步js、css加載完畢時觸發，會早于load事件。

Tips：

頁面加載渲染簡易流程

html解析為DOM，css解析為CSSOM，合并css與dom生成渲染樹，布局，并進行渲染

1.瀏覽器請求html

2.瀏覽器獲取到html

3.瀏覽器解析html

4.解析到head標簽，如果同步js則停止dom解析（等待js下載完畢并執行后繼續dom解析），如果是css則不影響dom繼續解析（但是影響dom渲染）。

5.進入body標簽

1. 如果只有dom則解析dom，同css樹合并為渲染樹，進行渲染。
2. 如果有外鏈js，如果是同步js則下載并執行js，此時dom暫停解析，等待js執行完畢后繼續解析，解析后生成dom樹，并渲染。
3. 如果有js也有css引入，同步js阻塞dom解析，dom等待js下載執行完，dom解析完畢后還需要等待css下載完成，然后dom與cssom合并為渲染樹然后渲染。 6.當dom解析完畢

Tips:

瀏覽器遇到通過src引入外部js時，會先渲染已解析的dom

例：

引入外部js， 遇到script src時會先渲染已解析的dom

test.js

var i = 1000000000
while(i>0){
    i--
}
console.log("解析完成")

html

<h1>Hello</h1>
<script type="text/javascript" src="test.js"></script>
<h1>world</h1>

執行時，頁面會先顯示Hello，等幾秒后會顯示world


頁面內寫的js會阻塞dom解析與渲染
<h1>Hello</h1>
<script type="text/javascript">
 var i = 1000000000
 while(i>0){
     i--
 }
 console.log("解析完成")
</script>
<h1>world</h1>

js執行完后才會顯示 Hello world

3.關于這段代碼正確的結論是：（）

var F=function(){};

Object.prototype.a=function(){};

Function.prototype.b=function(){};

var f=new F();

A f能取到a，但取不到b

B f能取到a,b

C F能取到b，不能取到a

D F能取到a，不能取到b

點擊查看答案

答案：A

點擊查看涉及到的知識點

1.原型

解析：

一. f能訪問那些

1. f的__proto__指向的是F構造函數的prototype。
2. 屬性查找是通過原型鏈查找的。
3. f.__proto__ = F.prototype ,F.prototype.__proto__ = Object.prototype，Object.prototype.__proto__ = null。
4. f可以獲取到a。

二. F能訪問那些

1. F.proto = Function.prototype。所以F能訪問到b
2. Function.prototype.proto = Object.prototype。所以F能訪問a。
3. 結論，F能訪問a跟b。

4.以下結果里，返回 false 的是？

A [] == true

B !![]

C NaN == NaN

D null == undefined

點擊查看答案

答案：A C

點擊查看涉及到的知識點

1.隱式類型轉換

解析：

A [] == true

如果有一個操作數是布爾值，則在比較相等性之前，將其轉換為數值；

1. [] == Number(true) => [] == 1
2. [].toString() == 1 => '' == 1
3. Number('') == 1 => 0 == 1
4. false

B !![]

1. Boolean([]) => true
2. !true => false
3. !false => true

C NaN == NaN

如果有一個操作數是 NaN，無論另一個操作數是什么，相等操作符都返回 false；

1. false

D null == undefined

null 和 undefined 是相等的。

1. true

5.下面的代碼將返回：

Number(null);

A Null

B 0

C undefined

D 1

點擊查看答案

答案：B

點擊查看涉及到的知識點

1.Number函數的用法

解析：

1. Number(null) => 0
2. Number(undefined) => NaN
3. Number(123a) => NaN

6.假設有如下代碼，那么a(10)的返回結果是？（ ）

function a(a)
{
  a^=(1<<4)-1;
   return a;
}

A 5

B 10

C 15

D 16

點擊查看答案

答案：A

點擊查看涉及到的知識點

1.二進制轉換

2.左移運算符

3.異或運算符

解析：

涉及到異或、二進制轉換、

1. a^=(1<<4)-1 => a = a ^ ((1<<4) -1);
2. 帶入參數 a = 10 ^((1<<4) -1);
3. ((1<<4) -1) 1<<<4 轉換為二進制 1000010000 轉換為十進制 => 2? => 16((1<<4) -1) => 15
4. 10 ^ 15 10轉化為二進制 => 101015轉化為二進制 => 111110^15 => 101101 =>轉化為10進制 22+1 => 5
5. 返回5

Tips:

二進制轉換為十進制：

除二取余，然后倒序排列，高位補零 例：

10轉化為2進制
1.  10%2 = 0
2.  5%2  = 1
3.  2%2  = 0
4.  1    = 1

倒序排列：
1010  

7.假設val已經聲明,可定義為任何值。則下面js代碼有可能輸出的結果為:

console.log('Value is ' + (val != '0') ? 'define' : 'undefine');

A Value is define

B Value is undefine

C define

D undefine

E Value is define 或者 Value is undefine

F define 或者 undefine

G 其它選項都有可能

點擊查看答案

答案：C

點擊查看涉及到的知識點

1.運算符優先級

解析： 考察運算符優先級，+優先級高于三目運算，上面代碼等價于

('Value is ' + (val != '0')) ? 'define' : 'undefine'

8.運行以下程序,y和z的最終結果為:

<script> 
    var m= 1, j = k = 0; 
    function add(n) { 
        return n = n+1; 
  } 
    y = add(m); 
    function add(n) { 
        return n = n + 3; 
    } 
z = add(m); 
</script> 

A 2,4

B 4,4

C 2,2

D 報異常

點擊查看答案

答案：B

點擊查看涉及到的知識點

1.函數提升

2.值傳遞

解析：

1. 同名函數會相互覆蓋，由于函數存在函數提升，后定義的函數會覆蓋之前定義的函數，所以y，z調用的都是第二個add函數。
2. 傳入函數的m因為是基本類型，在函數內修改不會影響外部的變量

結尾：

在錯題中尋找自己的知識薄弱點，鞏固并完善自己的知識體系，建議收藏，經常看看，避免遺忘~