网页设计 9.11知识点---盒子模型

理解盒子模型

盒子模型的相关属性就是我们前面提到边框、边距、背景、宽高等

边框属性
见下图

在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。
注意：常用取值单位为像素。

注意：内边距padding不允许使用负值
外边距margin 可以使用负值

外边距属性
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。

背景属性
1、设置背景颜色
颜色值，例：red、yellow
#十六进制色值，例：#ccc
rgb(r,g,b)，例：rgb(30,0,0)

2、设置背景图像
body
{
background-color:#CCC;
background-image:url(images/jianbian.jpg);//注意相对路径和绝对路径的写法区别
}
3、设置背景图像平铺

4、设置背景图像的位置

5、设置背景图像的固定、

6、综合设置元素的背景

注意背景颜色和背景图片同时插入时，执行的先后顺序

盒子的宽与高

盒子模型的总宽度与总高度
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

CSS3中添加了一些新的盒子模型属性，如颜色透明、圆角、阴影、渐变等。

颜色透明度
通过引入RGBA模式和opacity属性，对背景与图片设置不透明度
rgba(r,g,b,alpha);
p{background-color:rgba(255,0,0,0.5);}

opacity：opacityValue;
opacity属性用于定义标签的不透明度，参数opacityValue表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。

圆角

运用CSS3中的border-radius属性可以将矩形边框四角圆角化，
border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

注意
如果“垂直半径参数”省略，则会默认等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等。

图片边框
运用CSS3中的border-image属性可以轻松实现这个效果。

相关属性解析

阴影
在网页制作中，经常需要对盒子添加阴影效果。使用CSS3中的box-shadow属性可以轻松实现阴影的添加。