技術標籤：css

1 、標準盒模型

box-sizing: content-box;

屬性width,height只包含內容content，不包含border和padding。
（這句話的意思就是，寫的寬高是多少，盒子的內容就是多少，要是加了邊框和內邊距，那這個盒子就會變大，不會去擠壓內容的大小。）

2、怪異盒模型（ie盒模型）

box-sizing: border-box;

	<style>
        .box1 {
            box-sizing: content-box;
            border: 1px solid lightblue;
 

            padding: 5px;
            height: 100px;
            width: 100px;
        }
        .box2 {
            box-sizing: border-box;
            border: 1px solid blue;
            padding: 5px;
            height: 100px;
            width: 100px;
        }
    </style>
    
    <div class="box1"
 
>
        luluwang
    </div>
    <div class="box2">
        luluwang
    </div>

下面的三張圖就是程式碼顯示的效果，可以明顯的看出來，在寬高邊框和padding值都一樣的情況下，只是box-sizing不一樣，box1要比box2大，大的剛好是邊框和內邊距的值。

（這兩個等我有時間再來寫，內容太多了）

3、flex伸縮盒模型

4、多列布局盒模型