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

Dio*_*mes 24 html css stylesheet

任何人都可以向我解释为什么我们可以设计元素html
它和它之间有什么区别body

我经常看到教程和多个网站使用body,从来没有html,我只是在使用YUI 3时发现它:CSS重置,因为改变背景body不起作用.

编辑:实际上,我仍然没有找到相关的问题,当我添加reset.css后,背景变白,当我删除它恢复正常.然而Chrome检查员说背景是正常的.顺便说一句,这是主题.:p
编辑2:罪魁祸首是doctype.不知怎的,它在我的样式表中的样式html之后使css-reset渲染body中的样式.也许我应该对此提出一个问题.

文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Jam*_*xon 18

通常,您会发现人们对HTML元素进行样式化,因为它确实会影响页面的呈现方式.

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

html,body{
   min-height:101%;
}
Run Code Online (Sandbox Code Playgroud)

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

  • 对于滚动条技巧,我更喜欢`overflow-y:scroll;`但是IE8不支持它. (4认同)

Tor*_*amo 11

我们被允许为html元素设置样式的原因是因为它是一个与其他任何元素一样的DOM元素.所有DOM元素都可以设置为不是容器的样式.举个例子:

<html><body>This is my page.</body></html>
Run Code Online (Sandbox Code Playgroud)

使用CSS将主体限制为80%宽度,在主体上设置边框并为html提供不同的背景颜色(创建"离页"效果)将是完全可以接受的,保持标记的语义完整而不诉诸于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
}
Run Code Online (Sandbox Code Playgroud)

  • 究竟.这是样式化html元素的一个例子. (5认同)