在CSS中设置`<html>‘元素的样式?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (38)

谁能解释一下为什么我们可以为html元素设计样式?

它和body有什么区别?

提问于
用户回答回答于

通常你会发现人们对HTML元素进行样式设计,因为它对页面呈现方式确实有影响。

你可能会看到的最显着的风格是

html,body{
   min-height:101%;
}

这用于确保Firefox等浏览器中的滚动条始终显示在页面上。当在长短页之间切换时,这会停止页面左右移动。

用户回答回答于

我们被允许设计html元素的原因是因为它是一个DOM元素。所有的DOM元素都可以被设计成它们不是的东西,比如一个容器。以这个例子:

<html><body>This is my page.</body></html>

使用CSS将body限制为80%宽度,在body上设置边框并为html提供不同的背景色(创建“off page”效果)将是完全可以接受的,保持标记的语义完整无需诉诸div杂乱。

这是我发现的一种技术,用于将容器(垂直和水平)居中放置在屏幕上,而无需使用大量的div或表格,甚至不必知道居中容器的大小。

html {
  display:table;
  width:100%;
  height:100%;
}
body {
  display:table-cell;
  vertical-align:middle;
}
body > div {
  # "shrink wraps" the div so you don't have to specify a width.
  # there's probably a better way to do precisely that, but this works.
  display:table; 
  margin:0 auto; # center the div
}

扫码关注云+社区

领取腾讯云代金券