CSS盒子模型

CSS盒子模型
首先css盒模型有标椎盒模型和怪异盒模型。
1.两者盒模型都有内容、填充区、边框以及外边距构成。如图所示：

2.一个500*40的盒子，设置了padding、border、margin值，
标椎的盒模型如图：

3.怪异盒模型：

1.通过以上对比，很明显能看出标椎盒模型实际大小是：本身的宽高再加上padding、border、margin值；而怪异盒模型,在设置padding和border时，它的宽高相应的都减少了，故怪异盒模型的实际大小是它的宽高加上margin值。
2.标椎盒模型和怪异盒模型，通过box-sizing属性来控制，
当属性值是border-box时，此时是怪异盒子；
当属性值是content-box时，此时是标椎盒子。

1.通过以上对比，很明显能看出标椎盒模型实际大小是：本身的宽高再加上padding、border、margin值；而怪异盒模型,在设置padding和border时，它的宽高相应的都减少了，故怪异盒模型的实际大小是它的宽高加上margin值。

2.标椎盒模型和怪异盒模型，通过box-sizing属性来控制，
当属性值是border-box时，此时是怪异盒子；
当属性值是content-box时，此时是标椎盒子。