关于div的padding和margin小技巧

html标签

盒模型

一般情况下，给固定宽高的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;
}