HTML5+CSS3——【笔记】3、盒子模型

heart000_1
已于 2022-11-28 13:16:20 修改
阅读量591
点赞数 1
分类专栏：笔记 # HTML 文章标签： css css3 html
于 2022-07-01 17:22:21 首次发布
heart000_1
本文链接：https://blog.csdn.net/weixin_53920044/article/details/125562621
版权
笔记同时被 2 个专栏收录
35 篇文章 2 订阅
订阅专栏
HTML
4 篇文章 0 订阅
订阅专栏
效果:
(https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/3、盒子模型.html)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3、盒子模型</title>
	</head>
	<body>
		
盒子模型具有内边距、边框、外边距、宽和高这些基本属性,
但不要求每个元素都设置这些属性.

一、盒子模型的相关属性

  1.边框属性
	包括边框样式border-style、边框宽度border-width、边框颜色属性border-color。
	
	(1)边框样式border-style
	
		
		格式:
		border-上/右/左/下-style:属性值
<!-- 		
		常用属性值:
		none:(默认值)没有边框
		solid:边框为单实线
		dashed:边框为虚线
		dotted:边框为点线
		double:边框为双实线
		
		其中上右下左分别为:top、right、bottom、left
		属性值可用空格隔开连续写四个分别代表上右下左,减少冗余度。
		不设置时，下边框默认和上边框一致，左边框默认和右边框一致。
		
		
		eg:
		boder-top-style:solid /*上边框样式为solid*/
		boder-style:none none solid solid /*上、右、下、左边框的样式*/
		 -->
		
		eg:
		<style type="text/css">
		h1{border-style:double}
		.one{
			border-top-style:dotted;
			border-bottom-style:dotted;			
			border-left-style:solid;
			border-right-style:solid;
		}
		.two{
			border-style:solid dotted dashed;
		}
		</style>
		<body>
		<h1>边框样式-双实线</h1>
		<p class="one">边框样式-上下单线、左右单实线one</p>
		<p class="two">边框样式-上单实线、左右点线、下虚线two</p>
		</body>
		
	(2)边框宽度border-width
<!-- 		
		格式:
		border-上下左右边框-width:宽度;和border-style基本一致
		 -->
		eg：
		<head>
		<style type="text/css">
		p{	
			border-style:solid;
			border-width:1px;/*综合设置*/
			border-top-width:3px;/*对上边框宽度设置进行覆盖*/
			/*等价于border-width:3px 1px 1px;;*/
		}
		</style>
		</head>
		<body>
		<p>边框宽度上3px、下左右1px,样式为单实线</p>
		</body>
		
	(3)边框颜色border-color
	
		<!-- 
		格式:
		border-上下左右边框-color:颜色;和border-style基本一致
		
		颜色属性:英文单词、16进制颜色值(最常用)、RGB模式
			  如:red、#FF0000、rgb(r,g,b)
		 -->	  
		eg:
		<style type="text/css">
		.one1{
			border-style:solid;
			border-width:3px;
			border-color:blue yellow red;
		}
		</style>
		<p class="one1">综合设置样式、设置了三种颜色的one1边框</p>
		
	(4)边框属性综合设置
		<!-- 
		border-style、border-width、border-color一起设置
		减少代码冗余度
		
		格式:
		border-:边框宽度 样式 颜色;		/*综合四个边框设置*/
		border-上下左右边框:(上/下/左/右)边框宽度 样式 颜色; /*分边框设置*/
		如：p{border-top:2px solid #ccc;}
		 -->
		
		eg:
		<style type="text/css">
		.one2{
			border-top:2px solid #ccc;
		}
		</style>
		<body>
		<p class="one2">边框属性综合设置的one2盒子</p>
		</body>
		
	
  
  2.内边距属性padding
	<!-- 
	盒子与盒子内容之间的距离
	
	格式:
	padding:属性; /*内边距综合设置*/
	padding-上下左右边距:属性;
	
	可用属性:
	auto:自动(即默认值)、
	不同单位的数值、
	最常用单位为像素值px
	 -->
	
	eg:
	<style type="text/css">
	.one3{border:5px solid #ccc;} /*设置图像和段落边框*/
	img{		/*设置图像内边距*/
		padding:10px;
		padding-bottom:0;
	}
	</style>
	<body>
	<img/ class="one3" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" title="小猴紫" alt="图片找不到">
	<p class="one3">段落one3</p>
	</body>
	
  3.外边距属性margin
	<!-- 
	盒子与盒子之间的距离
	格式设置跟内边距基本一致
	
	格式:
	margin:属性; /*内边距综合设置*/
	margin-上下左右边距:属性;
	如: .one{margin:0 auto;}
	
	可用属性:
	auto:自动(即默认值)、
	不同单位的数值、
	最常用单位为像素值px
	
	*属性可使用负值,使相邻标签发生重叠。
	 -->
	eg:
	<style type="text/css">
	img{		/*设置图像内边距*/
		border:5px solid green;
		float:left;		/*设置图片左浮动*/
		margin-right: 50px;	/*图片右外边距*/
		margin-left: 30px;	/*图片左外边距*/
	}
	.one4{text-indent:2em;}  /*文本首
	行缩进2字符*/
	</style>
	<body>
	<img  src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" title="heart" alt="图片找不到">
	<p class="one4">段落one4,</p>
	</body>


  4.背景属性
	<!-- 
	(1)设置背景颜色background-color
	
	格式:
	{background-color:属性}
	
	属性:
	属性值与文本颜色取值一样
	可使用预定义颜色值、十六进制#RRGGBB、RBG代码rgb(r,g,b)
	background-color默认值为transparent,即透明。此时子元素会显示父元素的背景。
	 -->
	eg:
	<head>
	<style type="text/css">
	body{background-color:#CCC;}  /*设置标题二背景颜色,当标签为body时，
									即为设置网页背景颜色*/	
									
	.one5{		/*设置段落一背景颜色*/
		font-family:"微软雅黑";
		color:#FFF;
		background-color:#36C;
	}
	</style>
	</head>
	<body>
	<h2 class="one5">标题one5</h2>
	<p >段落一文字</p>	/*未设置背景颜色的文本段落继承显示了父元素body的背景颜色*/
	</body>
	
	
	(2)设置背景图像background-image
	<!-- 
	格式:
	{background-image:url();}
	 -->
	eg:
	<head>
	<style type="text/css">
	.one6{
		border-width: 5px;	/*边框大小*/
		background-color:#CCC;
		background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw)}/*为标签one6设置背景图片*/	
			
	}
	</style>
	</head>
	<body>
	<p class="one6">段落one6,为其段落标签设置了背景。</br></br></br></br> </p>
	</body>
	
	
	(3)设置背景图像平铺:background-repeat
		<!-- 
		图像默认为水平或竖直方向平铺
		可通过background-repeat属性来控制.
		
		格式:(前提为设置了背景图片)
		
		{
			background-image:url(图片);
			background-repeat:属性;
		}
		
		
		background-repeat属性值:
		
		repeat:(默认值)沿水平和竖直两个方向平铺
		no-repeat:不平铺(图片位于元素左上角,只显示一次)
		repeat-x:只沿水平方向平铺
		repeat-y:只沿竖直方向平铺
		 -->
		
		eg:
		<head>
		<style type="text/css">
		.one7{
			background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
			background-repeat:repeat;
		}
		.one8{
			background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
			background-repeat:no-repeat;
		}
		.one9{
			background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
			background-repeat:repeat-x;
		}
		.one10{
			background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
			background-repeat:repeat-y;
		}
		</style>
		</head>
		<body>
	  <p class="one7">段落one7 </br></br></br></br></br></br></br></br> </p>
	  <p class="one8">段落one8 </br></br></br></br></br></br></br></br> </p>
	  <p class="one9">段落one9 </br></br></br></br></br></br></br></br> </p>
	  <p class="one10">段落one10</br></br></br></br></br></br></br></br> </p>
		</body>
		
		
	(4)设置背景图像的位置:background-position
	<!-- 
		希望背景图像出现在其他位置,如右下角等。
		
		格式:
		
		{
		background-position:属性值1(水平坐标) 属性值2(垂直坐标); /*通常设置两个*/
		}
		
		属性值:
		默认值: 0 0 或 top left。即位于左上角
		1.使用不同单位数值。最常用px 如 20px 20px
		2.使用预定义关键字:指定图片在元素中对齐方式
		水平方向值:left、center、right
		垂直方向值:top、center、bottom
		如 center top;
		两关键字不分顺序,若只写一个,另一个默认为center
		
		3.使用百分比:按背景图像和元素的指定点对齐
		 
		 如
		 0% 0% 		表示图像左上角与元素左上角对齐
		 20% 30%	表示图像20% 30%与元素的20% 30点对齐
		 -->
		eg:
		<head>
		<style type="text/css">
		.two1{
			background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
			background-repeat:no-repeat;	/*设置图像不平铺*/
			background-position:50px 50px;	/*用像素值px控制图像位置*/
		}
		.two2{
			background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
			background-repeat:no-repeat;	/*设置图像不平铺*/
			background-position:right top;	/*用像预定义关键字控制图像位置*/
		}
		.two3{
			background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
			background-repeat:no-repeat;	/*设置图像不平铺*/
			background-position:100% 50%;	/*用百分比%控制图像位置*/
		}
		</style>
		</head>
		<body>
		<p class="two1">段落two1 </br></br></br></br></br></br></br></br> </p>
		<p class="two2">段落two2 </br></br></br></br></br></br></br></br> </p>
		<p class="two3">段落two3 </br></br></br></br></br></br></br></br> </p>
		</body>
		
		
	(5)设置背景图像固定:background-attachment
	<!-- 
		内容较多时,图像是否随页面滚动而跟随消失
		
		格式:
		{
		background-attachment:属性值;
		}
		
		属性值:
		两个,跟随/不跟随
		scroll:(默认值)图像跟随页面滚动
		fixed:图像固定在屏幕一位置上,不跟随页面滚动而消失
	-->
		eg:
		<head>
		<style type="text/css">
		.two2{
			background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
			background-repeat:no-repeat;	/*设置图像不平铺*/
			background-position:50% 50%;	/*用百分比控制图像位置*/
			background-attachment:fixed;
		}
		</style>
		</head>
		<body>
		<p class="two2">段落two2 </br></br></br></br></br></br></br></br> </p>
		</body>
		
		
	(5)综合设置元素背景:background
	<!-- 	
		语法格式:
		background:背景色 url("图像") 平铺 定位 固定;
		/*属性一般按照此顺序，但不规定顺序*/
	  如background: url(he.png) no-repeat 50px 50px fixed;
	  -->
	  eg:
	  <head>
	  <style type="text/css">
	  .two3{
	  	background:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw) no-repeat 50px 50px scroll;
	  }
	  </style>
	  </head>
	  <body>
	  <p class="two3">段落two3</br></br></br></br></br></br></br></br> </p>
	  </body>
	
  5.盒子的宽和高:width;height
	<!-- 
	 即盒子大小
	 
	 格式:
	 {
		 width:属性值;
		 heigth:属性值;
	 }
	 
	 属性值:
	 可以为不同单位数值;或相对于父元素的百分比,
	 最常用为像素值px
	 -->
	 eg:
	 <head>
	 <style type="text/css">
	 .two4{
		width:1000px;
		heigth:20px;
	 }
	 </style>
	 </head>
	 <body>
	 <p class="two4">盒子two4 </br></br></br></br></br></br></br></br> </p>
	 </body>
	 
	
	 

二、CSS3的新增盒子模型属性
	<!-- 
  1.颜色透明度:rgba、opacity
  
	css3之前设置的十六进制(如#F00)、rgb模式颜色或指定英文名称这些
	设置颜色的方法都无法改变颜色的不透明度。即会被覆盖
	css3中新增了两种设置颜色不透明度的方法,
	
	(1)rgba模式
	
		为rgb颜色模式的延伸
	
		语法格式:
		{background-color:rgba(r,g,b,alpha);}
		
	  如{background-color:rgba(255,0,0,0.5);}
		{background-color:rgba(100%,0%,0%,0.5);}
		
		r,g,b为颜色色值或百分比,
		alpha参数为介于0.0(透明)和1.0(完全不透民度)之间的数字。
			
	(2)opacity属性
		
		范围比rgba要大得多,能应用于任何元素
		
		语法格式:
		opacity:参数;
		
		参数:
		参数表示不透明的值,介于0(完全透明)~1(完全不透明)之间的浮点数值,
	 -->
		eg:
		<head>
		<style type="text/css">
		.two5{
			background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
			opacity:0.5;
			
		}
		.two6{
			background-color:rgba(255,0,0,1);
		}
		.two7{
			background-color:rgba(255,0,0,0.4);
		}
		</style>
		</head>
		<body>
		<p class="two5">不透明度为0.5的段落two5 </br></br></br></br></br></br></br></p>
		<p class="two6">不透明度为1的段落two6,与two7对比</br></br></br></p>
		<p class="two7">不透明度为0.4的段落two7,与two6对比</br></br></br></p>
		
		</body>
  
  
  2.圆角:border-radius
    <!-- 
	将矩形边框四角圆角化,如网页中一些按钮、头像图片等.
	
	语法格式:
	border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂
				  直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4  
				  
	复制特性:
	参数1、2、3、4分别为左上角、右上角、右下角、左下角设置(顺时针);
	当左只写参数1,代表四个参数相等,只写参数1、2代表右下角与左上角相等(对角复制);
	当只写水平半径参数时,垂直半径参数默认等于水平半径参数。
	
	参数值:
	为px(像素值)或%(百分比)
	 -->
	eg:
	<head>
	<style type="text/css">
	.two8{
		background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
		width: 300px;
		height: 300px;
		border-radius:50px 20px/30px 60px;
	}
	.two9{
		background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
		width: 300px;
		height: 300px;
		border-radius:50%;
	}
	</style>
	</head>
	<body>
	<p class="two8">段落two8</br></br></br></br></br></br></br></br> </p>
	<p class="two9">段落two9</br></br></br></br></br></br></br></br> </p>
	</body>
	 
	 
	
  3.图片边框:border-image
  
	将图片作为元素的边框。
	<!-- 
	border-image是一个复合属性,内部包含
	border-image-source、border-image-slice、border-image-width、
	border-image-outset、border-image-repeat等属性。
	
	语法格式:
	border-image:border-image-source/ border-image-slice/ bo
	rder-image-width/ border-image-outset/ border-image-repeat

	属性:
	border-image-source:指定图片路径
	border-image-slice:指定图片顶部、右侧、底部、左侧向内偏移量(图片裁切位置)
	border-image-width:指定边框宽度
	border-image-outset:指定边框背景向盒子外部延伸的距离
	border-image-repeat:指定背景的平铺方式
	 -->
	eg:
	<head>
	<style type="text/css">
	.two10{
		width:362px;
		height:362px;
		border-image-source:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);/*设置图片路径*/
		border-image-slice:33%;/*设置图像顶部、右侧、底部、左侧向内偏移量*/
		border-image-width:40px;/*指定边框宽度*/
		border-image-outset:0;/*设置边框图像区域超出边框量*/
		border-image-repeat:repeat;/*设置图片平铺方式*/
	}
	</style>
	</head>
	<body>
	<p class="two10">段落two10</br></br></br></br></br></br> </p>
	</body>		
	
  4.阴影:box-shadow
  
	对盒子添加阴影效果
	<!-- 
	语法格式:
	box-shadow:h-shadow v-shadow blur spread color outset;
	
	其中的6个参数值含义分别为:
	h-shadow:水平阴影位置,可为负值(必选属性)
	v-shadow:垂直阴影位置,可为负值(必选属性)
	blur:阴影模糊半径(可选属性)
	spread:阴影扩充半径,不能为负值(可选属性)
	color:阴影颜色(可选属性)
	outset/inset:外阴影(默认)/外阴影(可选属性)
	-->
	eg:
	<head>
	<style type="text/css">
	.three1{
		padding:10px;/*内边距*/
		border:1px solid #666;
		box-shadow:20px 10px 10px 2px #999 inset;
		background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
	}
	</style>
	</head>
	<body>
	<p class="three1">段落three1 </br></br></br></br></br></br></br></br> </p>
	</body>
	
	<!-- 
	*使用内阴影isnet需配合内边距属性padding,让图像和阴影间拉开一定距离,以免
	 图片将内阴影遮挡。
	*可以添加多重阴影效果，即box-shadow:h-shadow v-shadow blur spread color
	 outset;box-shadow:h-shadow v-shadow blur spread color outset;
	 -->
	
  5.渐变
  <!-- 
	主要包括线性渐变、径向渐变和重复渐变。
	
	1.线性渐变
	
		起始颜色沿着一条直线按顺序过渡到结束颜色
		
		语法格式:
		background-image:linear-gradient(渐变角度,颜色值1,颜色值2,..颜色值n)
	  如background-image:linear-gradient(30deg,#0f0,#00F);
	
	参数:
	渐变角度:指水平线和渐变线间的夹角,可以deg为单位的角度数值,或
			以to加left、right、top、bottom等关键词.
			如  0deg等价于to top
	颜色值:
	

	2.径向渐变
	 -->
		
	
  6.多背景图像
  7.修剪背景图像
  
三、元素的类型和转换
<!-- 
  1.元素的类型：块元素、行内元素
  
	(1)块元素
	
	特点：每个块元素通常独自占一行或多行，可对其设置宽度、高度、对齐等属性；
		常用于网页布局和网页的搭建。
		
	常见块元素:<xmp>|<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>|</xmp>等
			  其中<div>为最典型。
			  
	(2)行内元素
	
	特点:不会独占一行，不强迫其他标签在新的一行显示;通常一个行内标签可与其他行
		内标签显示在同一行;即靠自身的文本大小和图像尺寸来支撑结构;一般不可设置
		宽度、高度、对齐等属性;常用于控制页面中文本样式。
		
	常见行内元素有:<xmp>|<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、
				<a>、<span> |</xmp>等；
				  其中<span>为最典型。
	
	*行内元素有几个特殊的标签,如<img/>和<input/>,可对他们设置宽、高、对齐属性.
	又被称作行内块元素
	
	 -->
	
	eg:
	<style type="text/css">
	.three2{/*定义标签h2文本的背景颜色、宽、高度、对齐方式*/
		background-color: #39F;
		width:350px;
		height:50px;	
		text-align: center;
		}
	.three3{background:#060;}
	strong{/*定义strong标签的背景颜色、宽、高度、文本对齐方式*/
		background:#66F;
		width:360px;
		height: 50px;
		text-align: center;
	}
	em{background:#FF0;}
	del{background:#FF0000;}
	</style>
	</head>
	<body>
	<h1 class="three2">标签three2定义的文本</h1>
	<p class="three3">标签three3定义的文本</p>
	<p class="three4">
		标签three4定义的文本
		<strong>strong标签定义的文本</strong>
		<em>em标签定义的文本</em>
		<del>del标签定义的文本</del>
	</p>
	</body>
	
	由eg易看出,块元素<xmp><h1>、<p>等都会独占一行;而块元素<strong>、<em>、
	<del></xmp>等行内元素不会独占一行。
	
  2.<xmp><div>和<span>标签</xmp>
	<!-- 
	(1)<div>:典型的块元素,相对于大盒子，用于布局，独占一行
	
		div标签中,可设置外边距、内边距、宽和高,同时可容纳段落、标题、表格、图像等
		各种网页元素。
		通过id、class等属性结合设置CSS样式,可代替大多数块级文本标签。
	
	div标签用例	 
	-->
	
	eg:
	<style type="text/css">
	.three5{/*设置标签为three5的盒子模型宽、高、背景颜色、字体大小、字体加粗、文本对齐方式*/
		width:600px;
		height: 50px;
		background: aqua;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
	}
	.three6{/*设置标签为three6的盒子模型的宽、高、背景颜色、字体大小、首行缩进*/
		width:600px;
		height: 100px;
		background:lime;
		font-size:14px;
		text-indent: 2em;
	}
	</style>
	<body>
	<div class="three5">
		用div标签设置的标题文本three5
	</div>
	<div class="three6">
		div标签three6
		<p>div标签three6中嵌套的p标签文本内容,p标签为块元素会独占一行</p>
	</div>
	<p class="one2">边框属性综合设置的one2盒子</p>
	</body>
	
	(2)<span>
		<!-- 
		span为行内元素,只能包含文本和各种行内标签的容器;如加粗标签<strong>、
		倾斜标签<em>等，span标签中也可嵌套多层span标签
		常用于定义网页中某些特殊显示的文本,配合class属性使用。
		span标签其本身没有结构特征,只有在应用样式时才会产生变化,故当其他行内样式
		都不合适时可选择span标签。
		 -->
		 
		eg：
		<style type="text/css">
		#one11{ /*设置标签为one1的div文本通用格式*/
			font-family: "微软雅黑";
			font-size: 16px;
			color:black;
		}
		#one11 .main{/*控制第一个span中特殊文本*/
			color:#63F;
			font-size: 20px;
			padding-right: 20px;
		}
		#one11 .art{/*控制第二个span中特殊文本*/
			color:#F33;
			font-size: 18px;
		}
		</style>
		<body>
			<div id="one11">
				<span class="main">木偶戏</span>是中国一种古老民间艺
				术，<span class="art">是中国乡土艺术</span>
			</div>
		</body>
		
  3.元素类型的转换
  <!-- 
	目的:如希望行内元素具有块元素的某些特性，例如可设置宽高;
	     或块元素具行内元素的某些特性,如不单独占一行;
		 则可使用display属性对元素类型进行转换。
  
	display属性常用属性值:
	
	inline:此元素显示为行内元素(行内元素默认display值)
	block:此元素显示为块元素(块元素默认display值)
	inline-block:此元素将显示为行内块元素(即可对他们设置宽、高、对齐等属性,但
				 不会独占一行)
	none:此元素将被隐藏,不显示，也不占用页面空间,相对于该元素不存在.
	 -->
	eg:
	<style type="text/css">
	div,span{/*同时设置div、span的样式*/
		width:200px;
		height:50px;
		background: #FCC;
		margin:10px;/*宽、高、背景颜色、外边距*/
	}
	.d_one,.d_two{display:inline;}/*将标签为d_one、d_two的div(块元素)转换为行内
	元素*/
	.s_one{display: inline-block;}/*将标签为s_one的span(行内元素)转换为行内块元素*/
	.s_three{display: block;}/*将标签为.s_three的span(行内元素)转换为块元素*/
	
	</style>
	<body>
		<div class="d_one">标签为d_one的div中的文本</div>
		<div class="d_two">标签为d_two的div中的文本</div>
		<div class="d_three">标签为d_three的div中的文本</div>
		<span class="s_one">标签为s_one的span中的文本</span>
		<span class="s_two">标签为s_two的span中的文本</span>
		<span class="s_three">标签为s_three的span中的文本</span>
	</body>
	
	
四、块元素垂直外边距的合并
	<!-- 
	原因
	块元素特性:当两个相邻或嵌套的块元素相遇时，其外边距会自动合并发生重叠
	
  1.相邻块元素垂直外边距的合并
  
	当上下两个块元素相遇时,若上面的标签有下边距margin-bottom,下面的标签有上
	外边距margin-top,他们的垂直间距不是两者之和，而是其中较大者。
	 -->
	eg:
	<style type="text/css">
	.three7{
		width:150px;
		height:150px;
		background:#FC0;
		margin-bottom:20px;
	}
	.three8{
		width:150px;
		height:150px;
		background:#63F;
		margin-top:40px;
	}
	/*即两块元素垂直外边距不是20px+40px,而是40px(20被覆盖)*/
	</style>
	<body>
	<div class="three7">标签为three7的div</div>
	<div class="three8">标签为three8的div</div>
	</body>
  
  2.嵌套块元素垂直外边距的合并

	设置父标签与子标签的上外边框是否合并(即取最大者),或是各自独立
	
	eg:
	<style type="text/css">
	*{margin:0;padding:0;}/*使用通配符清除所有HTML标记的默认边距*/
	div.three9{
		width:200px;
		height:200px;
		background:#FC0;
		margin-top:20px;
	}
	div.three10{
		width:100px;
		height:100px;
		background:#63F;
		margin-top:40px;
	}/*块元素9、10与上一元素之间的上外边距以大的为准，即40px*/
	div.three11{
		width:200px;
		height:200px;
		background:#FC0;
		margin-top:40px;
		border-top:1px solid #FCC;/*在12的父标签11的div定义上边框，使子标签
		以其边框为参照决定上外边距，从而达到外边距不合并的效果*/
	}
	div.three12{
		width:100px;
		height:100px;
		background:#63F;
		margin-top:40px;
	}
	</style>
	<body>
	<div class="three9">
		
		<div class="three10">three11的div</div>
		three9的div
	</div>
	
	<div class="three11">
		<div class="three12">three12的div</div>
		three11的div
	</div>
	</body>
	
	</body>
</html>