【前端面试】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）