CSS盒子_box-sizing - 指南

简介

用于控制盒模型的类型，有content-box、border-box两种属性，两种属性对应了盒模型两种不同的类型，content-box叫怪异盒模型、边框盒模型、低版本IE盒模型；border-box叫普通盒模型、传统盒模型。

box-sizing

content-box

content-box是box-sizing的一种属性，当box-sizing为该属性时，盒模型的width只会作用在内容区域上，padding、以及border会将元素的大小进一步变大，margin不会对盒模型的大小产生影响。

盒子名{
box-sizing:content-box;
}

border-box

border-box是box-sizing的一种属性，当box-sizing为该属性时，盒模型的大小会将以设定width、height为准，如设定了padding、border，会对内容区域进行挤压，margin不会对盒模型大小产生影响。

盒子名{
box-sizing:border-box;
}