Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

body 和 html 元素到底有多大?

  body 和 html 这两个元素在 CSS 的处理上都是比较奇葩的。在 HTML5 中,body 和 html 元素的默认高度并不是浏览器可见区域的高度,而是根据内容自适应的。如果文档中的内容很少的话,body 和 html 元素的高度也会很低,但此时如果给它们设置背景却又是全屏的。
  下面这个代码的结果就有点匪夷所思:
<!DOCTYPE html> <html> <head> <style> body { border: 1px solid red; background: rgba(255,0,0,0.2); } </style> </head> <body> i am body </body> </html>   同时给 body 设置上边框和背景颜色,边框实际上就是 body 的高度,然而背景颜色全是全屏。于是我们就得到了一个 background 超出 border-box 的结果。
  同样的,把这样样式设置到 html 上也会得到类似的结果,只是少了 body 的默认 margin 而已。
<!DOCTYPE html> <html> <head> <style> html { border: 1px solid red; background: rgba(255,0,0,0.2); } </style> </head> <body> i am body </body> </html>   所以 body 和 html 到底有多高呢?如果说,它们对 background 做特殊处理,高度就是它们本身的高度。那么再看看下面这种情况吧!
<!DOCTYPE html> <html> <head> <style> html { border: 1px solid red; /* position: relative; */ } footer { position: absolute; bottom: 0; } </style> </head> <body> i am body <footer>footer</footer> </body> </html>   绝对定位的元素应该是相对于根元素,而 HTML 文档中的根元素应该是 html 元素吧?可实际上绝对定位的元素是相对于浏览器可见区域,所以上面的代码中 footer 元素是在 html 元素之外呈现的。如果要强行讲道理的话,html 元素可能就不是 HTML 文档的根元素了,外面应该还有一层神奇的东西,至少 CSS 是这么认为的。如果希望让绝对定位元素相对于 body 或 html 元素定位,还得手动给它们加上定位属性(把上面代码的注释去掉试试)。

  以上结果测试于目前最新的 Chrome 和 Firefox。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^