CSS 盒模型常见面试题及答案

CSS 盒模型常见面试题及答案

盒模型是 CSS 中的基础概念，面试中常被问到。以下是几个典型问题及简要答案（基于标准盒模型和 IE 盒模型）：

1. 什么是 CSS 盒模型？
   盒模型描述了元素在页面中占据的空间结构，包括内容区域、内边距、边框和外边距。每个元素都被视为一个矩形盒子。

2. 盒模型的组成部分有哪些？

   • 内容 (content)：元素的实际内容（如文本或图片）。
   • 内边距 (padding)：内容与边框之间的空间。
   • 边框 (border)：围绕内边距的线条。
   • 外边距 (margin)：盒子与其他元素之间的空间。

3. 标准盒模型 (W3C 盒模型) 和 IE 盒模型的区别？

   • 标准盒模型：width和height只包括内容区域。总宽度 =width + padding + border + margin。
   • IE 盒模型：width和height包括内容、内边距和边框。总宽度 =width + margin（其中width已包含 padding 和 border）。
   • 通过box-sizing: content-box（默认，标准）或box-sizing: border-box（IE 风格）控制。

4. box-sizing 属性的作用是什么？

   • 控制盒模型的计算方式。
   • content-box：宽度不包括 padding 和 border（标准）。
   • border-box：宽度包括 padding 和 border（IE 风格），常用于响应式设计，避免布局溢出。

5. 如何计算元素的总宽度和高度？

   • 总宽度=width + padding-left + padding-right + border-left + border-right + margin-left + margin-right（标准盒模型）。
   • 总高度=height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom。
   • 如果box-sizing: border-box，width已包含 padding 和 border。

6. 什么是外边距合并 (margin collapsing)？

   • 相邻元素的垂直外边距会合并，取最大值，而不是相加。
   • 例如，两个<div>各有margin: 10px，它们之间的间距是 10px 而非 20px。
   • 父子元素间也会发生合并（父元素无 padding/border 时）。

7. 如何避免外边距合并？

   • 给父元素添加padding或border。
   • 使用overflow: hidden或display: flex等布局方式。