当前位置：首页 → 问答吧 → 关于布局margin position

关于布局margin position

时间：2011-08-17

来源：互联网

总不明白margin和position在什么时候用哪个好，可能是因为经验不足的原因.
因为margin-left比position；left 要简短所以总是喜欢用margin做一些事.
今天忽然发现:

<!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>margin-position</title> <style type="text/css"> li{ float:left; list-style:none; background:#CCC;} .margin li{ margin-left:10px;} .position li{ position:relative; left:10px; top:0;} </style> </head> <body> <ul class="margin"> <li>margin</li> <li>margin</li> <li>margin</li> <li>margin</li> <li>margin</li> <li>margin</li> </ul> <br /> <ul class="position"> <li>position</li> <li>position</li> <li>position</li> <li>position</li> <li>position</li> <li>position</li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

运行代码后可以直观的看到.
margin的话是每个元素左边都填充了10px的内容;
而position则是所有元素都右移了10px.

似乎明白了什么,但是又不是很清楚什么时候用margin什么时候用positon
在这里就希望各位经验丰富的前辈能分享一些对margin和position的高见.

因为 margin和position这个问题应该是像我这样的众多新手都弄不是很清楚的问题...