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  ?

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!

※綠能、環保無空污,成為電動車最新代名詞,目前市場使用率逐漸普及化

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

※教你寫出一流的銷售文案?

您可能也會喜歡…