css 宽度分离原则

 我们想设计一个w=180px；h=100px的div;

 .demo1 {
    width: 180px;
    height: 100px;
    background: pink;
    padding: 10px;
    border: 1px solid #c1c1cc;
    margin: 5px;
}
<div class="demo1">
    我是div
</div>

但是现在变成了 202*122的div元素;
这并不是我们的初衷

如何解决
有两种方式：
(1) 使用怪异盒子
 .demo1 {
    width: 180px;
    height: 100px;
    background: pink;
    padding: 10px;
    border: 1px solid #c1c1cc;
    margin: 5px;
    box-sizing: border-box;//添加这一句变成怪异盒子
}
这样在项目中的实际运用场景：小程序中很多使用需要使用怪异盒子；

(2)使用宽度分离原则
 .demo1 {
        width: 180px;
        height: 100px;
        background: pink;
        margin: 5px;
    }

.son {
    padding: 10px;
    border: 1px solid #c1c1cc;
    /* 如果父级元素的宽度固定是100px
        子元素的width默认值是auto; ( widh:auto )
        就会如同流水一般，自动填满整个父级元素
    */
}

<div class="demo1">
    <div class="son">
        我是div
    </div>
</div>