CSS盒子模型相关属性（二）

边距属性

内边距

在网页设计中，为了调整内容在盒子中的显示位置，常常需要给元素设置内边距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充。在CSS中 padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置方法如下：

• padding-top：上内边距；
• padding-right：右内边距：
• padding-bottom：下内边距：
• padding-left：左内边距：
• padding：上内边距【右内边距 下内边距 左内边距】

在上面的设置中， padding相关属性的取值可为auto自动（默认值）、不同单位的数值、相对于父元素（或浏览器）宽度的百分比(%),实际工作中最常用的是像素值(Px),不允许使用负值。同边框相关属性一样，使用复合属性 padding定义内边距时，必须按顺时针顺序采用值复
制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。

外边距

网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距，所谓外边距指的是元素边框与相邻元素之间的距离。在CSS中 margin属性用于设置外边距，它是一个复合属性，与内边距 padding的用法类似，设置外边距的方法
如下。

• margin-top:上外边距；
• margin- right右外边距；
• margin- bottom:下外边距
• margin-lefc左外边距；
• margin:上外边距[右外边距下外边距左外边距]。

margin相关属性的值，以及复合属性 margin取1~4个值的情况与 padding相同。但是外边距可以使用负值，使相邻元素重叠。

当对块级元素应用宽度属性 width,并将左石的外边距都设居中，实际工作中常用这种方式进行网页布局，示例代码如下。

.header{width:960px;margin:0 auto;}

 box-shadow属性

在网页制作中，经常需要对盒子添加阴影效果。CSS3中的box-shadow属性可以轻松实现阴影的添加，其基本语法如下。

box-shadow：像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型；

 在上面的语法格式中，box-shadow属性共包含6个参数值，对它们的具体解释如下表所示。

参数值	说明
像素值1	表示元素水平阴影位置，可以为负值（必选属性）
像素值2	表示元素垂直阴影位置，可以为负值（必选属性）
像素值3	阴影模糊半径（可选属性）
像素值4	阴影扩展半径，不能为负值（可选属性）
颜色值	阴影颜色（可选属性）
阴影类型	内阴影(inset)/外阴影（默认）（可选属性）

 

 

 

 

 

 

 

 

表中列举了box- shadow属性参数值，其中“像素值1”和“像素值2”为必选参数值不可以省略，其余为可选参数值。不设置“阴影类型”参数时默认为“外阴影”，设置“inset“参数值后，阴影类型变为内阴影。

box-sizing

当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改widh属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CS3的 box-sizing 属性可以轻松解决这个问题。box- sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。

box-sizing: content-box/border-box；

在上面的语法格式中，box- sizing属性的取值可以为 content-box或 border-box,对它们的解释如下

• content-box：浏览器对盒模型的解释遵从W3C标准，当定义 width和 height时，它的参数值不包括 border和 padding。
• border-box：当定义width和heigth时，border和padding的参数值被包含在width和heigth之内。