CSS盒模型

盒模型

.box {

width: 200px;

height: 200px;

border: 2px solid red;

}

通常设置的width、height，仅仅指内容区域，不包含border、padding在内。但是，可以通过设置 box-sizing属性，指定盒模型区域，box-sizing有两个值：content-box和border-box。默认情况下不设置时当前盒模型box-sizing值为content-box，设置盒模型的宽高为内容宽高。

当手动设置box-sizing值为boxder-box时，当前盒模型的宽高表示内容宽高+padding值+border 所得到的整体宽高。

如下box所有宽高相同，不同是左侧设置了box-sizing: border-box.

可以看出区别，左侧设置的宽度200px = 内容宽度(186px) + padding (5px * 2)+border；

右侧没有设置box-sizing,默认为content-box，所设置的宽度仅仅为内容的宽高200px。