1. 程式人生 > >HTML&CSS面試高頻考點(二)

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屬性

 這篇有寫:點