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。

• box-shadow 盒阴影： 阴影只是修饰，并不占用空间

模糊半径：设置内容模糊的范围，值越大边框模糊的范围也越大，

阴影大小：设置额外加大模糊的范围，值越大模糊范围也越大，也可以设置负数

颜色：模糊颜色，如果不设置将取字体颜色

• outline : 盒边框，修饰，不占用空间

CSS盒模型

标签：

原文地址：http://www.cnblogs.com/hu-liang/p/5095434.html