有時候看到別人的代碼中經常出現在body中設置的寬高,不是很理解,於是自己測試了下,瞬間懂了,廢話不多說,直接上代碼:
首先創建好一個基本的html文件,設body的背景色為red:
相信大家都知道效果了,沒錯!
接着,我們向body里面加個div,給背景設為白色,然后居中,並且不給div寬度。代碼如下:
效果圖上:
很顯然,body的實際寬度是和子類div中的寬度一樣的,那為什么body的背景是覆蓋整個頁面呢?這是別人的猜想:
於是乎,我們上代碼:
效果圖上:
果然
因此我們得出一些結論:默認情況下,我們直接操作body的話,body會被瀏覽器當做根結點來對待,子類(子類沒有設置寬的前提下)會等於父類設置的寬,在沒有設置任何html的背景色(或其他)屬性時,body的高是都是無效的。