概述
許多的web開發者不了解給html與body元素設置樣式有什么不一樣，大多數時候開發者只是給body設置樣式，當不起作用的時候，他們會把所有的樣式都加到html與body元素上，直到出現覺得符合他們的期望的效果了，但是他們並不知道樣式是在誰的身上起了作用。
出現這種混亂的情況是可以理解的，因為一開始，我們都認為這兩個元素是一樣的，因為我們給html或body加一個背景色，整個頁面都起作用了。這篇文章試圖開導作為web開發者的你，在現代瀏覽器中，這兩個元素的有什么區別
塊級元素中內容的表現
首先，讓我們來看一下當塊級元素中有內容的時候的表現:
從上面的例子我們可以看出，塊級元素沒有指定高度的時候，它會自動調整自己的高度來包含它的內容，以至於不會超出它的范圍。那么我們給塊級元素設置高度，那么它的表現回事怎么樣的呢？那么這個就要取決於css overflow屬性的值了。那么就來看下當給塊級元素設置高度的時候，根據overflow屬性值的不同的表現
根據以上的圖片，大家應該能了解了overflow的各種屬性值的表現情況。但是需要特別說明的是overflow:auto;這個屬性值。當我們需要實現當內容比我們限定的高度高時就出現滾動條，否則不出現，這個時候我們就應該使用overflow:auto,而不是overflow:scroll;因為在firefox下只要設置了overflow:scroll值,就算內容高度小於限定的高度，也會出現滾動條。
那么滾動條是從哪里來的呢
在很多的html頁面中，都是有足夠多的內容填充頁面而導致右邊出現了滾動條，那么滾動條是從哪里來的呢，魔法？或者是ui間的幽會？或許，我們更加願意相信的是因為html元素默認添加了css樣式規則 html{overflow:auto}
但是你會覺得，就算html元素默認加了overflow:auto，但是它沒有設置高度啊，塊級元素不是設置了高度跟overflow:auto才能出現滾動條的嗎。對的，你想的沒錯，但是html這個塊級元素有那么一點點特別。
根據我的驗證，當給html元素設置高度height:100%時，html元素的高度等於瀏覽器窗口的高度，當內容高度高於瀏覽器高度時，html元素就會出現滾動條，這個普通的塊級元素是一樣的。而沒給html元素設置高度時，它的高度是由內容決定的，當內容的高度大於瀏覽器窗口的高度時，雖然html元素的高度跟元素內容一樣高，但是也會出現滾動條，着顯然不符合塊級元素的規則，根據我的猜測，html的滾動條出現的臨界條件應該是，不管html的高度是多少，只要html的高度大於瀏覽器窗口的高度就會出現滾動條。這可能也是html元素的特別之處?
如上圖，我沒有給html、body元素設置高度，且我的瀏覽器窗口的高度是324px，但是html元素的高度卻達到了398px,並且出現了滾動條。如果給html設置了高度，並且加了overflow:hidden,但是超出高度的部分仍然可見，但是滾動條消失了
由上可以總結出兩點：
- 如果給html元素設置了高度並且加了overflow:hidden，內容並不會被隱藏掉，而是超過瀏覽器高度的部分被隱藏掉。
- 只要給html元素設置了overflow:hidden,滾動條都會被禁掉（android發現特列），不管有沒有給html元素設置高度。
最終結論
- html 與 body標簽是不同的塊級元素，是父子關系
- html元素的寬與高取決於瀏覽器的寬高。html元素是塊級元素，根據塊級元素的性質，html默認寬度是占一行的，也就是瀏覽器窗口的寬度。如果沒給html設置高度，那么默認的高度就是有它里面包含的內容高度所決定的，如果給html設置了height:100%,那么它的高度就是瀏覽器窗口的高度。
- html元素默認設置了overflow:auto的css樣式，在需要的時候就會顯示滾動條。也就是它里面的內容高度超過了瀏覽器窗口的高度，不管html有沒有加上高度，都會出現滾動條。
- body元素默認的定位是position:static，基於 **設置了定位的元素是參考該元素最近的、且設置了非static定位屬性的父元素 來定位 **的原則，那么所有定位子元素（父元素沒設置定位屬性）的定位都是相對於html元素的坐標系統。
- 在幾乎所有的現代瀏覽器中，頁面跟瀏覽器窗口的偏移量是通過給body元素設置margin屬性，而不是給html元素設置padding屬性。我給html設置了padding也是起作用的。
作者：木白no1
鏈接：https://www.jianshu.com/p/29d0fe0e7c4c
來源：簡書