html標籤和body標籤的區別
阿新 • • 發佈：2020-12-08
首先想要總結這個問題就是因為在開發的過程中，在設定body的高度的時候，在瀏覽器視窗中並不起作用，一直都會顯示是瀏覽器視窗的大小，所以想要搞清楚這面的原因。
一、前提
-
在頁面的設計中，當我們沒有為一個div塊級元素設定寬度和高度的時候，瀏覽器會為其分配一個最大可用的寬度，但是不負責分配高度，
塊級元素的高度是由子元素堆砌撐起來的，所以html和body標籤也是由子元素撐起來的； -
元素高度百分比需要向上遍歷父標籤要找到一個定值高度才能起作用，如果中途有個height為auto或是沒有設定height屬性，則高度百分比不起作用，此時的情況是父元素高度依賴子元素堆砌撐高，而子元素依賴父元素的定高不起作用，互相依賴，卻都無法依賴，死迴圈了； -
瀏覽器負責分配塊級元素寬度，那麼瀏覽器也一定可以分配高度(只是沒有做)，那麼瀏覽器本身是有寬度和高度的。
二、html和body中的一些問題
-
關於高度
-
設定html的height:100%，就可以獲取瀏覽器的定高了，後面的body和div也就有了依賴。
//如果在設定body前沒有設定html的高度，那麼body設定高度則不會生效，所以此時的body的height為0
<style type="text/css"> *{ margin:0px; padding:0px; } body{ height:100%; } div{ background:#ddd; height:50%; } </style> <body> <div></div> </body>
-
-
關於背景顏色
-
在我們只設置body的背景色時，瀏覽器的背景色會獲取到body的背景色。
- 一旦html標籤含有背景色，則body的背景色變成了正常的body標籤自己的背景色，而此時的html標籤最頂級，背景色被瀏覽器獲取，成為瀏覽器的背景色。
有一個說法不知道是不是正確的結論，但是以這種說法挺好理解的：
在沒有設定html元素的任何屬性時，body就會被當成是根節點設定，瀏覽器就會獲取body的屬性然後渲染，根節點設定高度都不會生效。
（在我自己學習的過程中，對前端頁面佈局等一系列的知識有一些混亂，所以準備從今天開始，每天記錄一篇前端基礎的知識，希望大家一起進步