margin:auto 解释
解析margin的自动值auto
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: 15px auto;
上下边距为15PX 左右自动
margin:auto;
表示上下左右都自动
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
