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)中的滚动条始终显示在页面上.当在长页和短页之间切换时,这会停止页面左右移动.
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)
| 归档时间: |
|
| 查看次数: |
11595 次 |
| 最近记录: |