HTML 和 Body 在 CSS 中的区别

HTML 和 Body 在 CSS 中的区别

 

HTML 和 Body 如何关联

<!DOCTYPE html>  
<html lang="en">  
  <head>
    <!-- Metadata and such -->
  </head>

  <body>
    <!-- Where the content begins -->
  <body>
</html>

根据    标准定义 ，    <html> 是文档的根元素，    <head> 、    <body> 是    <html> 唯一的两个子元素。按照    规范 ，    <head> 才是和    <body> 相对照、需要加以区别的元素。 

因此，    <html> 和    <body> 是父子关系。在 HTML 文档中，    :root     选择符 对应    <html> 元素。 

:root {
}

html {  
}

需要注意的是，    :root 选择符（伪类）的      优先级 大于      html 选择符    ：    (0, 0, 1, 0) vs    (0, 0, 0, 1) 。 

哪些全局样式应该应用在 HTML

使用      rem 时      

html {  
  font-size: 62.5%;
}

body {  
  font-size: 1.4rem; /* =14px */
}

h1 {  
  font-size: 2.4rem; /* =24px */
}

古怪的    background-color  

CSS 中有一些古怪的行为 ，将    background-color 应用到    <body> 以后，即便    <body> 里的元素没有占满视口，背景颜色也会    蔓延到整个视口 。 

给    html 设置    background-color 可以解决这个问题。 

height: 100%

如果    <body> 及其子元素的高度需要设置为窗口高度时，    <html> 元素上也需要添加： 

html,  
body {  
  height: 100%;
}

哪些全局样式应该应用在 Body

早期的    规范中 ，    <body> 有以下行内属性： 

  • background
  • bgcolor
  • marginbottom
  • marginleft
  • marginright
  • margintop
  • text

这些行内属性对应的 CSS 样式应该应用在    <body> 。 

Inline Attribute         CSS Property        
background background        
bgcolor background           background-color        
marginbottom margin-bottom        
marginleft margin-left        
marginright margin-right        
margintop margin-top        
text font        

总结

本文列举了一些    <html> 和    <body> 在 CSS 中的区别，在 JavaScript 中同样存在区别，例如 html 对应    document.documentElement 、    body 对应    document.body 。

posted on 2016-07-29 15:36  blue- bird  阅读(1662)  评论(0)    收藏  举报