解析margin的自动值auto

最新推荐文章于 2022-10-30 18:01:18 发布

ypb455360299

最新推荐文章于 2022-10-30 18:01:18 发布

阅读量466

点赞数

分类专栏： css 文章标签： xhtml firefox html div web ie

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

KeyWord：web标准设计,web设计标准,标准web设计,firefox居中对齐,margin auto,ie和firefox差别,quire mode和standard mode

手册上说的auto自动是字面的意思，但手册毕竟是手册和我们实际应用是有区别的。

定义一个方向为auto，可以理解为此方向随便，自由

以前不是有个经典的FF居中么 margin:0 auto，这个其实在IE6下支持也是很好的，于是也有了如下延伸：

居中margin:0 auto

<!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=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:300px; background:#ccc;">
        <div style="width:50px; height:50px; background:#f00; margin:0 auto;"></div>
</div>
</body>
</html>

居左 margin:0 auto 0 0

<!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=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:300px; background:#ccc;">
        <div style="width:50px; height:50px; background:#f00; margin:0 auto 0 0;"></div>
</div>
</body>
</html>

居右 margin:0 0 0 auto

<!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=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:300px; background:#ccc;">
        <div style="width:50px; height:50px; background:#f00; margin:0 0 0 auto;"></div>
</div>
</body>
</html>