web前端分享HTML5常見面試題集錦四

1、為什么要初始化CSS樣式？

答案：因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

2、浮動元素引起的問題？

答案：a. 父元素的高度無法被撐開，影響與父元素同級的元素

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

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

3、line-height三種賦值方式有何區別？（帶單位、純數字、百分比）？

答案：帶單位：px不用計算，em則會使元素以其父元素font-size值為參考來計算自己的行高

純數字：把比例傳遞給后代，例如父級行高為1.5，子元素字體為18px，則子元素行高為1.5*18=27px

百分比：將計算后的值傳遞給后代

4、:link、:visited、:hover、:active的執行順序是怎么樣的？

答案：L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜歡和討厭兩個詞來概括

5、css屬性content有什么作用？有什么應用？

答案：css的content屬性專門應用在 before/after 偽元素上，用于來插入生成內容，可以配合自定義字體顯示特殊符號。。

6、文字超出顯示為省略號？

答案：//單行：

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

//多行：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

7、HTML5有哪些新增的表單元素？

答案：datalist datetime output date month week time color number range email url

8、用純CSS創建一個三角形的原理是什么？

答案：首先，需要把元素的寬度、高度設為0。然后設置邊框樣式。

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

9、什么時候可以觸發BFC？

答案：根元素，即html

float的值不為none（默認）

overflow的值不為visible（默認）

display的值為inline-block、table-cell、table-caption

position的值為absolute或fixed

10、style標簽寫在body后與body前有什么區別？

答案：頁面加載自上而下 當然是先加載樣式。

寫在body標簽后由于瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標簽）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）

總結

以上是生活随笔為你收集整理的html5 将id的值用于top_web前端分享HTML5常见面试题集锦四的全部內容，希望文章能夠幫你解決所遇到的問題。

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