盒子模型

盒子模型

标准盒模型 box-sizing: content-box;

怪异盒模型 box-sizing: border-box;

标准盒模型：元素style的width等于**内容区域**的宽度

怪异盒模型：元素style的width等于**内容区域+padding+border**的宽度

flex弹性盒模型

column多列布局

答：其实我们常用的是标准盒模型，它的width是指的内容宽度，盒子的宽高是内容+padding+border，但是我在做项目的是时候给盒子加border就会让盒子变大要重新计算布局很麻烦，css3提供的 box-sizing: border-box; 可将标准盒模型转换成怪异盒模型，这样给盒子设置的width就是盒子本身的宽度了，现在我的大部分项目都是使用怪异盒模型，包括我看了bootsrop 和各大UI组件 element-UI 他们的源码里面，公共样式大多都是使用怪异盒模型，我认为这是我们开发中的一种规范和方式。