HTML&CSS面試高頻考點(二)
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屬性
這篇有寫:點這裏
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【【其他文章推薦】
※帶您來了解什麼是 USB CONNECTOR ?
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!
※綠能、環保無空污,成為電動車最新代名詞,目前市場使用率逐漸普及化
※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益
※教你寫出一流的銷售文案?