box-sizing: border-box；是什么意思

box-sizing: border-box；当定义width和height时，它的参数值包括border和padding，

好处：修改border和padding数值盒子的大小不变。

相反，box-sizing:content-box；当定义width和height时，它的参数值不包括border和padding。

例如：

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>

<style>

  .wrap {

    width: 1100px;

    height: 500px;

    margin: 0 auto;

  }

  .wrap .item {

    float: left;

    width: 221px;

    height: 167px;

    border: 1px solid blue;

    box-sizing: border-box;

    background-color: orange;

    margin-right: -1px;

  }

  .wrap .item.special {

    width: 220px;

  }

</style>

<div class="wrap">

  <div class="item special">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

  <div class="item">4</div>

  <div class="item">5</div>

</div>