【前端面試】02 CSS盒模型及BFC

本文筆記基于「千古壹号」的GitHub項目：https://github.com/qianguyihao/web

文章目錄

• 1.問題
• 2.解決方法
• • 2.1 基本概念
  • 2.2 如何設定兩種盒模型
  • 2.3 JS如何設定、擷取盒模型對應的寬和高
  • 2.4 margin塌陷/margin重疊
  • 2.5 邊距重疊解決方案

1.問題

談一談你對CSS盒模型的認識？

延伸：

• 基本概念
• 标準盒模型與IE盒模型的差別
• CSS如何設定上述兩種模型？
• JS如何設定、擷取盒模型對應的寬和高？（難點）
• 根據盒模型解釋邊距重疊（難點）
• BFC(邊距重疊解決方案：難點)

總結：知識點逐條遞增，從理論、css、js又回到css理論

2.解決方法

2.1 基本概念

• width( [wɪdθ] )和height：内容的寬度、高度（不是盒子的寬度、高度）。
• padding( [ˈpædɪŋ] )：内邊距。
• border：邊框。
• margin( [ˈmɑːrdʒɪn])：外邊距。

标準盒模型與IE盒模型的差別：

• 标準盒子模型：width 和 height 指的是内容區域的寬度和高度。增加内邊距、邊框和外邊距不會影響内容區域的尺寸，但是會增加元素框的總尺寸。
• IE盒模型：width 和 height 指的是内容區域+border+padding的寬度和高度。

2.2 如何設定兩種盒模型

• 除了IE浏覽器外，盒子預設為标準盒模型
• 通過box-sizing（ [bɑːks ˈsaɪzɪŋ] ）設定：

/* 設定目前盒子為 标準盒模型（預設） */
    box-sizing: content-box;
    /* 設定目前盒子為 IE盒模型 */
    box-sizing: border-box;
           

2.3 JS如何設定、擷取盒模型對應的寬和高

1.通過DOM節點的 style 樣式擷取：隻能擷取行内樣式，有局限性

2.通用型：.getComputedStyle（）方法，能相容 Chrome、火狐。

3.IE獨有：currentStyle （[ˈkɜːrənt] ）

4.擷取一個元素的絕對位置（視窗 viewport 左上角的絕對位置。）

2.4 margin塌陷/margin重疊

• margin塌陷:标準文檔流中，豎直方向的margin不疊加，隻取較大的值作為margin(水準方向的margin是可以疊加的，即水準方向沒有塌陷現象)。
• 解決方法：善于用父親的padding，而不是兒子的margin

<div>
		<p></p>
</div>
           

嘗試通過給兒子p一個margin-top:50px;的屬性，讓其與父親保持50px的上邊距，但結果卻是父親距離網頁頂部50px距離

• 原因：父親沒有border，那麼兒子的margin實際上踹的是“流”，踹的是這“行”。是以，父親整體也掉下來了。
• 解決辦法：給父盒子（div）加一個border屬性

2.5 邊距重疊解決方案

1.BFC:Block Formatting Context,塊級格式化上下文,可以把它了解成一個獨立的區域。

2. 原理（渲染規則）：

• BFC 内部的子元素，在垂直方向，邊距會發生重疊。
• BFC在頁面中是獨立的容器，外面的元素不會影響裡面的元素，反之亦然。
• BFC區域不與旁邊的float box區域重疊。，可以用來清除浮動
• 計算BFC的高度時，浮動的子元素也參與計算。

3.如何生成BFC?

• 設定overflow屬性是 hidden或auto。【最常用】
• 設定浮動
• 設定定位屬性absolute（[ˈæbsəluːt] ）或fixed（ [fɪkst]）
• display為inline-block, table-cell, table-caption, flex, inline-flex

4.解決margin重疊

當父元素和子元素發生 margin 重疊時，解決辦法：給子元素或父元素建立BFC。（原理2）

5.清除浮動：将第2個盒子設定BFC.(原理3)

6.兒子浮動了，但由于父親沒有設定高度，導緻看不到父親的背景色（此時父親的高度為0）

給父親建立BFC（增加 overflow=hidden屬性）即可（原理4）