什麼是盒子模型？——每日一題20190622

什麼是盒子模型？

把全部的網頁元素都當作一個盒子，它具備： 

content，padding，border，margin 

四個屬性，這就是盒子模型。

 

盒子模型有兩種形式：標準盒子模型，怪異盒子模型

 

首先，兩種模式能夠利用box-sizing屬性進行自行選擇：

　　標準模式：box-sizing:content-box;

　　怪異模式：box-sizing:border-box;

 

兩種模式的區別：

　　標準模式會被設置的padding撐開，而怪異模式則至關於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。

 

　　例：

　　 .box{ 

           box-sizing:border-box; //沒有添加時，按照標準模式計算， 添加時按照怪異模式解析 

           width:200px; 

           height:200px; 

           border:2px solid black; 

           padding:50px; 

           margin:50px; 

     } 

 

　　 標準模式：盒子總寬度/高度 = 內容區寬度 /高度+padding+border + margin。效果：

          怪異模式：盒子總寬度/高度 = width/height + margin。效果：