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

川长思鸟来 2021-10-25 14:16 347阅读 0赞

本文笔记基于「千古壹号」的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、火狐。

window.getComputedStyle(element).width/height;

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

element.currentStyle.width/height;

4.获取一个元素的绝对位置（视窗 viewport 左上角的绝对位置。）

element.getBoundingClientRect().width/height;

## 2.4 margin塌陷/margin重叠 ##

*  **margin塌陷:标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。
 *  解决方法：善于用父亲的padding，而不是儿子的margin

尝试通过给儿子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）