box-sizing 盒模型 ​

模型分类 ​

CSS 盒模型主要有两种：

• 标准盒模型（W3C制定） content-box：默认属性。width 只包含 content

• 怪异盒模型（IE 盒模型） border-box：width 包含 content、padding、border

问题 ​

1. 说说盒子模型有哪些？ ​

盒子模型（box-szing）分为两种：标准盒模型（content-box）和IE盒模型（border-box）；content-box 是浏览器的默认值，它只包含元素的宽高；border-box 包含元素的宽高以及 padding 与 border 值。

2. 项目中如何使用？ ​

我习惯在项目初期将所有元素的 box-sizing 设置为 border-box，这样方便计算元素的高度，如果是接收的项目，则根据项目文档或者查看项目是否有全局设置，但不建议在接手的项目中再去全局设置这个值，以免污染其它样式。