[轻松一刻]2分钟快速理解CSS盒子模型

CSS盒模型是CSS的核心概念之一，它定义了元素如何绘制矩形盒子。

简单来说，盒子由4个部分组成：content、padding、border、margin
盒模型又分： 标准盒模型、怪异盒模型

标准盒模型（content-box）

元素的width和height仅作用于内容区域

元素总宽度 = 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

怪异盒子模型

这个模型主要出现在旧版本的IE浏览器中

width = 内容宽度 + padding-left + padding-right + border-left + border-right
height = 内容高度 + padding-top + padding-bottom + border-top + border-bottom
元素总宽度 = width + margin-left + margin-right
元素总高度 = height + margin-top + margin-bottom

box-sizing

box-sizing属性的作用则定义了元素的宽高如何计算。他有2个属性值，分别是content-box和border-box

content-box: (默认值)，标准盒模型。

width = 内容的宽度
height = 内容的高度

border-box: width 和 height包括内容区域，内边距和边框，但不包括外边距

width = border + padding + 内容的宽度
height = border + padding + 内容的高度

哦对了，我最近开发了一个叫牛马工作器的chrome拓展插件，很好玩哦，感兴趣的话，给我的公众号回复牛马即可免费获取。

我的微信公众号： 梨的前端小屋