Css3盒模型

Css3盒模型

1. 标准盒子模型

box-sizing: content-box;

平常最常用的就是标准盒模型，即box-sizing中的content-box，它指的width和height是内容的width和height。

2. IE盒子模型//怪异盒子模型

box-sizing: border-box;

它指的width和height是盒子大小，并不是内容的width和height，写高100宽100最终盒子就是高100宽100，无论怎样调border和padding，它会自己通过缩放内容来实现，这样好处在于写样式的时候，不用每次来回算值，现在在真实项目中大部分在应用IE盒模型，包括现在的elementui中样式也是默认使用border-box。