css学习笔记（box-sizing盒子模型）

盒子模型

1. box-sizing：content-box;

默认值，宽度和高度指定内容区的大小。
css学习笔记（box-sizing盒子模型）

2. box-sizing: border-box;

盒子的宽度和高度包含了边框、内边距以及内容区域
css学习笔记（box-sizing盒子模型）

总结

相比较默认值content-box，css3的border-box在布局时的使用更简单。特别是采用flex布局时，为了页面的自适应，盒子的width一般采用 %的形式，但border、padding和margin还是用px，此时使用content-box时需要对盒子的width和height数值进行处理后（加上border和padding才是容器大小）才能满足需求，如果使用border-box则简单很多，因为容器宽高即为盒子的宽高。