冰点网络 阿菜的自留地

Div CSS教程:DTD(文档类型)影响margin实现居中的分析

Div CSS教程:DTD(文档类型)影响margin实现居中的分析

  什么是DTD呢?也就是文档类型定义(Document Type Definition),我们在以前的教程中都已经经过很清楚了,不清楚的朋友可以回过头仔细的学习一下相关知识:
CSS代码结构初探:DOCTYPE文档类型及浏览器的模式

XHTML教程:Doctype文档类型声明必不可少!


假如您正使用HTML 4.0,就要在创建的每张网页的开头处键入下列文档类型声明:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

 假如您正使用XHTML 1.0 Transitional,就要在创建的每张网页的开头处键入下列文档类型声明:

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

  通常我们在使用XHTML 1.0 文档类型声明下解决页面的居中问题是通过margin:0 auto;
请您注重:margin:0 auto; 与margin-right:auto; margin-left:auto;是等同的效果。上面的代码是一种简写的形式。
关于CSS属性的缩写,您可以参考下面的文章:
CSS中级教程 快捷属性缩写


XHTML 1.0 Transitional示例的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div CSS教程:DTD(文档类型)影响margin实现居中的分析</title>
<style type="text/css">
body { margin:0; padding:0;}
#container { margin:0 auto; width:500px; background:#ccc; height:100px; line-height:100px;}
</style>
</head>
<body>
<div id="container">
使用XHTML 1.0 文档类型说明
</body>
</html>

  运行上面的代码,一切正常,假如我们去掉DTD声明,发现页面就出问题了。看下面的运行效果:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div CSS教程:DTD(文档类型)影响margin实现居中的分析</title>
<style type="text/css">
body { margin:0; padding:0;}
#container { margin:0 auto; width:500px; background:#ccc; height:100px; line-height:100px;}
</style>
</head>
<body>
<div id="container">
去掉DTD声明</body>
</html>

  然而页面可能使用的是HTML 4.0文档类型声明,如何才能让页面居中呢,显然很多朋友已经发现了,同样的代码,同样的margin:0 auto;页面容器居左了,解决办法如下:
主要的定义样式:
body {text-align:center; }
#container {margin:0 auto; width:500px; background:#ccc;}

当您定义text-align:center;以后,会发现在IE下页面已经居中了,但是您会发现在mozilla下页面仍然是居左的,解决办法就是在子元素定义时候设定时再加上“margin:0 auto;”这样就可以完成页面容器居中的效果。
假如你需要定义文字居中,需要单独进行设置,例如:#container { text-align:left;}
代码如下:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div CSS教程:DTD(文档类型)影响margin实现居中的分析</title>
<style type="text/css">
body {text-align:center; margin:0; padding:0;}
#container {margin:0 auto; width:500px; background:#ccc; height:100px; line-height:100px; text-align:left;}
</style>
</head>
<body>
<div id="container">
使用HTML 4.0 文档类型说明
</div>
</body>
</html>

  注意:假如您想用这个方法使整个页面要居中,建议在内容较多时不要套在一个DIV里,可以依次拆出多个div,只要在每个拆出的div里定义margin:0 auto;就可以了。假如内容不是非常多可以定义一个wrap层,让这一层居中即可。

总结:
margin在HTML 4.0文档类型声明下使页面居中首先要在父元素定义“text-align:center”然后在子元素定义的时候再加上“margin:0 auto;”即可。文字的居中,可以用“text-align:left”进行还原操作。
margin在XHTML 1.0文档类型声明下通过“margin:0 auto”即可定义页面容器居中。

来源:http://www.mb5u.com/divcssjiaocheng/22327.html

留言列表
发表留言
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。