美文网首页
关于div的padding和margin小技巧

关于div的padding和margin小技巧

作者: _YDS | 来源:发表于2017-07-22 16:33 被阅读0次

    盒模型

    一般情况下,给固定宽高的div加上padding值时盒子的实际宽 度为
    (width)+(padding-left)+(padding-right)
    实际高度为
    (height)+(padding-top)+(padding-bottom)

    为使盒子里的paddding值不会影响到盒子高度和宽度,可使用box-sizing: border-box;不论padding如何改变,div实际的宽和高都是样式里的width和height值,不需要程序员码代码时自己计算。

    <div class="box">
    
    </div>
    

    这种情况下box实际宽高为120px

    .box{
        width:100px;
        height:100px;
        padding:20px;
    }
    

    这种情况下box的宽高将保持100px

    .box{
        width:100px;
        height:100px;
        padding:20px;
        box-sizing: border-box;
    }
    

    div居中

    <div class="mid">
    </div>
    
    .mid{
        width: 500px;
        height: 500px;
        position: absolute;             //使用定位
        top: 50%;
        left: 50%;
        margin-top: -250px;            //margin-top为height一半的负数
        margin-left: -250px;           //margin-left为width一半的负数
        background: red;
    }
    

    相关文章

      网友评论

          本文标题:关于div的padding和margin小技巧

          本文链接:https://www.haomeiwen.com/subject/dyuukxtx.html