盒子模型的理解

时间:2022-05-26 09:40:37

盒子模型分为ie盒子模型与w3c盒子模型:

为了更好的理解贴图展示:

  用css中的样式理解就是:

  IE盒子模型就是:box-size:border-box;

  标准盒子模型就是:box-size:content-box;

 

ie盒子模型:

 

盒子模型的理解

标准盒子模型:

盒子模型的理解

 

 那应该选择哪中盒子模型呢?当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢?很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了