css 盒子模型

css盒子模型本质上是一个盒子，它包括 content ,padding , margin , border
标准盒子模型

1. box-sizing属性值
   a). content-box : width = content （正常模式）
   b). padding-box : width = content +padding
   c). border-box : width = content +padding + border ( IE怪异模式 )

1. 正常模式（ width+padding+border+margin ） content-box

<style>
    .div1 {
        width: 300px;
        height: 300px;
        padding: 20px;
        margin: 20px;
        background: red;
        box-sizing: content-box;
        border: 10px solid yellow;
      }
</style>
 <div class="div1">
 </div>

展示样式.png
image.png

可以看出上面div的elementWidth = (width:300 )+(padding-left:20)+(padding-right:20)+(border-right:10)+(border-left:10)+(margin-right:20)+(margin-left:20) = 400px

2. 怪异模式（ width+margin ）border-box

<style>
    .div1 {
        width: 300px;
        height: 300px;
        padding: 20px;
        margin: 20px;
        background: red;
        box-sizing:border-box;
        border: 10px solid yellow;
      }
</style>
 <div class="div1">
 </div>

image.png image.png

可以看出上面div的elementWidth = (width:300 )+(margin-right:20)+(margin-left:20) = 340px;
width = ppadding +content +border

3. inhert

规定应从父元素继承 box-sizing 属性的值。

<style>
    .div1 {
        width: 300px;
        height: 300px;
        padding: 20px;
        margin: 20px;
        background: red;
        box-sizing:border-box;
        border: 10px solid yellow;[图片上传失败...(image-f11570-1542945271166)]


      }
</style>
 <div class="div1">
 </div>

image.png
image.png
image.png