區別:1、html標籤是文件的根元素;body標籤是文件的主體元素;2、應該套用在html和body標籤的全域樣式不同;3、JS中html對應「document.documentElement ”,body對應“document.body”。
本教學操作環境:windows7系統、CSS3&&HTML5&&javascript1.8.5版、Dell G3電腦。
在 CSS 中,100db36a723c770d327fc0aef2ce13b1 和 6c04bd5ca3fcae76e30b72ad730ca86d 的差異往往被忽略,全域樣式或定義在 100db36a723c770d327fc0aef2ce13b1 上,或定義在 6c04bd5ca3fcae76e30b72ad730ca86d 上。實際上,兩者是有區別的,不論是 CSS 老鳥還是新手,都應該了解。
HTML 和Body 如何關聯
<!DOCTYPE html> <html> <head> <!-- Metadata and such --> </head> <body> <!-- Where the content begins --> <body> </html>
根據標準定義,100db36a723c770d327fc0aef2ce13b1 是文件的根元素,93f0f5c25f18dab9d176bd4f6de5d30e、< ;body> 是100db36a723c770d327fc0aef2ce13b1 唯一的兩個子元素。依照規範,93f0f5c25f18dab9d176bd4f6de5d30e 是和 6c04bd5ca3fcae76e30b72ad730ca86d 相對對照、需要加以區別的元素。
因此,100db36a723c770d327fc0aef2ce13b1 和 6c04bd5ca3fcae76e30b72ad730ca86d 是父子關係。在 HTML 文件中,:root 選擇符對應 100db36a723c770d327fc0aef2ce13b1 元素。
:root { } html { }
要注意的是,:root 選擇符(偽類)的優先權大於 html 選擇子:(0, 0, 1, 0) vs (0, 0, 0, 1)。
哪些全域樣式應該應用在HTML
html { font-size: 62.5%; } body { font-size: 1.4rem; /* =14px */ } h1 { font-size: 2.4rem; /* =24px */ }
古怪的background-color
CSS中有一些古怪的行為,將background-color 應用到6c04bd5ca3fcae76e30b72ad730ca86d 以後,即便6c04bd5ca3fcae76e30b72ad730ca86d 裡的元素沒有佔滿視口,背景顏色也會蔓延到整個視口。
給 html 設定 background-color 可以解決這個問題。
height: 100%
如果6c04bd5ca3fcae76e30b72ad730ca86d 及其子元素的高度需要設定為視窗高度時,100db36a723c770d327fc0aef2ce13b1 元素上也需要加入:
html, body { height: 100%; }
哪些全域樣式應該應用在Body
早期的規格中,6c04bd5ca3fcae76e30b72ad730ca86d 有以下行內屬性:
background
bgcolor
#marginbottom
marginleft
marginright
margintop
text
Inline Attribute | #CSS Property |
background | |
background | background-color|
margin-bottom |
margin-leftmarginright
margin-rightmargintop
以上是html和body標籤的差別有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!