box-sizing的使用

HTML:

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

CSS

.box{
    box-sizing: border-box;
    /*box-sizing: content-box;*/
    /*box-sizing: inherit;*/
    width: 80px;
    background-color: #0055aa;
    margin: 30px;
    border: 20px solid #008200;
    padding: 10px;
}

盒子模型

標準盒子模型

IE盒子模型

border-box:

標準盒模型

div總寬/高 = width/height，div主體content寬/高 = width/height - padding(left + right)/(top + bottom) - border(left + right)/(top + bottom)

IE盒模型

content-box

標準盒模型

div總寬/高 = width/height + padding(left + right)/(top + right) + border(left + right)/(top + bottom)，div主體content寬/高 = width/height

inherit

標準盒模型

div總寬/高 = width/height，div主體content寬/高 = width/height - padding(left + right)/(top + bottom) - border(left + right)/(top + bottom)