HTML555--盒子模型

边框属性

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

border-style综合属性(边框样式的写法会按照上右下左的顺时针顺序排列)

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

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

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

边框宽度（border-width）属性值

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

边框颜色（border-color）属性值(边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，列如只包含图片的表格，其默认边框颜色为父元素的文本颜色)

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

border-top-colors  border-left-colors  border-bottom-colors   border-right-colors

综合设置边框

如：border-top:上边框宽度 样式 颜色 

border-right：右边框宽度 样式 颜色 （其余如上）

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

内边距属性(padding)

外边距属性(margin)

注意：当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局
为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距

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

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

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

背景属性

背景颜色属性：background-color

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

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

背景图像固定：background-attachment图像固定属性

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

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

background:背景色 url("图像") 平铺 定位 固定;

background: url(img/wdjl.jpg) no-repeat 50px 80px fixed;

盒子的宽和高

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

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

颜色透明度

RGBA模式对背景颜色进行设置rgba(r,g,b,alpha);alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的数字

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

或p{background-color:rgba(100%,0%,0%,0.5);}

opacity属性opacity：opacityValue;

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

圆角

border-radius属性可以将矩形边框四角圆角化，实现圆角效果

border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

当应用值复制原则设置圆角边框时，如果“垂直半径参数”省略，则会默认等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等

图片边框(使用图片作为元素的边框运用CSS3中的border-image属性)

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

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

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

h-shadow:表示水平阴影的位置，可以为负值(必选属性)

v-shadow表示垂直阴影的位置，可以为负值(必选属性)

blur阴影模糊半径(可选属性)

spread阴影扩散半径，不能为负值(可选属性)

color阴影颜色(可选属性)

outset/inset外阴影，内阴影，默认为外阴影(可选属性)

渐变

线性渐变

在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的 “background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果

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

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

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

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

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

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

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

重复线性渐变

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

重复径向渐变

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

多背景图片

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

设置背景图像的大小(background-size属性)

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

设置背景图像显示区域

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

在上面的语法格式中，background-origin属性有三种取值，分别表示不同的含义

具体解释如下：padding-box：背景图像相对于内边距区域来定位

 border-box：背景图像相对于边框来定位

 content-box：背景图像相对于内容框来定位。

设置背景图像的裁剪区域

在CSS样式中，background-clip属性用于定义背景图像的裁剪区域

在语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同

具体解释如下： border-box：默认值，从边框区域向外裁剪背景

 padding-box：从内边距区域向外裁剪背景

 content-box：从内容区域向外裁剪背景。

元素的类型

块元素：在页面中以区域块的形式出现

 每个块元素通常都会独自占据一整行或多整行

 可以对其设置宽度、高度、对齐等属性。

行内元素：在页面中以区域块的形式出现。

每个块元素通常都会独自占据一整行或多整行

 可以对其设置宽度、高度、对齐等属性。

div标签

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

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

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

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

span标签

<span>标记是一个行内标记

<span>与</span>之间只能包含文本和各种行内标记

 <span>标记常用于定义网页中某些特殊显示的文本，配合class属性使用

当其他行内标记都不合适时，就可以使用<span>标记

元素类型的转换(display)

inline：此元素将显示为行内元素（行内元素默认的display属性值）

block:此元素将显示为块元素（块元素默认的display属性值）

inline-block:此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行

none:此元素将被隐藏，不显示，也不占用页面空间

相邻块元素垂直外边距的合并

相邻块元素之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。 

嵌套元素垂直外边距的合并对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.one{
			/*设置唱片*/
		
			width: 600px;
			height: 550px;
			border:5px soild #ccc;
			padding:40px;
			padding-top: 50px;
			margin: 0 auto;
			border-radius: 50%;
			background-image:repeating-radial-gradient(circle at 50% 50%,#333,#000 1%);
			box-shadow: 5px 5px 10px 10px lightblue ;
		}
		.two{
			/* 设置盒子样式 */
			width: 372px;
			height: 485px;
			border:0.5rem soild black;
			border-radius: 30px;
			padding-top: 40px;
			background: white;
			margin: 0 auto;			
		}
		.three{
			/*设置歌曲排名*/
			padding-top: 5px;
			text-align: center;
			width: 372px;
			height: 30px;
			background: gray;	
		}		
		.four{
			text-align: center;
			border-radius: 0px 0px 30px 30px/0px 0px 30px 30px;
			width: 372px;
			height: 40px;
			background: gray;
			margin-bottom: 5px;
		}
		</style> 
	</head>
	<body>
	<div class="one" >
		<div class="two">
			
			<p align="center">
			<img  src="erji.jpg">
			<img src="yinyue.jpg">
			</p>
			
			<p class="three">第一首</p>
			<p  class="three">第二首</p>
			<p  class="three">第三首</p>
			<p  class="three">第四首</p>			
			<p class="four">第五首</p>
		</div>		
	</div>
	</body>
</html>

实现效果