包含cssmarginleft的词条
css中left与margin-left和position:relative与position:absolute的区别
主要区别可以总结为：
1、left指令要生效，必须其有position：relative或者position：absolute的定位才能执行；margin-left则不需要。
2、position:relative 只能定位在当前位置，受其父div位置的控制；position:absolute可以使div脱离文档源，位置由上一个有定位的祖div控制。
为了方便观察，我把背景颜色换了，然后把系统自带的内边距外边距都取消了）
具体输入*{background-color: #eee;?margin: 0px;?padding: 0px;}
1.1 生成一个div，输入{border: 1px red solid;? height: 200px;? width: 200px;? left: 50px; } 其效果图为:
这时候输入了left=200px，但是div并没有移动，这是由于他没有被定位，所以left指令无法实行。
1.2 但是如果对这个div进行相对定位或者绝对定位，那么它会定位在他所出现的位置，然后对left或top的指令再进行移动。这次我们把position：absolute/relative 加上，输入{border: 1px red solid;??height: 200px;?width: 200px;?left: 50px; position：relative； }，其效果图为：
这时候他就会先根据他一开始的定位发生移动，left的指令就生效了。
1.3 接下来，把left指令，换为margin-left，把position的指令删除，输入{border: 1px red solid;??height: 200px;?width: 200px; margin-left: 50px; }，其效果图为：
这时候它就往右边移动了50px，也就是距离左边距50px。可以得出其指令并不需要position位，它直接规定边距的距离。
1.4 最后我们把position；left；margin-left都加上，输入{border: 1px red solid;??height: 200px;?width: 200px;?left: 50px; position：relative；margin-left: 50px; }， 其效果图为：
这时候两个指令都生效了。首先margin-left:50px, 先让这个div距离左边距50px，然后position:relative;的指令使div定位在这个位置，最后left:50px；的指令，使div再距离所定位的位置50px，所以一共离左边距100px。
创建以下三个div：
div id="father"
? ? ? ? div id="son"
? ? ? ? ? ? div id="grandson"/div
? ? ? ? /div
? ? /div
1、在style分别输入
#father{border: 1px red solid;??height: 200px;?width: 200px;?left: 100px; position:relative； }
#son{border: 1px black solid;??height: 100px;?width: 100px; margin-left: 200px;? }
#grandson{border: 1px blue solid;??height: 50px;?width: 50px; left:50px;?position:relative;?}
其效果图为：
这时候#son并没有position，但是#grandson的position为relative，所以他只能对当前的定位（由于他是father与son的子文件，所以会跟他们进行相关的位移后，再实施它自己的指令进行位移，所以一开始的定位应该在黑色框内的右上角）进行位移。
2、保持其他参数不变，然后把#grandson的position:relative 给为position:absolute，具体为：
#father{border: 1px red solid;??height: 200px;?width: 200px;?left: 100px; position:relative； }
#son{border: 1px black solid;??height: 100px;?width: 100px; margin-left: 200px;? }
#grandson{border: 1px blue solid;??height: 50px;?width: 50px; left:50px;?position:absolute }
其效果图为：
此时，由于#grandson的position为absolute，即脱离文本源，就是他不会受没有定位的父div的影响，就是说其定位会忽略没有position定位的div，而直接找到最近一个有定位的祖div，再进行定位，所以它直接找到的是#father的定位，然后想对它定位后再进行left=50px的指令。
3. 要证明这一点很简单，我们再给#grandson生一个子div id="ggson"
这时候布局如图：
在style输入：
#father{border: 1px red solid;??height: 200px;?width: 200px;?left: 100px; position:relative； }
#son{border: 1px black solid;??height: 100px;?width: 100px; margin-left: 200px;? }
#grandson{border: 1px blue solid;??height: 50px;?width: 50px; left:50px;?position:absolute }
#ggson{border: 1px green solid;??height: 25px;?width: 25px; left:10px;?position:absolute}
其效果图为：
#ggs的定位追踪到#grandson上，所以在其定位上做出left=10px的指令。
这时候我们在吧#grandson的position给删掉，输入：
#father{border: 1px red solid;??height: 200px;?width: 200px;?left: 100px; position:relative； }
#son{border: 1px black solid;??height: 100px;?width: 100px; margin-left: 200px;? }
#grandson{border: 1px blue solid;??height: 50px;?width: 50px; left:50px; }
#ggson{border: 1px green solid;??height: 25px;?width: 25px; left:10px;?position:absolute}
这时的效果图为：
由于#son与#grandson上面都没有position的定位了，所以#ggson只能定位到father的position上面。
最后我们再把#ggson的position:absolute改为relative,输入：
#father{border: 1px red solid;??height: 200px;?width: 200px;?left: 100px; position:relative； }
#son{border: 1px black solid;??height: 100px;?width: 100px; margin-left: 200px;? }
#grandson{border: 1px blue solid;??height: 50px;?width: 50px; left:50px; }
#ggson{border: 1px green solid;??height: 25px;?width: 25px; left:10px;?position:relative;}
其效果图为：
这时候他就不会找祖div的position，其定位只接受其父div控制，只能定位在所在的位置。
css 如何解决margin-left在ie中翻倍问题。
这个是IE6的bug，你怎么加*和_都没用的，发生的原因是在IE5/6中，你用了左浮动，然后又用了margin-left，这样就会出现这个翻倍的bug，别问为什么出现，这是IE6，本来就不是w3c规范的浏览器。
display:inline是有作用的，可能是你写的位置不对，要加在浮动元素的后面，也就是float和margin同一个class里面。
最后，如果还没解决，那就是你的盒子模型写的有问题，记得以后上网问问题贴上代码，不然很难知道问题是不是真的像你描述的那样错误，也可能是其他代码出了问题。
将CSS代码缩写一行：margin-left:12px;?margin-top:?18px;?margin-right:6px;
正确的缩写为
{margin:18px
6px
12px;}
margin属性CSS样式，如遇到上下、左右、上下左右等情况我们可以缩写简写优化。
在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针）。
1、只有上下情况缩写
原始：margin-top:5px;
margin-bottom:6px
缩写简写为：margin:5px
6px
0或margin:5px
auto
6px
auto
2、只有左右情况缩写
原始：margin-left:5px;
margin-right:6px
缩写简写为：margin:0
6px
5px或margin:auto
6px
auto
5px
margin:0
auto;横向居中；
margin：auto
0；纵向居中；
3、只有三边情况缩写
原始：margin-top:5px;
margin-bottom:6px;
margin-left:4px
缩写：margin:5px
6px
4px或margin:5px
auto
6px
4px
4、四边相同值缩写
原始：margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:5px
缩写：margin:5px;
5、四边不同值缩写
原始：margin-top:5px;
margin-bottom:6px;
margin-left:7px;
margin-right:8px
缩写：margin:5px
8px
6px
7px;
6、四边其中上下值和左右值各相同缩写
上下相同、左右相同原始：margin-top:5px;
margin-bottom:5px;
margin-left:7px;
margin-right:7px
缩写：margin:5px
7px;
怎么解决不了CSS中 margin-left:0px; 这个值呢？
IE6中双边距Bug：
发生场合：当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍。
解决方法：是给浮动元素加上display:inline;CSS属性;或者用padding-left代替margin-left。
原理分析：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”?因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而之后对象是相对第一个对象的，所以之后对象在设置后不会出现问题。为什么display:inline可以解决这个双边距bug，首先是 inline元素或inline-block元素是不存在双边距问题的。然后，float:left等浮动属性可以让inline元素 haslayout，会让inline元素表现得跟inline-block元素的特性一样，支持高宽，垂直margin和padding等，所以div class的所有样式可以用在这个display inline的元素上。
IE6中浮动元素3px间隔Bug：
发生场合：发生在一个元素浮动，然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug。
解决方法：右边元素也一起浮动;或者为右边元素添加IE6 Hack _margin-left:-3px;从而消除3px间距。
原理分析：IE6浏览器缺陷Bug。
IE6/7负margin隐藏Bug：
发生场合：当给一个有hasLayout的父元素内的非hasLayout元素设置负marin时，超出父元素部分不可见。
解决方法：去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;
原理分析：iE6/7独有的hasLayout产生问题。
IE6/7下ul/ol标记消失bug：
发生场合：当ul/ol触发了haslayout并且是在ul/ol上写margin-left，前面默认的ul/ol标记会消失。
解决方法：给li设置margin-left，而不是给ul/ol设置margin-left。
原理分析：IE6/7浏览器Bug
IE6/7下margin与absolute元素重叠bug：
发生场合：双栏自适应布局中，左侧元素absolute绝对定位，右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。
解决方法：把左侧块级元素更改为内联元素，比如把div更换为span。
原理分析：这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器渲染Bug。
IE6/7/8下auto margin居中bug：
发生场合：给block元素设置margin auto无法居中
解决方法：出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决，但根据本人亲测，加 with此种方法是无效的，如果没有Doctype即使给元素添加width也无法让block元素居中。
原理分析：缺少Doctype声明。
IE8下input[button | submit] 设置margin:auto无法居中bug：
发生场合：ie8下，如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。
解决方法：可以给为input加上宽度
原理分析：IE8浏览器Bug
8
IE8百分比padding垂直margin bug：
发生场合：当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin一样。
解决方法：给父元素加一个overflow:hidden/auto。
原理分析：IE8浏览器Bug
初学css 想问下margin-left 和left的区别
left是指对象的左上角的X坐标
margin-left，要搞明白这个问题，你先要看一下CSS盒模型
内容到边框的距离叫PADDING,叫内边距
如果一个DIV名叫A；左边有一个DIV叫B，margin为O；那么
A 的margin－left是表现为A左边框到这个B的边框的距离
CSS里面的属性margin-right:auto; margin-left:auto;是什么意思？？？ 还有 line-height是什么意思
margin-right:auto; margin-left:auto;
auto代表样式自动适应；margin代表边距，margin-right:auto和margin-left:auto意思是左右边距自动适应；
line-height表示每行行高，也可理解为行间距