盒子模型

什么是盒子模型？

盒子模型是浏览器计算元素占据空间的一种规则，就是每个元素都表示为一个矩形盒子（box）

组成

由四个部分组成，从里到外：

• content 内容
• padding 内边距
• border 边框
• margin 外边距

宽高的计算

分为两种算法，用属性box-sizing来区分：

• box-content 标准模型，只计算内容宽高
• box-border 兼容模型，宽高包括内容、内边界、边框

其他

1.当相邻两个块级元素的上下 margin 重叠时，浏览器如何处理？

会取最大的那个进行折叠

2.假设元素设置了 width: 200px; padding: 20px; border: 5px solid;，在两种 box-sizing 模式下，它的最终渲染宽度各是多少？

box-content:250px ，box-border:200px

3.你会使用哪些浏览器开发者工具来可视化调试元素的盒子模型？

Chrome DevTools：Elements 面板 → 右侧 Computed 选项卡下的 Box Model 可视化