CSS盒子模型

认识盒子模型

 

所谓的 盒子模型 在HTML中就是一个 盛装 元素内容的 容器。

每个 盒子模型 都由元素的 内容、内边距 （padding）、 边框 （border）和 外边距 （margin）组成。

<div>标记 

Ø <div> 标记 是一个 块容器标记 。

Ø 可以将网页分割为独立的部分，以实现 网页的规划和布局 。

Ø 大多数 HTML 标记 都可以嵌套在 <div> 标记 中， <div> 中还可以 嵌套多层 <div> 。

Ø 可以 替代 大多数的 块级文本标记 。

盒子的宽与高

☞ 网页是由多个盒子排列而成

☞ 宽度和高度决定了盒子的大小

每个盒子都有固定的大小

 •盒子模型的总宽度与总高度

Ø 盒子的 总宽度 = width + 左右 内边距 之和 + 左右 边框 宽度之和 + 左右 外边距 之和

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

边框属性 

为了分割页面中不同的盒子，常常需要给元素设置边框效果。

设置内容	样式属性	常用属性值
边框样式	border-style:上边 [右边 下边 左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度	border-width:上边 [右边 下边 左边];	像素值
边框颜色	border-color:上边 [右边 下边 左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框	border:四边宽度 四边样式 四边颜色;
圆角边框	border-radius:水平半径参数/垂直半径参数;	像素值或百分比

 边框样式（border-style）属性值

none：没有边框

solid：边框为单实线

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

border-style综合属性

border-style:solid ; /*四边均为实线*/

border-style:solid dotted ;  /*上下实线、左右点线*/

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

CSS边框属性

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

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

border-width综合属性

border-width:5px; /*四边宽度均为5像素*/

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

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

CSS3在原边框颜色属性（border-color）的基础上派生了4个边框颜色属性。

border-top-colors

border-right-colors

border-bottom-colors

border-left-colors

border:宽度,样式,颜色

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

border-radius:参数1/参数2

圆角边框（border-radius）

注意：内边距padding不允许使用负值

padding:5px  /*四个方向内边距为5像素宽度*/

padding:5px 3px  /*上下内边距为5像素，左右内边距为3像素*/

padding:5px 3px 4px  /*上内边距为5像素，左右内边距为3像素，下内边距为4像素*/

margin-top:上外边距;

margin-right:右外边距;

margin-bottom:下外边距;

margin-left:左外边距;

margin:四边外边距;

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

margin:0 auto  /* 利用margin实现块元素水平居中*/

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

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

*{

  padding:0;         /*清除内边距*/

  margin:0;          /*清除外边距*/

}

CSS3中的box-shadow属性可以轻松实现阴影的添加，其基本语法格式如下：

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

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

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

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

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

Ø border-box ：当定义 width 和 height 时， border 和 padding 的参数值被包含在 width 和 height 之内。

在CSS中，网页元素的背景颜色使用background-color属性来设置

在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现。

body

{

background-color:#CCC;

background-image:url(images/jianbian.jpg);

}  

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

rgba(r,g,b,alpha);

使用RGBA模式为p元素指定透明度为0.5，颜色为红色的背景。

p{background-color:rgba(255,0,0,0.5);}

opacity：opacityValue;

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

设置背景图像平铺

 默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。

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

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%：图像右下角与元素的右下角对齐，而不是图像充满元素。

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

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

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

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

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

background:

[background-color]

[background-image]

[background-repeat]

[background-position]

[background-size]

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

 在CSS3之前如果需要添加渐变效果，通常要设置背景图像来实现。而CSS3中增加了渐变属性，通过渐变属性可以轻松实现渐变效果。

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

linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。

•渐变角度    •渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的 角度数值或 关键词。

•颜色值     •颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

径向渐变是网页中另一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient（参数值）;”样式可以实现径向渐变效果

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

radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。

•渐变形状  •渐变形状用来定义径向渐变的形状，其取值即可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。

• 圆心位置  •圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数值来定义径向渐变的中心位置。

• 颜色值  •“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

值n);