解析margin的自动值auto

最新推荐文章于 2022-03-09 16:06:42 发布

yong718100

最新推荐文章于 2022-03-09 16:06:42 发布

阅读量260

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： html css margin auto

本文链接：https://blog.youkuaiyun.com/yong718100/article/details/84011203

css 专栏收录该内容

1 篇文章

订阅专栏

有一个div居中的样式属性，在firefox中显示正常，在IE下就不能居中
找了一下，有的说是要加一个w3c认证的一个声明

加一个3C 调用声明

Html代码

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

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

我不想加

还有一个说法，说要给body加一个属性

Html代码

text-align:center;

text-align:center;

我更不想加，代价有点大

既然给body加这个属性能行，那干嘛不在外面包上一个带这个属性的div呢
测试之，通过

Html代码

<div style="text-align:center;">
<div style="margin:0 auto;">居中</div>
</div>

.nav {
position: relative;
/*
margin: 0px 0px 0px 0px; /*主菜单的距离为：上，右，下,左*/
width:961px;
margin: 0 auto 0px auto;
background: url(images/bImg/nav_bg.png) no-repeat 0 -36px;
}

======================

使用margin的auto值有什么好说的呢。一个元素在水平方向上所占的长度，由width ,padding ,和margin 决定。这些值中，只有width和margin-left，margin-right可以设为auto。在这里和大家讨论一下三者之间的关系。下面介绍一下几条原则：

1. auto 可以解释为：弥补其它部分与所要求总合之间的差别;

2.如果三个属性都没有被设置成auto ,那么margin-right会被强制设为auto;

3.如果两个边界都被设为 auto ,则被设为相等的值。

4. 如果两个边界之一和width设为auto ,则被设置为auto的边界值为0;

5.三个都被设为auto ,则2个边界的值都为0，width的值为最大可能值。

写得有点乱，记得以前看过一些资料有这方面的详细描述，只是现在想不起也找不到了。不过大概也就这几个点了，了解一下就可以。

转自：http://hotsunshine.iteye.com/blog/1069573

http://www.cnblogs.com/freeskycd/archive/2010/03/03/1677820.html

注意：没有上或者下方向的auto
此应用一定程度上可以代替float，而且更方便，兼容更好