面试题 -- CSS 的盒模型?

盒模型

HTML中写的每个标签对，都是一个盒模型(Box Model) (opens new window)，它定义了盒子的大小，盒子中所装的内容以及盒子的定位。 盒模型有两种:

1. IE定义的盒子模型(box-sizing: border-box)
2. 标准 W3C 盒子模型(box-sizing：content-box)

都是在描述同一个事物，但是两者的区别是IE的 content 部分包含了 border 和 padding。

示例

开发同学在浏览器调试页面时，可以在 Elements -> Styles 选项中看到盒子模型的。

盒模型的组成

属性	作用
margin	外边距
border	边框
padding	内边距
content	内容

***

其中 margin border padding 是 CSS 属性，可以通过CSS来控制； content 是 HTML 属性，表示 HTML 元素的内容。

盒子的大小

IE定义的盒子模型，`box-sizing` 属性为 `border-box`

盒子的大小由 width 和 height 决定，而 content 内容的大小需要用 width 和 height 减去相应的 边框 和 内边距 来计算。

盒子的宽度 = width
盒子的高度 = height

标准 W3C 盒子模型，`box-sizing` 属性为 `content-box`

盒子的大小不是由 width 和 height 决定，他们只是设置了盒子中 content 内容的大小。

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

常见问题

外边距塌陷

• 解决方法

1. 开发时尽量避免

外边距塌陷

• 解决方法

1. 可以为 父元素 定义1像素的上边框或上内边距。
2. 可以为 父元素 添加 overflow:hidden 。