box-sizing 属性默认的 对元素高宽的计算方式

Question

在文档里box-sizing默认初始值是content-box；

div{
    width: 200px;
}
.div1{
    height: 250px;
    padding: 30px;
    background: blue;
}
.div2{
    height: 150px;
    background: yellow;
}

<div class="div1">
    <div class="div2">
    </div>
</div>

为什么这段在浏览器（firefox和edge）中未设置box-sizing属性它渲染的却是box-sizing：border-box;

Answer 1

因为你引用了bootstrap.css。
bootstrap中除了特别指定的元素box-sizing:content-box以外，全局元素都设置box-sizing:border-box

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}