解析margin的自动值auto
来源:互联网 发布:淘宝网开店卖衣服货源 编辑:程序博客网 时间:2024/05/22 06:37
解析margin的自动值auto
(2011-05-21 13:14:31)杂谈
.nav {
position: relative;
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的值为最大可能值。
写得有点乱,记得以前看过一些资料有这方面的详细描述,只是现在想不起也找不到了。不过大概也就这几个点了,了解一下就可以。
手册上说的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>
注意:没有上或者下方向的auto
此应用一定程度上可以代替float,而且更方便,兼容更好
- 解析margin的自动值auto
- 解析margin的自动值auto
- 解析margin的自动值auto
- 居中解析margin:0 auto;
- margin auto的用法
- margin:auto、margin:0 auto、margin:0
- margin:0 auto;不居中的原因
- margin:0 auto;不居中的原因
- margin(0 auto)无法居中的原因
- margin:0 auto;失效的原因
- margin:0 auto;不居中的原因
- margin的解析逻辑
- 网站布局不能自动auto,也就是margin:0px auto不起作用
- margin:auto 与 margin:0 auto 区别
- 浅谈margin:0 auto
- margin:0 auto;
- margin:auto实现居中
- IE对margin:0 auto 不能居中的解决办法
- 4月8日至12日,澳大利亚总理艾伯特正式访问中国并参加博鳌亚洲论坛。
- Python Sleep休眠函数
- 用Unix的设计思想来应对多变的需求
- 我国出境游人数和购买力均跃居世界第一
- sqlserver 中group by的用法
- 解析margin的自动值auto
- Handler sendMessage 与 obtainMessage (sendToTarget)比较
- HDU4502-吉哥系列故事——临时工计划
- cocos2d-x 关卡选择界面(CCScrollView的使用)
- android::数据库简单原理。
- HTML中<!DOCTYPE>作用及用法详解
- cvEigenVV 函数的使用
- 机器学习如何度量相似性 Cosine
- jsp网页产生验证码