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>
效果圖: