HTML&CSS面試高頻考點(二)
阿新 • • 發佈:2020-06-28
HTML&CSS面試高頻考點(一) ♥
6. W3C盒模型與怪異盒模型
- 標準盒模型(W3C標準)
- 怪異盒模型(IE標準)
怪異盒模型下盒子的大小=width(content + border + padding) + margin,即真實大小。
*參考標準模式與相容模式的區別,相容模式下為怪異盒模型。
*注意box-sizing可以改變盒模型(box-sizing:border-box即為怪異盒模型)。
7. 水平垂直居中的方法
(1)定寬居中
1. absolute + 負margin
//父元素 position: relative; //子元素 position: absolute; top: 50%; left: 50%; //margin設定自身一半的距離 margin-top: -50px; margin-left: -50px;
2. absolute + margin: auto
//父元素 position: relative; //子元素 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
3. absolute + calc
//父元素 position: relative; //子元素 position: absolute; //減去自身一半的寬高 top: calc(50% - 50px); left: calc(50% - 50px);
*calc() 函式用於動態計算長度值。
4. min-height: 100vh + flex + margin:auto
main{ min-height: 100vh; /* vh相對於視窗的高度,視窗高度是100vh */ /* “視區”所指為瀏覽器內部的可視區域大小, 不包含工作列標題欄以及底部工具欄的瀏覽器區域大小。 */ display: flex; } div{ margin: auto; }
(2)不定寬居中
1. absolute + transform
//父元素 position: relative; //子元素 position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
2. line-height
//父元素 .wp { text-align: center; line-height: 300px; }
//子元素
.box { display: inline-block; vertical-align: middle; line-height: inherit; text-align: left; }
3. flex佈局
display: flex;//flex佈局 justify-content: center;//使子專案水平居中 align-items: center;//使子專案垂直居中
4. table-cell佈局
因為table-cell相當與表格的td,無法設定寬和高,所以巢狀一層,巢狀一層必須設定display: inline-block
<div class="box"> <div class="content"> <div class="inner"> </div> </div> </div> .box { //只有這裡可以設定寬高 display: table; //這是巢狀的一層,會被table-cell覆蓋 } .content { display: table-cell; vertical-align: middle;//使子元素垂直居中 text-align: center;//使子元素水平居中 } .inner { display: inline-block; //子元素 }
8. BFC
前文連結:點選這裡
BFC:Block formatting context(塊級格式化上下文),是一個獨立的渲染區域,只有Block-level box參與,與外部區域毫不相干。
- block-level box:display屬性為block, list-item, table的元素。
- inline-level box:display屬性為inline, inline-box, inline-table的元素。
(1)BFC的佈局規則
- 內部box在垂直方向一個個放置;
- 同一個BFC的兩個相鄰box的margin會發生重疊;
- 每個盒子的margin左邊與包含塊的border左邊相接觸,即使存在浮動也是如此;
- BFC區域不會和float box重疊;
- 計算BFC高度時,浮動元素也參與計算。
(2)開啟BFC的方法
- float的值不是none
- position的值不是static或relative
- display的值是inline-block, table-cell, flex, table-caption或inline-flex
- overflow的值不是visible
(3)BFC的作用
1. 避免margin塌陷
根據BFC的佈局規則2,我們可以通過設定兩個不同的BFC的方式解決margin塌陷的問題。
2. 自適應兩欄佈局
根據BFC的佈局規則3和4,我們將右側div開啟BFC就可以形成自適應兩欄佈局。
.left { float: left; //左側浮動 }
.left { float: left; } .right { overflow: hidden; //開啟BFC }
3. 清除浮動
當不給父節點設定高度的時候,如果子節點設定浮動,父節點會發生高度塌陷。這個時候就要清除浮動。
根據規則5,只需給父元素啟用BFC就可以達到目的。
.par { overflow: hidden; //父元素開啟BFC } .child { float: left; //子元素浮動 }
9. 清除浮動
這篇有寫:點這裡
10. position屬性
這篇有寫:點