HTML與CSS面試題

1.如何理解HTML語義化

1.讓人更容易讀懂（ 增加程式碼可讀性）
2.讓搜尋引擎更容易讀懂（SEO)

2.預設情況下，哪些HTML標籤是塊級元素，哪些是內聯元素？

1.display:block/table;有div h1 h2 table ul ol p等
2.display:inline/inline-block;有span img input button等

CSS面試題

佈局

1.盒子模型的寬度如何計算？

offsetWidth=(內容寬度+內邊距+邊框),無外邊距，因此答案是122
補充：如果讓offsetWidth等於100px，該如何做？
答：新增樣式box-sizing:border-box;　

2.margin縱向重疊的問題？

相鄰元素的margin-top和margin-bottom會發生重疊
空白內容的<p></p>也會被重疊（上面這段程式碼空白的p忽略不計)
所以答案是15px;(重疊以較大者作為間距)

3.margin負值的問題？（對margin的top left right bottom設定負值，有何效果？）

margin-top和margin-left負值，元素向上、向左移動
margin-right負值，右側元素左移、自身不受影響
margin-bottom負值，下方元素上移，自身不受影響

4.BFC理解和應用（什麼是BFC?如何應用？）

Block format context,塊級格式化上下文
一塊獨立渲染區域，內部元素的渲染不會影響邊界以外的元素
形成BFC的常見條件
float不是none display是flex inline-block等
position是absolute或fixed overflow不是visible
BFC的常見應用：清除浮動

5.float佈局的問題，以及手寫clearfix(clearfix可能面試官讓你手寫，雖然只有短短的5行程式碼如果能夠很快地手寫出來那將是很好地情況)

如何實現聖盃佈局和雙飛翼佈局？

聖盃佈局和雙飛翼佈局的目的
三欄佈局，中間一欄最先載入和渲染（內容最重要）
兩側內容固定，中間內容隨著寬度自適應
一般用於PC頁面
聖盃佈局和雙飛翼佈局的技術總結
使用float佈局
兩側使用margin負值，以便和中間內容橫向重疊
防止中間內容被兩側覆蓋，一個用padding一個用margin

手寫clearfix

.clearfix:after{
    content:'';
    display:table;
    clear:both;
}
.clearfix{
    *zoom:1;/*相容IE低版本*/
}

‘

6.flex畫色子,flex實現一個三點的色子（考察你的flex的熟練程度，不一定很複雜，可能就要你畫3個點的）

flex中常見語法
flex-direction:決定主軸的方向（即專案的排列方向）
flex-wrap：預設情況下，專案都在一條線上。flex-wrap屬性定義，如果一條軸線排不下，如何換行
justify-content:屬性定義了專案在主軸上的對齊方式
align-self:屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-item屬性。預設值為auto,表示繼承父元素的align-items屬性，如果沒有父元素，者等同於stretch。
align-items:側軸對齊方式

定位

1.absolute和relative分別依據什麼定位？

relative 依據 自身定位
absolute依據最近一層的定位元素定位

2.居中對齊有哪些實現方式？

定位元素：absolute relative fixed,body

水平居中對齊方式

inline元素：text-align:center
block元素：margin:auto
absolute元素：left:50%+margin-left:負值（自身一半）

垂直居中

inline元素：line-height的值等於height值
absolute元素：top:50%+margin-top負值
absolute元素：transform: translate(-50%, -50%)
absolute元素：top,left,bottom,right=0+margin:auto;

圖文樣式

line-height的繼承問題

寫具體數值，如30px,則繼承該值（比較好理解）
寫比例，如2/1.5，則繼承該比例（比較好理解）
寫百分比，如200%，則繼承計算出來的值（考點）　

響應式

1.rem是什麼？

rems是一個長度單位
px,絕對長度單位，最常用
em,相對長度單位，相對於父元素，不常用
rem,相對長度單位，相對於根元素，常用於響應式佈局

2.如何實現響應式？

響應式佈局的常用方案
media-query,根據不同的螢幕寬度設定根元素font-size
rem,基於根元素的相對單位

CSS3

關於CSS3動畫