css盒子模型

1.盒子模型概念

2.标准盒模型

html代码：

<!-- 标准盒模型 -->
    <div class="box">
        <div class="shoes">
            正常盒子
        </div>
    </div>

css代码：

/*标准盒模型*/

.shoes {
    width: 100px;
    height: 100px;
    background-color: orange;
}

.box {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 5px solid #f00;
    background-color: #70ff70;
}

在标准盒模型中，设置padding会自动挤压空间，而不会利用给出来的空间，不会占用宽内位置，不通过width影响，会自己挤出空间来。就是说，我的 鞋子是100*100的，我不需要120*120的盒子，你给我一个100*100的盒子就好了，我靠我自己来把他挤成120*120。

再加上border的5px，盒子就是130*130：

这就是标准盒子模型，先做好鞋子，再做鞋盒。

3.怪异盒模型：

怪异盒模型与标准盒模型的区别就是，怪异盒模型是先做好盒子，再来做鞋子，我把盒子的大小固定住，你鞋子怎么挤也没有用。

这时我们只要在我们的代码中加一条box-sizing：boeder-box，就可以把我的盒子给固定住，这时你鞋子想要用padding来撑大盒子的空间已经没用了，因为鞋子已经被固定死了，这时我们就可以用代码：

<!-- 怪异盒模型 -->
    <div class="box1">
        <div class="shoes1">
            怪异盒子.
        </div>
    </div>

/*怪异盒模型*/

.shoes1 {
    width: 100px;
    height: 100px;
    background-color: orange;
}

.box1 {
    width: 130px;
    height: 130px;
    padding: 10px;
    border: 5px solid #f00;
    background-color: #70ff70;
    box-sizing: border-box;
}

效果：

如果增大鞋子宽高：

/*怪异盒模型*/

.shoes1 {
    width: 200px;
    height: 200px;
    background-color: orange;
}

.box1 {
    width: 130px;
    height: 130px;
    padding: 10px;
    border: 5px solid #f00;
    background-color: #70ff70;
    box-sizing: border-box;
}

效果：

鞋盒并没有被撑大，使用怪异盒模型需要根据鞋盒大小计算鞋子大小，不要忘记计算border。

总结：

1） 当我们给width设置一个固定的值或者给width设置100%时，设置padding都会把盒子给挤开，挤大了

2) 若想要不使用怪异盒模型又不会把盒子挤大，请把width设置为auto，width默认的值是auto。自动占满整个屏幕

3) 标准盒模型在pc端比较常用，因为pc端的屏幕大，有优势可以撑

4) 怪异盒模型在手机端比较常用。手机屏幕是有限大小的，有时我们往往需要使用怪异盒模型把他固定住。

5) 怪异盒模型的盒子大小还要加上border的大小。