html{} body{}用途-优快云博客

本文详细解析了HTML和CSS在网页样式与布局中的应用，包括背景颜色设置、边框属性、外边距清除以及样式层级关系。通过示例代码演示了如何通过不同的样式规则实现页面元素的颜色变化和布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效果图：