CSS 盒模型

[cfour-hi]

盒子模型 - MDN

图片来源 - MDN

盒模型由内向外依次是 content、padding、border、margin，分别有上下左右四个方向。

标准 vs 怪异

• 标准盒模型下元素 css 宽度只应用于 content

• 怪异盒模型元素 css 宽度包含 content + padding + border，主要体现在 IE 内核浏览器。

  IE6 以上版本的浏览器只要正确声明 DOCTYPE 即渲染为标准盒模型，参考：

  Internet Explorer box model bug

  怪异模式和标准模式

使用 box-sizing: border-box 可模拟怪异盒模型

box-sizing - MDN

扩展

.box {
    width: 500px;
    height: 500px;
    padding: 50px;
    border: 25px solid #eee;
    margin：100px;
}

标准盒模型：

// 500 = cssWidth

padding.width = 50
border.width = 25
margin.width = 100
content.width = scrollbar ? (500 - 17) : 500 // scrollbar 的默认宽度是 17px

clientWidth = content.width + padding.width * 2
// => scrollbar ? 583 : 600

clientLeft = border.width
// => 25

offsetWidth = clientWidth + (scrollbar ? 17 : 0) + border.width * 2

// 如果有 scrollbar，scrollbar 会占据 content 的宽度
// 即 clientWidth 不包含 scrollbar 的宽度，而 offsetWidth 包含。

offsetLeft = offsetParent.x - borderLeft.x
// => 100

// offsetParent 为距离最近的定位元素，如果没有则为 body 元素
// 此处为 100px，即 margin.width

scrollWidth = clientWidth
// => scrollbar ? 583 : 600

怪异盒模型：

padding.width = 50
border.width = 25
margin.width = 100
content.width = 500 - padding.width * 2 - border.width * 2

clientWidth = content.width + padding.width * 2 - (scrollbar ? 17 : 0)
// => 433

clientLeft = border.width
// => 25

offsetWidth = 500
// => clientWidth + (scrollbar ? 17 : 0) + border.width * 2
// => content.width + padding.width * 2 + border.width * 2

offsetLeft = offsetParent.x - borderLeft.x
// => 100

scrollWidth = clientWidth
// => 433

box-sizing 应用场景

自适应布局，比如栅格布局，栅格之间有间距的话则需要使用 padding 值，但是栅格的总宽度不能被改变。

表单元素，表单元素经常需要设置固定宽度，但是表单元素默认有 padding 和 border 值。

个人看法

我个人更偏爱怪异盒模型，在 css 中设置宽度之后无需再顾虑 padding 和 border 带来的影响，难道只有我一个人觉得怪异盒模型才是合理的？不！著名的 Google 前端开发者 Paul 与我的偏好一样，他早在 2012 年就就写下这篇文章 * { Box-sizing: Border-box } FTW