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

2021-09-24 03:16:28 字數 1692 閱讀 4037

1、為什麼要初始化css樣式?

答案:因為瀏覽器的相容問題,不同瀏覽器對有些標籤的預設值是不同的,如果沒對css初始化往往會出現瀏覽器之間的頁面顯示差異。

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

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

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

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

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

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

純數字:把比例傳遞給後代,例如父級行高為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現象(即樣式失效導致的頁面閃爍問題)

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

好程式設計師web前端分享 html5 常見面試題集錦第二篇,希望對大家有所幫助。1.父元素和子元素寬高不固定,如何實現水平垂直居中。方法1 方法2 html,body body parent child 方法3 2.分別實現骰子中的 一點 和 三點 的布局。一點的布局 三點的布局 3.簡述選擇器 ...

好程式設計師HTML5大前端常用開發工具大集合

第一種是initializr initializr是製作html5 的入門輔助開發工具,可以使用提供的特色模板迅速生成 也可以自定義,initializr會為你生成 簡潔的可定製的網頁模板。第二種是html5 visual cheat sheet html5 visual cheat sheet是乙...

黑馬程式設計師 html5入門

en 標題1 標題1標題1 啦啦啦啦啦啦啦啦啦啦 啦啦啦啦 啦啦啦啦啦啦啦啦啦啦 啦啦啦啦 鋪 啊啊啊啊啊啊 啦啦啦啦啦啦啦啦啦啦 en 列表項1 列表項2 列表項3 列表項4 border 1px black solid border collapse collapse border 1px bl...