margin
一 margin的塌陷现象
不是标准文档流中,没有塌陷现象。竖直方向的margin会叠加。
标准文档流中,竖直方向的margin不会叠加。以较大的为准。
二 margin:0 auto;居中
margin的值可以为auto,表示自动。当left,right两个方向都是auto的时候,盒子居中了。
注意:
①使用margin:0 auto;的盒子必须有明确的width。
②只有标准流的盒子才能使用margin:0 auto;居中。当一个盒子浮动了,绝对定位了,固定定位了,都不能使用margin:0 auto;
③margin:0 auto;是在居中盒子,不是在居中文本。文本居中使用text-align:center;
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
div{
margin: 0 auto;
width:200px;
height:200px;
border:1px solid red;
text-align: center;
}
div p{
margin: 0 auto;
width: 60px;
height: 60px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>文字</p>
</div>
</body>
三 善于使用上级盒子的padding而不是自己的margin
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
div{
width:300px;
height:300px;
background-color: orange;
border:1px solid red;
}/*如果div不加边框会发现div和p会一起下移 加上边框p才会独自下移*/
div p{
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
margin这个属性,本质上是描述同级标签之间的距离,最好不要用来表达和上级盒子之间的距离。所以我们一定要善于使用上级盒子的padding,而不是margin。
欢迎大家关注DataLearner官方微信,接受最新的AI技术推送
