简单理解盒模型

引言：虽然css盒模型都有content、padding、border、margin这些属性，但是标准盒模型与可选盒模型计算宽、高的方式并不一样，这导致我们在写css的时候会出一些问题，所以我们需要了解一下盒模型宽高的组成以及计算方式。

1.标准盒模型

在标准盒模型中，一个盒子的实际宽高等于内容的宽高加上内边距和边框，即

box-height = content-height+padding-top+padding-bottom+border-top+border-bottom
box-width = content-width+padding-left+padding-right+border-left+border-right

如设置一个盒子属性为：

.box {
    width: 350px;
    height: 150px;
    border: 5px solid red;
    padding: 20px;
    background-color: #008c8c;
}

盒子的实际宽度（400） = 350+20+20+5+5
盒子的实际高度（200） = 150+20+20+5+5
可以在浏览器中查看其尺寸

2.可选盒模型

设置为可选盒模型之后，盒子会自动计算内容的宽高以适应设置的宽高。只需要将box-sizing属性设置为border-box，让其成为边框盒。

.box {
    width: 350px;
    height: 150px;
    border: 5px solid rgb(0, 204, 255);
    padding: 20px;
    margin: 40px;
    background-color: #008c8c;
    color: #fff;
    text-align: center;
}
.alternate{
    box-sizing: border-box;
}
-------------------------------------------------------------------------------------------
 <div class="box">
     我是标准盒
 </div>
 <div class="box alternate">
     我是可选盒
 </div>

3.在开发中使用可选盒

在开发中，设置可选盒是常见和公共的一种操作，为了便于开发，可以将html元素设置为边框盒，让所有元素来继承box-sizing 值

   html{
       box-sizing: border-box;
   }
   *,*::after,*::before{
       box-sizing: inherit;
   }

若大家对进阶打怪有兴趣的话，欢迎订阅以下专栏

地址：WebGIS入门和进阶实战