html{} body{}用途

1.

html{background-color:white;}浏览器能看到的所有范围 ，不包括边框
body{background-color:green;}与htm一样，浏览器能看到的所有访问但无像html一样包括边框,级别html>body

如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
  <style>
       html{
	         background-color:red;
	   }
	   body{
	         background-color:blue;
	   }
	   .div1{
	     background-color:green;
		 width:222px;
		 height:440px;  
	  }	  
  </style>

</head>

<body>
    <div class="div1"></div>
	<div class="div2"></div>

</body>
</html>

 效果图:

 由于后面样式替换前面写过的样式，所以div1就由html赋予的蓝色转变成了绿色了

 

2.margin:0;清除外边距属性, border：44px；设置边框，主要设置与表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
  <style>
       
	  /*
       *  html所包含的区域内填充红色  ====包含body内容
	   */
       html{
	         background-color:red;
	   }
	   /*
	    *  body所包含的区填充蓝色，此句颜色覆盖红色转变为蓝色
		*  margin:0表示body与html存在外边距属性margin,设置为0相当与清除与 html外边距属性且body外边距属性也会清除掉
		*/
	   body{
	         background-color:blue;
			 margin:0; 
	   }
	    /*
	     *  body所包含的区填充蓝色，此句颜色覆盖html覆盖的body红色内容
		 *  border：44px；设置边框，主要设置与表格
		*/
	   .div1{
	     background-color:green;
		 width:222px;
		 height:440px; 
		 border: 44px;
		 border-color:#FFFFFF;
	  }  
	  
  </style>

</head>

<body>
    <div class="div1">
	   <table border="">
	      <tr>
		     <td>fdfafaf</td>
		     <td>fdfafaf</td>
			 <td>fdfafaf</td>
		  </tr>
	   </table>
	</div>
	<div class="div2"></div>
</body>
</html>

 效果图：

 

posted on 2012-02-07 22:59  阳光总在风雨后001  阅读(4639)  评论(0)  编辑  收藏  举报

导航