轉載自?前端面試常考五

一、DIV元素是什么

DIV元素是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

簡單來說：就是指定渲染?HTML 的容器。

二、如何居中一個元素

非浮動元素居中

設置?margin:0 auto 令其居中, 定位 ,父級元素。?text-align:center

浮動元素居中

方法一:

使用position定位。

方法二:

父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對左移動-50%。
方法三:

設置當前div的寬度，然后設置margin-left:50%;position:relative; left:-250px;其中的left是寬度的一半。

三、浮動的工作原理是什么

浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于文檔中的普通流（文檔流），即脫離了文檔流，當一個元素浮動之后，不會影響到?塊級框的布局而只會影響內聯(lián)框（通常是文本）的排列，文檔中的普通流就會表現(xiàn)得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現(xiàn)包含框不會?自動伸高來閉合浮動元素（“高度塌陷”現(xiàn)象）。顧名思義，就是漂浮于普通流之上，像浮云一樣，但是只能左右浮動。正是因為浮動的這種特性，導致本屬于普通流中的元素浮動之后，包含框內部由于不存在其他普通流元素了，也就表現(xiàn)出高度為0（高度塌陷）。

四、浮動元素會引起哪些問題

問題一

與浮動元素同級的非浮動元素會跟隨其后。

問題二

父元素的高度無法被撐開，影響與父元素同級的元素。

問題三

若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

五、清除浮動常用的方法有哪些

方法一

父級div定義 偽類:after和zoom?

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題?
優(yōu)點：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）?
缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。?
建議：推薦使用，建議定義公共類，以減少CSS代碼。

方法二

父級div定義 overflow:hidden?
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度?
優(yōu)點：簡單、代碼少、瀏覽器支持好?
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。?
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。?

方法三

結尾處加空div標簽 clear:both?
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度?
優(yōu)點：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題?
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好?
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法。

六、如何調整元素的布局級別

方法一

display:block?
block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。?
block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。?
block元素可以設置margin和padding屬性。

方法二

display:inline-block?

簡言之就是將對象呈現(xiàn)為inline對象，但是對象的內容作為block對象呈現(xiàn)，后面的內聯(lián)對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

方法三

display:inline?
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內容而變化。?
inline元素設置width,height屬性無效。?
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top,?margin-bottom不會產(chǎn)生邊距效果。

七、如何理解優(yōu)雅降級和漸進增強

優(yōu)雅降級：

Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，達到能夠在舊式瀏覽器上以某種形式降級體驗的目的。

漸進增強：

以所有瀏覽器支持的基本功能為基礎，逐步添加一些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎瀏覽器的額外樣式和功能。當瀏覽器支持時，會自動地呈現(xiàn)出來并發(fā)揮作用。

八、如何優(yōu)化性能

方法一

當需要設置的樣式很多時設置className而不是直接操作style。

方法二

少用全局變量、緩存DOM節(jié)點查找的結果。減少IO讀取操作。

方法三

圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳。

方法四

用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

方法五

減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存，圖片服務器。

方法六

前端模板JS+數(shù)據(jù)，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數(shù)。?

方法七

避免使用css表達式即動態(tài)屬性。

九、CSS樣式分為哪幾種

1、內聯(lián)css樣式

內聯(lián)式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標簽中。

2、嵌入式css樣式

嵌入式css樣式，就是可以把css樣式代碼寫在標簽之間。

3、外部式css樣式

外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名（也可以為調用其他網(wǎng)站CSS）。

十、為什么要初始化css樣式

1、瀏覽器的兼容問題

不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

2、提高編碼質量

初始化CSS樣式主要是提高編碼質量，如果不初始化整個頁面做完很糟糕，重復的CSS樣式很多。

十一、如何理解css中的刻度

在CSS中刻度用于設置元素尺寸的單位。

? 特殊值0可以省略單位。例如：margin:0px可以寫成margin:0?
? 一些屬性可能允許有負長度值，或者有一定的范圍限制。如果不支持負長度值，那應該變換到能夠被支持的最近的一個長度值。?
? 長度單位包括：相對單位和絕對單位。?
? 相對長度單位有：em, ex, ch, rem, vw, vh, vmax, vmin?
? 絕對長度單位有：cm, mm, q, in, pt, pc, px
? 絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

十二、em與rem的區(qū)別是什么

em

文本相對長度單位。相對于當前對象內，文本字體的尺寸。如果當前對象內，文本字的體尺寸未設置，則相對于瀏覽器默認字體的尺寸(默認16px)。(相對父元素的字體大小倍數(shù))
em（font size of the element）是指相對于父元素字體大小的單位。

rem

rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數(shù)，只相對于根元素的大小。rem（font size of the root element）是指相對于根元素的字體大小的單位。
作用：利用rem可以實現(xiàn)簡單的響應式布局，可以利用html元素中字體的大小與屏幕間的比值設置font-size的值實現(xiàn)當屏幕分辨率變化時讓元素也變化。

區(qū)別

em的計算規(guī)則依賴父元素，rem的計算規(guī)則依賴根元素。?

一、DIV元素是什么

DIV元素是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

簡單來說：就是指定渲染?HTML 的容器。

二、如何居中一個元素

非浮動元素居中

設置?margin:0 auto 令其居中, 定位 ,父級元素。?text-align:center

浮動元素居中

方法一:

使用position定位。

方法二:

父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對左移動-50%。
方法三:

設置當前div的寬度，然后設置margin-left:50%;position:relative; left:-250px;其中的left是寬度的一半。

三、浮動的工作原理是什么

浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于文檔中的普通流（文檔流），即脫離了文檔流，當一個元素浮動之后，不會影響到?塊級框的布局而只會影響內聯(lián)框（通常是文本）的排列，文檔中的普通流就會表現(xiàn)得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現(xiàn)包含框不會?自動伸高來閉合浮動元素（“高度塌陷”現(xiàn)象）。顧名思義，就是漂浮于普通流之上，像浮云一樣，但是只能左右浮動。正是因為浮動的這種特性，導致本屬于普通流中的元素浮動之后，包含框內部由于不存在其他普通流元素了，也就表現(xiàn)出高度為0（高度塌陷）。

四、浮動元素會引起哪些問題

問題一

與浮動元素同級的非浮動元素會跟隨其后。

問題二

父元素的高度無法被撐開，影響與父元素同級的元素。

問題三

若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

五、清除浮動常用的方法有哪些

方法一

父級div定義 偽類:after和zoom?

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題?
優(yōu)點：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）?
缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。?
建議：推薦使用，建議定義公共類，以減少CSS代碼。

方法二

父級div定義 overflow:hidden?
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度?
優(yōu)點：簡單、代碼少、瀏覽器支持好?
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。?
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。?

方法三

結尾處加空div標簽 clear:both?
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度?
優(yōu)點：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題?
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好?
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法。

六、如何調整元素的布局級別

方法一

display:block?
block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。?
block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。?
block元素可以設置margin和padding屬性。

方法二

display:inline-block?

簡言之就是將對象呈現(xiàn)為inline對象，但是對象的內容作為block對象呈現(xiàn)，后面的內聯(lián)對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

方法三

display:inline?
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內容而變化。?
inline元素設置width,height屬性無效。?
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top,?margin-bottom不會產(chǎn)生邊距效果。

七、如何理解優(yōu)雅降級和漸進增強

優(yōu)雅降級：

Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，達到能夠在舊式瀏覽器上以某種形式降級體驗的目的。

漸進增強：

以所有瀏覽器支持的基本功能為基礎，逐步添加一些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎瀏覽器的額外樣式和功能。當瀏覽器支持時，會自動地呈現(xiàn)出來并發(fā)揮作用。

八、如何優(yōu)化性能

方法一

當需要設置的樣式很多時設置className而不是直接操作style。

方法二

少用全局變量、緩存DOM節(jié)點查找的結果。減少IO讀取操作。

方法三

圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳。

方法四

用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

方法五

減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存，圖片服務器。

方法六

前端模板JS+數(shù)據(jù)，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數(shù)。?

方法七

避免使用css表達式即動態(tài)屬性。

九、CSS樣式分為哪幾種

1、內聯(lián)css樣式

內聯(lián)式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標簽中。

2、嵌入式css樣式

嵌入式css樣式，就是可以把css樣式代碼寫在標簽之間。

3、外部式css樣式

外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名（也可以為調用其他網(wǎng)站CSS）。

十、為什么要初始化css樣式

1、瀏覽器的兼容問題

不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

2、提高編碼質量

初始化CSS樣式主要是提高編碼質量，如果不初始化整個頁面做完很糟糕，重復的CSS樣式很多。

十一、如何理解css中的刻度

在CSS中刻度用于設置元素尺寸的單位。

? 特殊值0可以省略單位。例如：margin:0px可以寫成margin:0?
? 一些屬性可能允許有負長度值，或者有一定的范圍限制。如果不支持負長度值，那應該變換到能夠被支持的最近的一個長度值。?
? 長度單位包括：相對單位和絕對單位。?
? 相對長度單位有：em, ex, ch, rem, vw, vh, vmax, vmin?
? 絕對長度單位有：cm, mm, q, in, pt, pc, px
? 絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

十二、em與rem的區(qū)別是什么

em

文本相對長度單位。相對于當前對象內，文本字體的尺寸。如果當前對象內，文本字的體尺寸未設置，則相對于瀏覽器默認字體的尺寸(默認16px)。(相對父元素的字體大小倍數(shù))
em（font size of the element）是指相對于父元素字體大小的單位。

rem

rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數(shù)，只相對于根元素的大小。rem（font size of the root element）是指相對于根元素的字體大小的單位。
作用：利用rem可以實現(xiàn)簡單的響應式布局，可以利用html元素中字體的大小與屏幕間的比值設置font-size的值實現(xiàn)當屏幕分辨率變化時讓元素也變化。

區(qū)別

em的計算規(guī)則依賴父元素，rem的計算規(guī)則依賴根元素。?

總結

以上是生活随笔為你收集整理的前端面试常考系列五的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。