Web前端面試題——HTML/CSS部分理解題
1.盒子模型
(1)是什麼:每個元素被表示為一個矩形的盒子,由四部分組成:內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)。它在頁面中所佔的實際大小(寬高)是content+padding+border+margin之和。
(2)盒模型有兩種:標準盒模型(W3C盒模型)、IE盒模型。
(3)兩種盒模型的區別:標準盒模型內容大小就是content大小,而IE盒模型內容大小則是content+padding+border總的大小。
(4)怎麼設定兩種盒模型:通過設定box-sizing屬性為content-box(預設值,標準盒模型)、border-box(IE盒模型)。
(6)box-sizing使用場景:若設定子元素的margin或border時可能會撐破父元素的尺寸,就需要使用box-sizing:border-box來將border包含進元素的尺寸中。
2.外邊距重疊(collapsing margins)/margin坍塌
(1)是什麼:相鄰的兩個或多個普通流中的塊元素,如果它們設定了外邊距,那麼在垂直方向上,外邊距會發生重疊,以絕對值大的那個為最終結果顯示在頁面上,即最終的外邊距等於發生層疊的外邊距中絕對值較大者。
(2)最終外邊距:margin全為正(取最大值)、margin全為負(取絕對值最大的負數)、margin有正有負(分別取正數最大值a,負數的最大絕對值b,a-b)
(3)外邊距重疊的應用:幾個段落一起佈局,第一個段落的上外邊距正常顯示,下外邊距與第二個段落的上外邊距重疊。
(4)防止外邊距重疊:建立BFC元素。
(5)不會發生外邊距重疊的情況:行內元素、浮動元素、絕對定位元素之間的外邊距都不會疊加。
3.BFC(Block Formatting Context,塊級格式化上下文)
(1)是什麼:決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。簡言之,就是一個特殊的塊,內部的元素和外部的元素不會相互影響。BFC內的盒子會在垂直方向上一個接一個地放置,垂直方向上也會發生外邊距重疊。
(2)應用場景:自適應佈局(BFC不與float box重疊)、清除浮動(計算BFC的高度時,內部的浮動元素也被計算在內
(3)如何觸發BFC:float屬性(不為none)、overflow屬性(不為visible)、position屬性(absolute,fixed)、display屬性(inline-block,table-cell,table-caption,flex,inline-flex)。
4.行內元素有哪些?塊級元素有哪些?空元素(void)有哪些?
(1)行內元素:a,b,span,img,input,strong,label,button,select,textarea,em
(2)塊級元素:div,ul(無序列表),ol,li,dl(自定義列表),dt(自定義列表項),dd(自定義列表項的定義),p,h1-h6,blockquote(塊引用)
(3)空元素(void):即沒有內容的HTML元素。br(換行),hr(水平分割線),meta,link,input,img
5.元素的position屬性
(1)定義:規定元素的定位型別。
(2)正常文件流:指的是沒有用CSS樣式去控制的HTML文件結構,程式碼的順序就是網頁展示的順序。
(3)脫離文件流:指的是元素所顯示的位置和文件程式碼不一致。
(4)static:預設值。沒有定位,元素出現在正常的文件流中。
relative:生成相對定位的元素,相對於其在正常文件流中的位置進行定位(不脫離文件流)。
absolute:生成絕對定位的元素,相對於static定位以外的最近父級元素進行定位,即相對於其直接父級元素(脫離文件流)。absolute較少直接單獨使用在正常的文件流中,主要運行於進行了相對定位的元素框架層裡面,相對該層的左上點進行偏移。
fixed:生成固定定位元素,相對於瀏覽器視窗進行定位。
inherit:從父元素繼承position屬性的值。
(5)z-index屬性:使用了relative、absolute、fixed三種定位後,都會使正常的文件流發生一定程度的改變,造成元素出現重疊的情形。為了能讓重疊的元素有序的顯示出來,需要在定位的相關元素加上z-index屬性。其值是一個整數值,預設為0,數值越大表示擁有的優先順序越高,該屬性只對使用了定位的元素有效。
6.元素的display屬性
(1)定義:規定元素應該生成的框的型別
(2)常用屬性值:
inline:預設值。元素會被顯示為內聯元素。
none:元素不會被顯示。
block:元素將顯示為塊級元素。
inline-block:行內塊元素,即元素像行內元素一樣顯示,內容像塊元素一樣顯示。
list-item:元素像塊元素一樣顯示,並新增樣式列表標記。
table:元素會作為塊級表格來顯示。
table-caption:元素會作為一個表格標題顯示。
inherit:從父元素繼承display屬性。
(3)display屬性值inline和block的區別:
block元素會獨佔一行,預設情況下,block元素寬度自動填滿父級元素的寬度;
block元素可以設定width、height屬性,即使設定了寬度,仍然是獨佔一行;
block元素可以設定margin和padding屬性;
inline元素不會獨佔一行,多個相鄰的行內元素會排列在同一行裡面,其寬度隨元素的內容而變化;
inline元素設定width、height無效;
inline元素的margin和padding屬性在水平方向上能產生邊距效果,垂直方向不會產生邊距效果。
(4)display:inline-block元素顯示間隙
A、inline-block水平呈現的元素之間,HTML元素標籤換行顯示或標籤之間有空格的情況下會有間距
B、消除辦法:移除標籤之間的空格;
使用margin-left或margin-right取負值;
對父元素設定font-size為0,然後對元素的font-size初始化;
對父元素設定letter-spacing(字元間距)為負值,然後設定元素的letter-spacing為0;
對父元素設定word-spacing(單詞間距)為負值,然後設定元素的word-spacing為0。
7.CSS選擇符,優先順序
(1)選擇符:id(ID);class(類);element(標籤);element element(後代);element>element(子);
element,element(群組);element+element(相鄰同胞);偽類(:link,:visited,:active,:hover,:focus:first-child,:lang(language));
偽元素(:first-letter,:first-line,:before,:after);屬性選擇器
(2)可繼承的選擇符:主要是文字方面的可繼承,盒模型相關的屬性基本沒有繼承特性。font-size,font-family,color,ul
(3)不可繼承的選擇符:border,padding,margin,width,height
(4)優先順序:同權重下樣式定義最近者高。!important>內聯樣式(即定義在HTML標籤內的樣式,1000)>id(100)>
class/偽類/屬性(10)>偽元素/element(1)
(5)CSS引入偽類和偽元素的原因:用來修飾DOM樹以外的部分。
- 偽類用於當已有元素處於某個狀態時,為其新增對應的樣式,這個狀態根據使用者行為而動態變化。偽類的操作物件是DOM樹中已有的元素。
- 偽元素用於建立一些不在DOM樹中的元素,併為其新增樣式
- 偽類和偽元素的區別在於有沒有建立一個DOM樹之外的元素
8.頁面匯入樣式時,使用link和@import有什麼區別
(1)link屬於XHTML標籤,除了載入CSS外,還能用於定義RSS(簡易資訊聚合,是一種基於XML標準,在網際網路上被廣泛採用的
內容包裝和投遞協議),rel連線屬性等作用;@import是CSS提供的,只能用於載入CSS
(2)頁面被載入時,link會同時被載入;而@import引用的CSS會等到頁面被載入完成後再載入
(3)link是XHTML標籤,沒有相容問題;而@import只有在IE5以上才能被識別
(4)link支援使用JavaScript控制DOM修改樣式;而@import不支援。
9.overflow屬性
(1)定義:規定當內容溢位元素框時發生的事情
(2)visible:預設值。內容不會被修剪,會呈現在元素框之外
hidden:內容會被修剪,並且其餘內容不可見
scroll:內容被修剪,但瀏覽器會顯示滾動條以便檢視其餘內容
auto:如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘內容
inherit:從父元素繼承overflow屬性的值
10.初始化CSS樣式
(1)為什麼要初始化CSS樣式:因為瀏覽器的相容問題,不同瀏覽器對有些標籤的預設值是不同的,如果沒有對CSS初始化往往會
出現瀏覽器之間的頁面顯示差異。
(2)最簡單的初始化方法:*{margin:0; padding:0;}
(3)初始化CSS的缺點:對SEO有一定的影響
(4)SEO:Search Engine Optimization,搜尋引擎的優化。SEO具體是指通過網站結構調整、網站內容建設、網站程式碼優化以
及站外優化,使網站滿足搜尋引擎的收錄排名需求,提高網站在搜尋引擎中關鍵字的排名,從而吸引精準使用者進入網站,獲得免費
流量,產生直接銷售或品牌推廣
(5)什麼是 CSS Hack:一般來說針對不同的瀏覽器寫不同的CSS,就是CSSHack
11.src和href的區別
(1)href是指向網路資源所在位置,建立和當前元素(錨點)或當前文件(連結)之間的連線,用於超連結
(2)src是執行外部資源的位置,指向的內容會嵌入到文件中當前標籤所在位置,在請求src資源時會將其指向的資源下載並應用到
文件中。當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源載入、編譯、執行完畢
12.為什麼將CSS樣式放在頭部,將JS指令碼放在底部
(1)瀏覽器為了更好的使用者體驗,渲染引擎會嘗試儘快在螢幕上顯示內容,不會等到所有的HTML元素解析之後再構建和佈局DOM
樹,所以部分內容將被解析並顯示。
(2)前端一般主要關心首屏的渲染速度,這也是為什麼要提倡“圖片懶載入”的原因。
(3)其實外部的JS和CSS檔案是並行下載的。隨著JS技術的發展,JS也開始承擔起頁面的渲染工作了。如果JS載入需要很長時間,
會影響使用者體驗。所以需要將JS區分為承擔頁面渲染工作的JS和承擔事件處理的JS。渲染頁面的JS放在前面,事務處理的JS放在後面。
13.常用瀏覽器,核心
(1)Trident核心:(國產的絕大部分瀏覽器)IE,360,搜狗
Gecko核心:Firefox,NetScape6及以上
Presto核心:Opera7及以上
Webkit核心:(國產大部分雙核瀏覽器其中一核)Safari(蘋果),Chrome
(2)瀏覽器核心:主要分成兩部分:渲染引擎和JS引擎。最開始渲染引擎和JS引擎並沒有區分的很明確,後來JS引擎越來越獨立,
核心就傾向於只指渲染引擎
(3)渲染引擎:負責取得網頁內容(HTML,XML,影象等)、整理訊息(加入CSS等),以及計算網頁的顯示方式,後會輸出至
顯示器或印表機。
(4)JS引擎:解析和執行JavaScript來實現網頁的動態效果。
14.DOCTYPE作用?嚴格模式與混雜模式 , 標準模式和怪異模式
(1)<!DOCTYPE>宣告位於HTML文件中的第一行,處於<html>標籤之前,告知瀏覽器的解析器用什麼文件標準解析這個文件。
(2)嚴格模式下,排版和JS以瀏覽器支援的最高標準執行;混雜模式下,頁面以寬鬆向後相容的方式顯示
(3)如何觸發混雜模式:DOCTYPE不存在或格式不正確,會導致文件以混合模式呈現
(4)標準模式(standards mode)是指瀏覽器按照W3C標準解析執行程式碼;怪異模式(quirks mode)則是使用瀏覽器自己的方式
解析執行程式碼。
(5)瀏覽器解析時到底使用何種模式,與網頁中的DTD宣告(文件型別定義,DOCTYPE相關)有關,忽略DTD宣告,將使網頁進入
怪異模式。
15.優雅降級和漸進增強
(1)漸進增強(progressive enhancement):針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高階瀏覽器進行
效果、互動等改進和追加功能達到更好的使用者體驗。
(2)優雅降級(graceful degradation):一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。
(3)區別:
a.優雅降級是從複雜的現狀開始,並試圖減少使用者體驗的供給;漸進增強則是從一個非常基礎的,能夠起作用的版本開始,並不
斷擴充,以適應未來環境的需要。
b.漸進增強觀點認為應該關注於內容本身,這使得漸進增強成為一種更為合理的設計範例;優雅降級觀點認為應該針對那些最高
級、最完善的瀏覽器來設計網站。
16.HTML5新特性
(1)HTML5新特性:主要是關於影象、位置、儲存、多工等功能的增加。包括:
a.繪畫canvas(通過指令碼實現繪畫)
b.用於媒介回放的video和audio元素
c.本地離線儲存localStorage、sessionStorage
d.語義化更好的內容元素:article、footer、header、nav、section
e.表單元素:datalist(規定輸入域的選項列表)、output(用於不同元素的輸出)、keygen(提供一種驗證使用者的可靠方法)
f.input型別:color、date、month、week、number、email(檢測是否為一個email格式的地址)、range(滑動條)、
search、url、tel(輸入電話號碼,-time選擇時間)
(2) HTML5新標籤的瀏覽器相容問題:當在頁面中使用HTML5新標籤時,可能會得到三種不同的結果:
a.新標籤被當做錯誤處理並被忽略,在DOM構建時會當做這個標籤不存在
b.新標籤被當做錯誤處理,在DOM構建時,這個新標籤會被構造成行內元素
c.新標籤被識別成HTML5標籤,然後用DOM節點對齊進行替換
(3)解決相容性問題:
a.實現標籤被識別。通過document.createElement(tagName)即可讓瀏覽器識別新標籤,瀏覽器支援新標籤後,還可以為其
新增CSS樣式
b.JavaScript解決方案:
1)使用html5shim。在<head>中呼叫以下程式碼(也可下載到本地後呼叫):
<!--[if It IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
2)使用kill IE6
<!--[if It IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.an_CN.pack.js"></script>
<![endif]-->
(4)如何區分HTML和HTML5:
a.DOCTYPE宣告
b.新增的元素
(5)HTML5移除的元素:
a.純表現的元素:big,center,font,strike(刪除線),u(下劃線),s(刪除線)
b.對可用性產生負面影響的元素:frame,frameset,noframes
(6)iframe的缺點
a.會阻塞主頁面的onload事件
b.搜尋引擎的檢索程式無法解讀這種頁面,不利於SEO
17.cookie和localStorage的區別
(1)共同點:cookie、sessionStorage和localStorage都是由瀏覽器儲存在本地的資料。
(2)區別:
a.cookie是網站為了標識使用者身份而儲存在使用者本地終端上的資料(通常經過加密),資料始終在同源的http請求中攜帶,即在
瀏覽器和伺服器之間來回傳遞;localStorage不會自動把資料發給伺服器,盡在本地儲存
b.cookie資料還有路徑(path)的概念,可以限制cookie只屬於某個路徑下,儲存大小也不同,cookie資料不能超過4K,同時
因為每次http請求都會攜帶cookie,所以cookie只適合儲存很小的資料(如會話標識);localStorage也有儲存大小的限制,但比
cookie大很多,可以達到5M或更大。
c.cookie只在設定的cookie過期時間之前一直有效,即使視窗或瀏覽器關閉;localStorage始終有效,視窗或瀏覽器關閉也一直
儲存,因此用作持久資料;sessionStorage在當前瀏覽器視窗關閉之後自動刪除
d.localStorage支援事件通知機制,可以將資料更新的通知傳送給監聽者,API介面使用更方便;cookie的原生介面不友好,需
要程式設計師自己封裝
(3)localStorage如何刪除資料:localStorage物件可以將資料長期儲存在客戶端,除非人為清除,提供了以下幾個方法:
a.儲存:localStorage.setItem(key,value) 如果key存在,更新value
b.獲取:localStorage.getItem(key) 如果key不存在,則返回null
c.刪除:localStorage.removeItem(key) 一旦刪除,key對應的資料將會全部刪除
d.全部清除:localStorage.clear()使用removeItem逐個刪除太麻煩,可以使用clear,執行的結果是清除所有的localStorage對
象儲存的資料
(4)localStorage儲存的資料是不能跨瀏覽器共用的,一個瀏覽器只能讀取各自瀏覽器的資料。
18.CSS3新特性
(1)新特性:
a.邊框:border-radius(圓角)、box-shadow(陰影)、border-image(邊框圖片)
b.背景:background-size(背景圖片的尺寸)、background-origin(背景圖片的定位區域)
c.文字效果:text-shadow(文字陰影)、word-wrap(文字換行)
d.轉換和變形:transform(包括2D,3D轉換,rotate(angle),translate(x,y),scale(x,y))
e.過渡:transition
f.動畫:animation
g.多列:column-count(元素被分隔的列數)、column-gap(列之間的間隔)、column-rule(洌之間的寬度,樣式,顏色規則)
h.使用者介面:resize(規定是否可由使用者調整元素尺寸)、box-sizing(以確切的方式適應某個區域的具體內容)、outline-offset(對輪廓進行偏移)
(2)新增偽類:
a.element:before(在元素之前新增內容) element:after(在元素之後新增內容)
b.element:first-of-type、element:last-of-type、element:only-of-type、element:only-child、element:nth-child(n)(第
n個)
c. :checked、:disabled、:enabled
(3)四個錨點偽類的設定問題:
a.問題描述:超連結訪問後hover樣式就不出現了,被點選訪問過的超連結樣式不再具有hover和active
b.解決辦法:愛恨原則LoVe/HAte。改變CSS屬性的排列順序,L-V-H-A 即a:link{} a:visited() a:hover{} a:active{}
(4)transition、transform和animation的區別
a.transform是指轉換,可以將元素移動、旋轉、傾斜、拉伸。沒有變化的過程。而transition和animation都加上了時間屬性,
所以能產生動畫效果
b.transition是指過渡,一般由行為(hover等)觸發;而animation則是自動觸發
c.transition只能設定頭尾,所有樣式屬性一起變化;animation可以設定每一幀的樣式和時間,且可以迴圈播放。
19.對HTML語義化的理解
(1)用正確的標籤做正確的事情
(2)HTML語義化讓頁面的內容結構化,結構更清晰,便於對瀏覽器、搜尋引擎解析
(3)即使在沒有樣式CSS情況下也以一種文件格式顯示,並且是易於閱讀的
(4)搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重,利於SEO
(5)使閱讀原始碼的人更容易將網站分塊,便於閱讀維護理解
20.清除浮動的方法
(1)父級div定義height
(2)結尾處加空div標籤,樣式clear:both
(3)父級div定義偽類:after和zoom
(4)父級div定義overflow:hidden(同時還要定義width或zoom:1,不能定義height)
(5)父級div定義overflow:auto(同時還要定義width或zoom:1,不能定義height)
(6)父級也浮動,需要定義width(不推薦)
(7)父級div定義display:table(不推薦)
(8)結尾處加br標籤,樣式clear:both(父元素div定義zoom:1,不推薦)
21.屬性clear取值
(1)定義:規定元素的那一側不允許其它浮動元素
(2)取值:
a.none:(預設值)。允許浮動元素
b.left:在左側不允許浮動元素
c.right:在右側不允許浮動元素
d.both:在左右側均不允許浮動元素
e.inherit:從父元素繼承clear屬性
22.屬性zoom取值
(1)定義:設定或檢索物件的縮放比例
(2)取值:
a.normal:(預設值),使用物件的實際尺寸
b.<number>:用浮點數來定義縮放比例,不允許負值
c.<percentage>:用百分比來定義縮放比例,不允許負值
23.重排(reflow)與重繪(repaint)
(1)瀏覽器從下載文件到顯示頁面的過程是個複雜的過程,這裡包含了重繪和重排
(2)重繪是一個元素外觀的改變所觸發的瀏覽器行為(例如改變visibility,outline,background等屬性),瀏覽器會根據元素的新
屬性重新繪製,是元素呈現新的外觀。
(3)重排時更明顯的一種改變,可以理解為渲染樹需要重新計算。常見的觸發重排的操作:
a.DOM元素的幾何屬性變化
b.DOM樹的結構變化(例如節點的增減、移動)
c.獲取某些屬性(例如offsetTop,offsetLeft,offsetHeight,offsetWidth,clientWidth,clientHeight等)
d.改變元素的一些樣式(例如調整瀏覽器視窗大小)
(4)重繪不會帶來重新佈局,並不一定伴隨著重排。
(5)在實踐中,應該儘量減少重排次數和縮小重排的影響範圍。有以下幾種方法:
a.將多次改變樣式屬性的操作合併成一次操作
b.將需要多次重排的元素,position屬性設為absolute或fixed,使其脫離文件流,這樣它的變化就不會影響到其他元素
c.在記憶體中多次操作節點,完成後再新增到文件中去
d.如果要對一個元素進行復雜的操作,可以將其display屬性設定為none使其隱藏,待操作完成後再顯示
e.在需要經常獲取那些引起瀏覽器重排的屬性值時,要快取到變數
24.如何在網頁中新增空格?
在HTML程式碼中輸入
25.如何在網頁中顯示程式碼?
(1)對於單行程式碼,使用標籤<code>程式碼</code>
(2)對於多行程式碼,使用標籤<pre></pre> (被包圍在pre元素中的文字通常會保留空格和換行符)
26.使用mailto在網頁中連結Email地址?
(1)a標籤有一個作用是可以連結Email地址,使用mailto能讓訪問者便捷想網站管理者傳送電子郵件
(2)如果mailto後面同時又多個引數的話,第一個引數必須以?開頭,後面的引數每一個都以&分隔
27.form表單當前頁面無重新整理提交?
- 使用target屬性取值為iframe元素的name屬性值。具體如下:
- 在當前頁面建一個iframe並隱藏(display:none)
- 給這個iframe取名(name="id_iframe")
- 設定form表單的target屬性(target="id_iframe")
- 提交表單,就是無重新整理
28.iframe標籤
(1)優點
- iframe能夠把嵌入的頁面展示出來,如果有多個網頁引用iframe,只需要修改iframe的內容,就可以實現呼叫的每一個頁面內容的更改,方便快捷
- 網頁如果為了統一風格,頭部和版本都是一樣的,就可以寫成一個頁面,用iframe來巢狀,可以增加程式碼的可重用
- 過載頁面時不需要過載整個頁面,只需要過載頁面中的一個框架頁,減少了資料的傳輸,增加了網頁的下載速度
- 方便製作導航欄
(2)缺點
- 會產生很多頁面,不利於管理
- 瀏覽器的前進/後退按鈕無效
- 無法被一些搜尋引擎索引到,現在搜尋引擎爬蟲還不能很好的處理iframe中的內容,所以不利於SEO
- 多數小型的移動裝置無法顯示框架,相容性差
- 多框架的頁面會增加伺服器的http請求,對於大型網站是不可取的
(3)綜上,目前框架中的所有優點完全可以使用Ajax實現,因此不推薦使用框架
29.ES6的Promise物件?
總的來說,Promise是一個讓開發者更合理、更規範地用於處理非同步操作的物件。它有三種狀態:初始化(pending),操作成功(fulfilled),操作異常(rejected)。使用例項方法:then()和catch()用於繫結處理程式,還有all()和race()方法。點我具體講解。
30.rgba和opacity的區別?
(1)rgba和opacity都能實現透明效果,但最大的不同在於opacity作用於元素本身以及元素內的所有內容,而rgba只作用於元素本身,子元素不會繼承透明效果。
(2)rgba是CSS3的屬性,用法說明:rgba(R,G,B,A),引數說明R(紅色值。正整數|百分數),G(綠色值。正整數|百分數),B(藍色值。正整數|百分比),A(Alpha透明度。0(透明)~1)。IE6-8不支援rgba模式,可以使用IE濾鏡處理:
filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#AARRGGBBAA,endColorstr=#AARRGGBBAA);
其中AA,RR,GG,BB分別表示Alpha,R,G,B,取值為00-FF。
(3)opacity也是CSS3的屬性,用法說明:opacity:value 其中value取值0(透明)~1。對於IE6-8,可以用IE濾鏡處理:
filter:alpha(opacity=50); /*對應於opacity:0.5;*/
31.CSS屬性cursor?
(1)cursor屬性規定要顯示的滑鼠的游標型別。
(2)常用取值:pointer(手),crosshair(十字線),default(箭頭),auto(瀏覽器設定的游標)