CSS盒子模型

设置内容	样式属性	常用属性值
上边框	border-top-style:样式;
	border-top-width:宽度;
	border-top-color:颜色;
	border-top:宽度样式颜色;
下边框	border-bottom-style:样式;
	border- bottom-width:宽度;
	border- bottom-color:颜色;
	border-bottom:宽度样式颜色;
左边框	border-left-style:样式;
	border-left-width:宽度;
	border-left-color:颜色;
	border-left:宽度样式颜色;
右边框	border-right-width:宽度;
	border-right-color:颜色;
	border-right:宽度样式颜色;
综合设置边框样式	border-style:上边 [右边下边左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
综合设置边框宽度	border-width:上边 [右边下边左边];	像素值
综合设置边框颜色	border-color:上边 [右边下边左边];	颜色英文单词、#十六进制颜色值、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框全部属性	border:四边宽度四边样式四边颜色;
圆角边框	border-radius:水平半径参数/垂直半径参数;	像素值或百分比
图片边框	border-images:图片路径裁切方式/边框宽度/边框扩展距离重复方式;

2.1 边框样式（border-style）

用于定义页面中边框的风格

border-style属性值：

none：没有边框即忽略所有边框的宽度（默认值）。
solid：边框为单实线。
dashed：边框为虚线。
dotted：边框为点线
double：边框为双实线

border-style综合属性：

border-style:solid ; /*四边均为实线*/
border-style:solid dotted ; /*上下实线、左右点线*/
border-style:solid dotted dashed; /*上实线、左右点线、下虚线*/

2.2 边框宽度（border-width）

用于设置边框的宽度

border-width属性值：

在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。

注意：常用取值单位为像素

border- width：上边框宽度 [右边框宽度下边框宽度左边框宽度];

border-width综合属性：

border-width:5px; /*四边宽度均为5像素*/
border-width:5px 3px ; /*上下边框5像素宽度、左右边框3像素宽度*/
border-width:5px 3px 4px; /*上边框5像素宽、左右边框3像素宽度、下边框4像素宽度*/

2.3 边框颜色（border-color）

用于设置边框的颜色。

border-color属性值：

颜色值，例：red、green
#十六进制色值，例：#ccc
rgb(r,g,b)，例：rgb(30,0,0)
rgb(r%,g%,b%)

实际工作中最常用十六进制色值

border-color:上边框颜色 [右边框颜色下边框颜色左边框颜色];
border-color:transparent; 边框显示透明色。

border-color综合属性：

border-color:#f00; /*四边均为红色*/
border-color:#f00 #00f ; /*上下红色、左右蓝色*/
border-color:#f00 #00f #0f0; /*上红色、左右蓝色、下绿色*/

注意：使用RGB模式设置颜色时，如果括号里面的数值为百分比，必须把“0”也加上百分号，写作“0%”

2.4 综合设置边框（border）

border:四边宽度样式颜色;

注意：宽度、样式、颜色顺序任意，不分先后

2.5 圆角边框（border-radius）

语法格式：border-radius:参数1/参数2

参数值可以是像素值或者百分比

2.6 图片边框（border-image）

语法格式：border-image:border-image-source border-image-slice/ border-image-width/ border-image-outset border-image-repeat;

属性	说明
border-image-source	指定图片的路径
border-image-slice	指定边框图像顶部、右侧、底部、左侧内偏移量。
border-image-width	指定边框宽度
border-image-outset	指定边框背景向盒子外部延伸的距离。
border-image-repeat	指定背景图片的平铺方式

3、边距属性

3.1 内边距

内边距指的是元素内容与边框之间的距离，也被称为内填充。在CSS中padding属性用于设置内边距，同边框属性border一样，padding属性也是复合属性。

Padding取值可为：Auto，不同单位的数值，百分比，不允许使用负值

padding-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding-left:左内边距;
padding:内边距 /*四个方向内边距均相同*/
padding:上下内边距左右内边距;
padding:上内边距左右内边距下内边距;
padding:上内边距 [右内边距下内边距左内边距];

注意：我们设置的内边距为百分比，都是相对于父元素宽度width的百分比，随父元素width的变化而变化，和高度height无关。

3.1 外边距

外边距指的是元素边框与相邻元素之间的距离。在CSS中margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法类似。

margin取值遵循值复制的原则。与padding取值不同外边距的属性值可以使用负数。

margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin-left:左外边距;
margin:外边距 /*四个方向外边距均相同*/
margin:上下外边距左右外边距;
margin:上外边距左右外边距下外边距;
margin:上外边距 [右外边距下外边距左外边距];

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

margin:0 auto /* 利用margin实现块元素水平居中*/
margin:5px auto /* 利用margin实现块元素水平居中，并且上下拉开5像素边距*/

3.3 内外边距清除

为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距，代码如下：

*{
	padding:0;         /*清除内边距*/
	margin:0;          /*清除外边距*/
}

4、阴影属性

使用CSS3中的box-shadow属性可以轻松实现阴影的添加。

box-shadow: h-shadow v-shadow blur spread color outset;

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

参数值	描述
h-shadow	表示水平阴影的位置，可以为负值（必选属性）。
v-shadow	表示垂直阴影的位置，可以为负值（必选属性）。
blur	阴影模糊半径（可选属性）。
spread	阴影扩展半径，不能为负值（可选属性）。
color	阴影颜色（可选属性）。
outset/ inset	默认为外阴影/内阴影（可选属性）。

box-shadow属性也可以改变阴影的投射方向以及添加多重阴影效果。

5、box-sizing属性

box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下:

box-sizing: content-box/border-box;

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

6、背景属性

6.1 设置背景颜色

在网页设计中，运用background-color属性可以设置背景颜色。

6.2 设置背景图像

网页中的背景图像使用background-image属性定义。

background-image:url(图像路径);

代码演示如下：

body{
    /*背景颜色 */
    background-color:#CCC;
    /*背景图片 */
    background-image:url(images/jianbian.jpg);
}

6.3 设置不透明度

通过引入rgba模式和opacity属性，可以设置图片的不透明度。

6.3.1 rgba模式

语法格式：rgba(r,g,b,alpha);

p{
    /*p元素指定透明度为0.5，颜色为红色的背景*/
    background-color:rgba(255,0,0,0.5);
}

6.3.2 opacity属性

语法格式：opacity：opacityValue;

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

6.4 设置背景图像平铺

在网页设计中，通过background-repeat属性来控制背景图像平铺。

平铺属性值	含义
repeat	沿水平和竖直两个方向平铺（默认值）
repeat-x	只沿水平方向平铺
repeat-y	只沿竖直方向平铺
no-repeat	不平铺（图像位于元素的左上角，只显示一次）

6.5 设置背景图像的位置

在CSS中background-position属性用于定义背景图像的位置。

位置属性取值	含义
单位数值	通过数值直接设置图像左上角在元素中的坐标，最常用的单位是像素。例如background-position:20px 20px;
预定义的关键字	水平方向值：left、center、right。
预定义的关键字	垂直方向值：top、center、bottom。
百分比	0% 0% ：图像左上角与元素的左上角对齐。
	50% 50%：图像50% 50%中心点与元素50% 50%的中心点对齐。
	20% 30%：图像20% 30%的点与元素20% 30%的点对齐。
	100% 100%：图像右下角与元素的右下角对齐，而不是图像充满元素。

6.6 设置背景图像固定

使用background-attachment属性可以将背景图像固定。

固定属性取值	含义
scroll	图像随页面元素一起滚动（默认值）。
fixed	图像固定在屏幕上，不随页面元素滚动。

6.7 设置背景图像大小

使用background-size属性可以轻松控制背景图像的大小。

语法格式：

background-size:属性值1 属性值2;

属性值	说明
像素值	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto；
百分比	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto；
cover	把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；
contain	把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域；

6.8 设置背景的显示区域

使用background-origin属性可以自行定义背景图像的相对位置。

语法格式：

background-origin:属性值;

取值	含义
padding-box	背景图像相对于内边距区域来定位。
border-box	背景图像相对于边框来定位。
content-box	背景图像相对于内容框来定位。

6.9 设置背景图像的裁剪区域

使用background-clip属性用于定义背景图像的裁剪区域

语法格式：

background-clip:属性值;

在语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同，具体解释如下。

取值	含义
border-box	默认值，从边框区域向外裁剪背景。
padding-box	从内边距区域向外裁剪背景。
content-box	从内容区域向外裁剪背景。

6.10 设置多重背景图像

在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。

例如：

background-image:url(images/caodi.png),url(images/taiyang.png);

6.11 背景复合属性

CSS中的背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。

例如：

background:
[background-color] 
[background-image] 
[background-repeat] 
[background-attachment] 
[background-position] 
[background-size] 
[background-clip] 
[background-origin];

6.12 使用背景图像属性定义列表样式

list-style是一个复合属性，用于控制列表项目符号的样式。在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。

7、渐变属性

7.1 线性渐变

运用CSS3中的 “background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果。

语法格式：

background-image:linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);
/*linear-gradient用于定义渐变方式为线性渐变，
括号内用于设定渐变角度和颜色值。*/

渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或关键词。
颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

7.2 径向渐变

径向渐变是网页中另一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。运用CSS3中的background-image属性可以实现径向渐变效果。

语法格式：

background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);
/*radial-gradient用于定义渐变的方式为径向渐变，
括号内的参数值用于设定渐变形状、圆心位置和颜色值*/

渐变形状用来定义径向渐变的形状，其取值即可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。
圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数值来定义径向渐变的中心位置。
“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

7.3 重复渐变

7.3.1 重复线性渐变

在CSS3中，通过“background-image:repeating-linear-gradient（参数值）;”样式可以实现重复线性渐变的效果。

语法格式：

background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);

7.3.2 重复径向渐变

在CSS3中，通过“background-image:repeating-radial-gradient（参数值）;”样式可以实现重复线性渐变的效果。

语法格式：

background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);