content-box(默认)
box-sizing: content-box;
只算内容,表示padding
、border
、margin
不计算在设置的width
和height
中
即 盒模型宽度 = content
+ padding
+ border
+ margin
padding-box(不常用)
box-sizing: padding-box;
从padding
开始算,表示padding
计算在设置的width
和height
中
即 盒模型宽度 = content
+ border
+ margin
border-box(特殊盒模型、开发常用)
box-sizing: border-box;
表示padding
、border
计算在设置的width
和height
中
即 盒模型宽度 = content
+ margin
开发时常在根元素设置:box-sizing: border-box;
其余元素,设置box-sizing: inherit;
继承根部的