box-sizing属性 详解

假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。

语法：

box-sizing: content-box | border-box | inherit ;  默认值（content-box）

直接上代码领悟～

HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  
  /* 
     Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px 
 */
}

.border-box {
  box-sizing: border-box;
  
  /* 
    Total width: 160px
    Total height: 80px
    Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
    Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px 
  */
}

Result