margin属性总结
1. 使用 margin:0 auto;的盒子,必须要有width,有明确的width; 2. 只有标准流中的盒子,才能使用 margin:0 auto; 居中,即当一个盒子浮动了,绝对定位了,固定定位了,都不能使用 margin:0 auto; 3. margin:0 auto;是在居中盒子,不是居中文本,文本的居中,用 text-align:center; 4. margin的属性本质上描述的是兄弟标签之间的距离,最好不要用这个属性描述父子之间的距离,描述父子之间距离时要善于使用父亲的padding; 5. IE6兼容性问题解决方案:使浮动方向与margin方向相反;
demo1
<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
border: 1px solid red;
overflow: hidden;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
/*margin-bottom: 10px;*/
}
.p2{
float: left;
width: 150px;
height: 150px;
background-color: orange;
/*margin-top: 10px;*/
}
/*在标准文档流中margin会产生塌陷现象,元素脱标之后,margin属性不再发生塌陷现象*/
</style>
</head>
<body>
<div id="box1">
<p class="p1">1</p>
<p class="p2">2</p>
</div>
</body>
</html>
demo2
<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
margin: 0 auto;
width: 600px;
height: 200px;
border: 10px solid red;
}
div p{
margin: 0 auto;
width: 60px;
height: 60px;
background-color: orange;
}
/*使用 margin:0 auto;的盒子,必须要有width,有明确的width*/
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>