什么是盒子模型？——每日一题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。效果：