css盒子模型

標籤：

1.盒子模型概念

 

 

2.標準盒模型

html代碼：

1 <!-- 標準盒模型 -->2     <div class="box">3         <div class="shoes">4             正常盒子5         </div>6     </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來撐大盒子的空間已經沒用了，因為鞋子已經被固定死了，這時我們就可以用代碼：

1 <!-- 怪異盒模型 -->2     <div class="box1">3         <div class="shoes1">4             怪異盒子.5         </div>6     </div>

 1 /*怪異盒模型*/ 2  3 .shoes1 { 4     width: 100px; 5     height: 100px; 6     background-color: orange; 7 } 8  9 .box1 {10     width: 130px;11     height: 130px;12     padding: 10px;13     border: 5px solid #f00;14     background-color: #70ff70;15     box-sizing: border-box;16 }

效果：

 

如果增大鞋子寬高：

 1 /*怪異盒模型*/ 2  3 .shoes1 { 4     width: 200px; 5     height: 200px; 6     background-color: orange; 7 } 8  9 .box1 {10     width: 130px;11     height: 130px;12     padding: 10px;13     border: 5px solid #f00;14     background-color: #70ff70;15     box-sizing: border-box;16 }

效果：

鞋盒並沒有被撐大，使用怪異盒模型需要根據鞋盒大小計算鞋子大小，不要忘記計算border。

總結：

1） 當我們給width設定一個固定的值或者給width設定100%時，設定padding都會把盒子給擠開，擠大了

2) 若想要不使用怪異盒模型又不會把盒子擠大，請把width設定為auto，width預設的值是auto。自動佔滿整個螢幕

3) 標準盒模型在pc端比較常用，因為pc端的螢幕大，有優勢可以撐

4) 怪異盒模型在手機端比較常用。手機螢幕是有限大小的，有時我們往往需要使用怪異盒模型把他固定住。

5) 怪異盒模型的盒子大小還要加上border的大小。

 

css盒子模型