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>

 效果圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM