css
-----------------------------
虽然css有一个垂直居中属性,CSS垂直居中属性不能决绝如下问题:
存在的问题:
*
已知div高度
*
div动态内容,不确定高度
*
想要内容垂直居中
*
不用table
在IE下:
位于相对容器的一半高度.
div内容所占有的高度默认设置为div高度
在标准浏览器中如:Mozilla,
Opera,
Safari
等等是完全不同的.
div被当做一个table
被现实出来.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01//EN">
<html>
<head>
<title>Universal
vertical
center
with
CSS</title>
<style>
.greenBorder
{border:
1px
solid
green}
</style>
</head>
<body>
<div
class="greenBorder"
style="display:
table
height:
400px
#position:
relative
overflow:
hidden">
<div
style="
#position:
absolute
#top:
50%display:
table-cell
vertical-align:
middle">
<div
class="greenBorder"
style="
#position:
relative
#top:
-50%">
any
text<br>
any
height<br>
any
content,
for
example
generated
from
DB<br>
everything
is
vertically
centered
</div>
</div>
</div>
</body>
</html>
在浏览器中显示:
any
text
any
height
any
content,
for
example
generated
from
DB
everything
is
vertically
centered
CSS可以写在head和body中的。写在head中可以给整个body使用,而写在body中可能只能给某一个DIV使用,具体是要看怎么使用。本质上是没有什么差的,从整洁度上当然是head上更好了。
当讨论到Web标准时,一些事情总是被提及,那就是结构和表现分离的重要性。结构和表现分离可以给我们带来很多好处,比如样式复用、统一标准等等。而结构与标签分离的第一件是就是需要把所有设置元素样式的语句单独提取到一个css文件。
所以更推荐将样式表单独写一个文件,在head出调用来控制整个页面的表现。
css没有headbg,,,上面的headbg是自定的类名你id为default的元素下调用的时候class="head"就是调用#default .head。。class=headbg就是#default .headbg的样式。。
这两个有什么不同嘛,.headbg是Y平铺,.head是X平铺,,,X是横向,Y是纵向。多了高度,多了一个,定位。