前端面試之HTML&CSS篇

感覺這塊面試的時候還是比較少問的,我在面試時被問到過css的單位和px與rem的區別。另外常見的可能就是垂直居中和三欄佈局了。

語義化標籤

讓標籤具有自己的含義。
常見語義化標籤:title header footer article hn(h1~h6) main nav strong code
好處:

  1. 代碼結構清晰,方便閱讀,有利於團隊合作開發。
  2. 方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以語義的方式來渲染網頁。
  3. 有利於搜索引擎優化(SEO)。

css水平垂直居中

css的transform、absolute、margin還有flex以及行內標籤的一些屬性。
具體的可以參考博客:div+css實現水平/垂直/水平垂直居中超詳解

css中有哪些單位

px、em、rem、%、vh、vw、vmin、vmax、ex、ch

px、em、rem的區別

px是絕對單位,頁面按精確像素展示。

em:相對單位,基準點爲父節點字體的大小,如果自身定義了font-size按自身來計算(瀏覽器默認字體是16px),整個頁面內1em不是一個固定的值。

rem:相對單位,可理解爲”root em”, 相對根節點html的字體大小來計算,CSS3新加屬性,chrome/firefox/IE9+支持。

然後可以提一下他們在移動端適配上的應用。

display可以取哪些值

inline、block、inline-block、list-item、run-in、none、table、table-row、table-column、table-cell、inherit、table-row-group、table-column-group

href和src的區別

href:超文本引用。link、a。瀏覽器會識別href引用的文檔並行下載該文檔,並且不會停止對當前文檔的處理。

src:引入。img、script、iframe。src指向的內容會嵌入到文檔中當前標籤所在的位置。當瀏覽器解析到src引用時,會暫停瀏覽器的渲染,直到該資源加載完畢。這也是將js腳本放在底部而不是頭部的原因。

三欄佈局

兩端寬度固定,中間寬度自適應佈局
三種方式實現:

  1. flex佈局
  2. float
  3. position: absolute

具體代碼:github

transition和animation

Transition:對元素某個屬性或多個屬性的變化,進行控制(時間等),類似flash的補間動畫。但只有兩個關鍵幀。開始,結束。

Animation:對元素某個屬性或多個屬性的變化,進行控制(時間等),類似flash的補間動畫。可以設置多個關鍵幀。

Transition與Animation區別: transition需要觸發一個事件,而animation在不需要觸發任何事件的情況下也可以顯式的隨着時間變化來改變元素css的屬性值,從而達到一種動畫的效果。Transition: transition屬性是一個簡單的動畫屬性,非常簡單非常容易用。可以說它是animation的簡化版本,是給普通做簡單網頁特效用的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章