好程式設計師web 前端分享 HTML5 常見面試題集錦第二篇，希望對大家有所幫助。

1. <div class="parent"><div class="child"></div></div>,父元素和子元素寬高不固定，如何實現水平垂直居中。

　　方法1：

　　 html,body{height: 100%;}

　　 body{ margin: 0;display: flex; justify-content: center; align-items: center; }

　　 .parent{ display: flex; justify-content: center; align-items: center;}

　　</style>

　　方法2：

　　html,body{height: 100%;}

　　body{ margin: 0;display: flex;}

　　.parent{ border: 1px solid red; display: flex;margin: auto;}

　　.child{ border: 1px solid blue; margin: auto;}

　　方法3：

　　 body{ margin: 0;}

　　 .parent{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

　　 </style>

2. 分別實現shai子中的 '一點' 和 '三點' 的佈局。

一點的佈局：

<div>

</div>

body{ margin: 0;}

div{width: 200px; height: 200px; border: 1px solid #000; display: flex; justify-content: center; align-items: center;}

span{width: 30px; height: 30px; background: #f00; display: block; border-radius: 50%;}

　　</style>

　　三點的佈局

　　<div>

　　</div>

　　 body{ margin: 0;}

　　 div{width: 200px; height: 200px; border: 1px solid #000; display: flex; justify-content:space-between; padding: 20px;}

　　 span{width: 30px; height: 30px; background: #f00; display: block; border-radius: 50%;}

　　 div span:nth-child(1){ align-self: flex-end;}

　　 div span:nth-child(2){ align-self:center;}

　　 </style>

3. 簡述選擇器~和+的區別。

　　1）.相鄰兄弟選擇器。選擇有相同父元素的兩個挨著的元素的後一個元素。語法：元素1 + 元素2 {宣告}

　　例如1：

　　h1 + p { color：red；}

　　HTML中：

　　<p>·······</p> //可以匹配

　　<p>·······</p> //不可以匹配

　　例如2：

　　li + li { color：red；}

　　HTML中：

　　<ul>

　　 <li>······</li> //可以匹配，上一個<li>的兄弟

　　</ul>

　　2).普通兄弟選擇器。選擇有相同父元素的兩個元素中，第一個元素後所有的第二個元素。語法：元素1 ~ 元素2 { 宣告}

　　例如：

　　h1 ~ p { color：red；}

　　HTML中：

　　<p>·······</p> //可以匹配

　　<p>·······</p> //可以匹配

　　<h2>······<p>···</p>······</h2> //不可以匹配

4. 簡述box-sizing的有效值以及所對應的盒模型規則。

　　box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

　　語法：box-sizing: content-box|border-box|inherit;

　　1）box-sizing:content-box；這是由 CSS2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。是預設值。如果你設定一個元素的寬為100px，那麼這個元素的內容區會有100px 寬，並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度中

　　2）box-sizing:border-box；為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。告訴瀏覽器去理解你設定的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px,那麼這100px會包含其它的border和padding，內容區的實際寬度會是width減去border + padding的計算值。大多數情況下這使得我們更容易的去設定一個元素的寬高。

　　3）box-sizing:inherit;；規定應從父元素繼承 box-sizing 屬性的值

5.flex中元素的margin是否會合並？

　　不會合並

6. 簡述align-items和align-content的區別。

　　align-items屬性適用於所有的flex容器，它是用來設定每個flex元素在交叉軸上的預設對齊方式。如果是多行多行容器，多行和多行之間是有間距的。

　　align-content有相同的功能，但是align-content屬性只適用於多行的flex容器，有一個重點就是多行，並且align-content在對齊的過程中，如果是多行多行容器，多行和多行之間的間距是沒有的。

　　單行容器：

　　多行容器：

7. 簡述data:屬性的用法（如何設定，如何獲取）；有何優勢？

　　data-* 的值的獲取和設定，2種方法：

　　1）傳統方法

　　getAttribute() 獲取data-屬性值；

　　setAttribute() 設定data-屬性值

　　2)HTML5新方法

　　例如 data-href

　　dataset.href 獲取data-href屬性值

　　dataset.href = ' 設定data-href屬性值

　　傳統方法無相容性問題，但是不夠優雅、方便

　　HTML5新方法很優雅、方便，但是有相容性問題，可以在移動端開發或不支援低版本瀏覽器的專案中使用

　　優勢：自定義的資料可以讓頁面擁有更好的互動體驗（不需要使用 Ajax 或去服務端查詢資料）。

8. 簡述title與h1的區別，b與strong的區別，i與em的區別。

1)title與h1的區別:

定義：title是網站標題，h1是文章主題

作用：title概括網站資訊，可以直接告訴搜尋引擎和使用者這個網站是關於什麼主題和內容的，是顯示在網頁Tab欄裡的；h1突出文章主題，面對使用者，是顯示在網頁中的.

2)b與strong的區別:

從視覺上效果觀看b與strong是沒有區別的,從單詞的語義也可以分析得出，b是Bold(加粗)的簡寫，所以這個B標記所傳達的意思只是加粗，沒有任何其它的作用，而Strong我們從字面理解就可以知道他是強調的意思，所以我們用這個標記向瀏覽器傳達了一個強調某段文字的訊息，他是強調文件邏輯的，並非是通知瀏覽器應該如何顯示。

3)i與em的區別:同樣，I是Italic(斜體)，而em是emphasize(強調)。

9.什麼是標準文件流？

　　標準文件流：網頁在解析的時候，遵循於從上向下，從左向右的一個順序，而這個順序就是來源於標準文件流。

　　標準文件流等級，分為兩種等級：塊級元素和行內元素；

　　塊級元素：

　　1).霸佔一行，不能與其他任何元素並列

　　2).能接受寬、高

　　3).如果不設定寬度，那麼寬度將預設變為父親的100%，即和父親一樣寬

　　行內元素：

　　1).與其他元素並排

　　2).不能設定寬、高。預設的寬度就是文字的寬度

10.z-index是什麼？在position的值是什麼時可以觸發？

　　z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面，當脫離文件流內容較多，並且相互重疊的時候，就有可能發生本想完全顯示的內容被其他內容遮擋的結果，這時我們就需要人為指定哪個層在上面，哪個在下面，z-index屬性就是幹這個用的。注意：Z-index 僅能在定位元素上奏效.

　　在position的值是relative、absolute、fixed、sticky時候可以觸發

11、PC端常用的佈局方法

固定佈局、浮動佈局、定位佈局、流式佈局、彈性佈局

12 佈局左邊20% 中間自適應右邊200px 不能用定位

　　方法1：

　　<div class="center">center</div>

　　<div class="right">right</div>

　　body{ margin: 0; display: flex;}

　　.left{width: 20%; height: 200px; background: red;}

　　.center{height: 400px; background: blue; flex-grow: 1;}

　　.right{width: 200px; height: 600px; background: pink; }

　　</style>

　　方法2：

　　<div class="right">right</div>

　　<div class="center">center</div>

　　<style>

　　 body{ margin: 0; }

　　 .left{width: 20%; height: 200px; background: red; float: left;}

　　 .center{height: 600px; background: blue; margin-left: 20%; margin-right: 200px;}

　　 .right{width: 200px; height: 400px; background: pink; float: right;}

　　 </style>

　　方法3：

　　<div class="right">right</div>

　　<div class="center">center</div>

　　 body{ margin: 0; }

　　 .left{width: 20%; height: 200px; background: red; float: left;}

　　 .center{overflow: hidden; height: 400px; background: blue;}

　　 .right{width: 200px; height: 600px; background: pink; float: right;}

　　 </style>

好程式設計師web前端分享HTML5常見面試題集錦二

相關文章