常見的前端面試題

1、怎麼清除浮動

父級div定義height
使用空標籤清除浮動clear：both；（增加無意義的標籤）
父級div定義僞類:after和zoom（：after{display：block；clear：both；content：“ ”；visibility：hidden；}）
父級div定義overflow:hidden
父級div定義overflow:auto
父級div也浮動，需要定義寬度
父級div定義display:table
結尾處加br標籤clear:both

2、常用那幾種瀏覽器測試？有哪些內核(LayoutEngine)?

瀏覽器：IE，Chrome，FireFox，Safari，Opera。
內核：Trident，Gecko，Presto，Webkit

3、說下行內元素和塊級元素的區別？行內塊元素的兼容性使用？（IE8以下）

行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。
塊級元素：各佔據一行，垂直方向排列。從新行開始結束接着一個斷行
兼容性：display:inline-block;*display:inline;*zoom:1;

4、css的display：none和visibility:hidden區別

display:none使用後，元素的寬度，高度都會丟失，視爲不存在不加載；

元素原來佔據的空間位置不保留；
產生迴流和重繪
visibility:hidden:視覺上的不可見，但是保留佔據的空間，還具有寬度和高度；

5、box-sizing常用的屬性有哪些？分別有什麼作用？

box-sizing: 1.content-box 2.border-box 3.inherit;
content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

6、Doctype作用？標準模式與兼容模式各有什麼區別?

<!DOCTYPE>告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點無法工作

7、HTML5爲什麼只需要寫 <!DOCTYPE HTML>？

HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）。

而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

8、頁面導入樣式時，使用link和@import有什麼區別？

     （1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS,定義rel連接屬性等作用；而@import是CSS提供的，只能用於加載CSS;
     （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
     （3）import是CSS2.1提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
9、介紹一下你對瀏覽器內核的理解？

主要分成兩部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。

JS引擎則：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。

10、Html5有哪些新特性？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分HTML 和 HTML5？

（Q1）HTML5現在已經不是 SGML的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
    (1)繪畫 canvas;
    (2)用於媒介回放的 video和audio元素;
    (3)本地離線存儲 localStorage長期存儲數據，瀏覽器關閉後數據不丟失;
    (4)sessionStorage 的數據在瀏覽器關閉後自動刪除;
    (5)語意化更好的內容元素，比如 article、footer、header、nav、section;
    (6)表單控件，calendar、date、time、email、url、search;
    (7)新的技術webworker, websocket, Geolocation;
(Q2)
    IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
    可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
    瀏覽器支持新標籤後，還需要添加標籤默認的樣式。
    當然也可以直接使用成熟的框架、比如html5shim;


11、簡述一下你對HTML語義化的理解？

用正確的標籤做正確的事情。

html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;

即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;

搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;

使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

12、各個瀏覽器中css表現的差異性

（1）IE6對margin:0 auto;不會正確的進行解析

解決辦法：在父元素中使用text-align:center,在元件中使用text-align:left

（2）無法設置微高(一般小於10px)：

說明:當設置元素高度小於10px時，IE6和IE7不受控制，超出設置的高度

產生原因:IE不允許原件的高度小於字體的高度

解決辦法1:設置字體大小:font-size:0;

解決辦法2:給超出高度的標籤設置overflow:hidden

解決辦法3:設置行高line-height小於你設置的高度

（3）子元件撐破父元件

原因:父元件設置了overflow:auto屬性,子元件會從父元件中撐破出來

解決辦法:父元件中設置position:relative;

13、CSS3的flex佈局佈局

flex的作用是能夠按照設置好的規則來排列容器內的項目，而不必去計算每一個項目的寬度和邊距。甚至是在容器的大小發生改變的時候，都可以重新計算，以至於更符合預期的排版。

（1） display：flex|inline-flex；flex：相當於block；inline-flex：相當於inline-block

（2） flex-direction（流動佈局的主軸方向）：row（默認）； row-reverse：行反方向；column：列方向； column-reverse：列方向相反

（3） flex-wrap如果軸線放不下，應該如何換行。nowrap（默認）：不換行；wrap：換行，第一行在上方；wrap-reverse:換行，第一張在下方。

（4） flex-flow（“flex-direction”和“flex-wrap”屬性的縮寫），row nowrap爲其默認屬性值，分別表示flex-direction和flex-wrap屬性。

（5） justify-content（主軸方向內容對齊方式）；

flex-srart（默認）：與主軸起始方向對齊；flex-end：向主軸終點方向對齊。

center：向主軸中點方向對齊。

space-between：起始位置向主軸起始方向對齊，終點位置向主軸終點方向對齊，其餘位置向主軸中點方向對齊。

space-around：與space-between類似，只是起始位置和終點位置保留一半空白。

（6） align-content（多個主軸沿側軸方向的內容堆棧對齊方式）

flex-start：多個主軸沿側軸起始方向對齊；flex-end：多個主軸沿側軸終點方向對齊。

center：多個主軸沿側軸中點方向對齊；space-between：第一個主軸沿主軸起始方向對齊，末尾主軸沿主軸終點方向對齊，其他主軸均勻分佈對齊。

space-around：與space-between類似，只是側軸起始位置和側軸終點位置保留一半空白；stretch（默認）：伸縮多個主軸，保持側軸方向統一距離。

（7） align-items（側軸方向的內容對齊方式）

flex-srart：與側軸起始方向對齊；flex-end：向側軸終點方向對齊。

center：向側軸中點方向對齊；baseline：在側軸上保持基線對齊，以第一個項目的基線爲準。

stretch（默認）：在側軸方向拉伸每個項目，使每個項目保持相同的起始位置和終點位置。

（8）項目屬性 order(排序，項目按照order值從小到大排列)

flex-grow(空白空間分配比例) flex-shrink(項目空間的分配比例)

14、BFC

block-level box:display屬性爲 block, list-item, table的元素，會生成 block-levelbox。並且參與 blockfomatting context；

inline-level box:display屬性爲 inline, inline-block, inline-table的元素，會生成inline-level box。並且參與inline formatting context；

BFC(Blockformatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-levelbox參與，它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。在頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。

BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置。

Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

每個元素的margin box的左邊，與包含塊borderbox的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。

BFC的區域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算

哪些元素會生成BFC：

根元素

float屬性不爲none

position爲absolute或fixed

display爲inline-block, table-cell, table-caption, flex, inline-flex

overflow不爲visible

應用：自適應的兩欄佈局，清除內部浮動，防止margin重疊

<!DOCTYPE html>

<html>

<head>

<meta
charset="UTF-8">

<title></title>

<style
type="text/css">

#box{overflow: auto;width:
100%;}

#up{width: 100%;height:auto;background:
#333;float: left;}/*float不爲none的時候*/

#s_box_up{width: 50px;height:
50px;background: blue;margin-bottom: 50px;}

#down{width: 100%;height:
auto;background: #666;float: left;}/*float不爲none的時候*/

#s_box_down{width: 50px;height:
50px;background: green;margin-top: 100px;}

</style>

</head>

<body>

<div
id="box">

<div
id="up">

<div
id="s_box_up">

</div>

</div>

<div
id="down">

<div
id="s_box_down">

</div>

</div>

</div>

</body>

</html>

15、src與href的區別

href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用於超鏈接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。

16、什麼是CSSHack?

一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。

IE瀏覽器Hack一般又分爲三種，條件Hack、屬性級Hack、選擇符Hack

// 1、條件Hack

<!--[if IE]>

<style>

.test{color:red;}

</style>

<![endif]-->

// 2、屬性Hack

.test{

color:#090\9; /*For IE8+ */

*color:#f00; /* For IE7 andearlier */

_color:#ff0; /* For IE6 andearlier */

}

// 3、選擇符Hack

* html.test{color:#090;} /* For IE6 and earlier*/

* + html.test{color:#ff0;} /* For IE7 */

17、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

圖片懶加載：在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先加載。

如果爲幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和後一張優先下載。

如果圖片爲css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。

如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。

如果圖片展示區域小於圖片的真實大小，則因在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮後大小與展示一致。

18、簡述readonly與disabled的區別

1、Readonly只針對input(text / password)和textarea有效，而disabled對於所有的表單元素都有效，

2、但是表單元素在使用了disabled後，當我們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去（readonly接受值更改可以回傳，disable接受改但不回傳數據）。

19、css有個content屬性嗎？有什麼作用？有什麼應用？

css的content屬性專門應用在 before/after 僞元素上，用來插入生成內容。最常見的應用是利用僞類清除浮動。

//一種常見利用僞類清除浮動的代碼

.clearfix:after {

content:".";//這裏利用到了content屬性

display:block;

height:0;

visibility:hidden;

clear:both; }

.clearfix { *zoom:1; }

after僞元素通過 content在元素的後面生成了內容爲一個點的塊級素，再利用clear:both清除浮動。

　那麼問題繼續還有，知道css計數器（序列數字字符自動遞增）嗎？如何通過css content屬性實現css計數器？

css計數器是通過設置counter-reset、counter-increment兩個屬性、及counter()/counters()一個方法配合after / before 僞類實現。

20、標籤上title與alt屬性的區別是什麼?

alt 當圖片不顯示是用文字代表。

title 爲該屬性提供信息

21、常用的佈局，什麼是響應式佈局？

1. 固寬佈局：各個模塊是固定寬度

特點：設計簡單，不會受到圖片等固定寬度內容的影響。對比高分辨率的用戶，固定寬度會留下很多空白，屏幕小出現滾動條。

2. 流動佈局使用百分比的方式自適應不同的分辨率

特點：對用戶友好，能夠部分自適應用戶的設置。網頁周圍的空白區域在所有分辨率和顯示器下都是相同，視覺上美觀。設計者需要進行不同的測試，準備不同的對應素材

3. 彈性佈局使用em作爲單位，em是相對單位，隨用戶字體大小變化而改變

特點：頁面中所有元素可以隨着用戶的偏好縮放，需要花更多的事件測試，讓佈局適合所有的用戶

4. 柵格化佈局，也分爲固定式柵格，流式柵格

在網頁設計中，我們把寬度爲“W”的頁面分割成n個網格單元“a”，每個單元與單元之間的間隙設爲“i”,此時我們把“a+i”定義“A”。他們之間的關係如下：W =（a*n）+（n-1）*I，由於a+i=A，因此可得：(A×n) – i = W。注：最左右邊沒有邊距(margin-left,marign-right)。

特點：可以提高網頁的規範性和可用性。在柵格系統下，頁面模塊的尺寸標準化。整個網站的各個頁面佈局一致，增加頁面的相似度。

5. 響應式佈局

允許頁面寬度自動調整，利用媒體查詢根據不同的寬度設置不同的樣式，液態佈局，自適應媒體（圖片，視頻）。

（1）運行頁面寬度自動調整：在網頁頭部加入一張viewport元標籤

<metaname=”viewport”content=”width=device-width,initial-scale=1.0”>

網頁的寬度默認等於屏幕寬度，原始縮放比例是1，即網頁初始大小佔屏幕面積的100%

（2）利用媒體查詢設置不同的樣式

<linkrel=”stylesheet” type=”text/css” href=”site.css”media=”screen”/>

<linkrel=”stylesheet” type=”text/css”href=”print.css”media=”print”>

screen:使用於計算機彩色屏幕

print：使用與打印預覽模式下查看的內容或打印機打印的內容

小小樟魚

發佈了30 篇原創文章 · 獲贊 31 · 訪問量 9萬+

私信關注

常見的前端面試題

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

css3邊框背景border-image

jq基礎筆記

前端面試三

常見的前端面試題

CSS選擇器

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結