CSS盒模型详解
CSS盒模型（Box Model）是每个网页元素的内在结构描述，它将每个元素视为一个矩形的盒子，由外到内依次包括：外边距（margin）、边框（border）、内边距（padding）和内容区域（content）。理解盒模型是掌握CSS布局的基础。
两种盒模型类型
CSS中主要存在两种盒模型：标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。它们的根本区别在于宽度和高度的计算方式不同。
标准盒模型
在标准盒模型中，元素设置的width和height仅指内容区域（content）的尺寸。元素的总宽度计算方式为：width + padding（左+右） + border（左+右） + margin（左+右）；总高度的计算方式类似。
IE盒模型
在IE盒模型中，元素设置的width和height包括了内容区域、内边距和边框。即：width = content宽度 + padding（左+右） + border（左+右）；总宽度 = width + margin（左+右）。这种模型让元素尺寸更易于管理，尤其适合响应式设计。
控制盒模型
通过box-sizing属性可以切换盒模型：
box-sizing: content-box— 标准盒模型（默认值）box-sizing: border-box— IE盒模型
获取元素尺寸的JavaScript方法
在JavaScript中有多种方式获取元素的宽高：
// 仅适用于内联样式（无法获取CSS样式表中的值）
element.style.width
// 获取计算后样式（仅IE支持）
element.currentStyle.width
// 获取计算后样式（跨浏览器兼容）
window.getComputedStyle(element).width
// 获取元素相对于视口的边界矩形信息
element.getBoundingClientRect().width
getBoundingClientRect()除了width和height，还返回top、right、bottom、left属性，描述元素相对于视口的位置。
外边距折叠（Margin Collapse）
在垂直方向上，相邻元素的外边距会合并为一个外边距，取两者中的较大值。
例如：
<style>
.box {
height: 20px;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
<div class="box">A</div>
<div class="box">B</div>
元素A和B之间的距离为15px（取较大的margin-bottom值与margin-top值叠加后取最大值，此处为15px）。
BFC（块级格式化上下文）
BFC（Block Formatting Context）是CSS渲染中的一个独立容器，拥有自己的渲染规则。
BFC的规则
- 同一BFC内的相邻元素垂直外边距会折叠
- BFC区域不会与浮动元素重叠
- BFC是一个隔离的容器，内部元素不会影响外部，反之亦然
- 计算BFC高度时，浮动元素也会参与计算
创建BFC的条件
float不为noneposition为absolute或fixeddisplay为table、table-cell、table-caption、flex、inline-blockoverflow不为visible（常用hidden）
BFC的实际用途
1. 清除浮动
当父元素包含浮动子元素时，父元素高度可能塌陷。为父元素设置overflow: hidden可创建BFC，使其包含浮动元素。
2. 防止外边距重叠
示例代码展示margin重叠问题：
<style>
.top { margin-bottom: 100px; }
.bottom { margin-top: 50px; }
.block { width: 100px; height: 100px; background: red; }
</style>
<div class="block top">1</div>
<div class="block bottom">2</div>
运行后两个元素之间的实际距离是100px（取较大的100px），而不是150px。
解决方法：为其中一个元素包裹一层BFC容器：
<div style="overflow: hidden;">
<div class="block top">1</div>
</div>
<div class="block bottom">2</div>
外层BFC容器隔离了内部的margin，使其不会与外部元素发生重叠，此时两个div之间的距离变为100px（top的margin-bottom）+ 50px（bottom的margin-top）= 150px。
