margin

标签:#margin# 时间:2018/10/11 22:17:04 作者:Shino

一 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技术推送
相关博客
Back to Top