1、什么是css模型?
可以说,页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:外边距(margin)、边框(border)、内边距(padding)、内容(content)。它在页面中所占的实际宽度是margin + border + padding + content 的宽度相加。
css的盒模型有两种:标准盒模型和IE盒模型。分别如下图所示:
2、两种盒模型的区别
由上图可以看出:在标准盒模型中height,width值是content部分;而IE盒模型中,我们设置的height,width值包含:(content)+填充(padding)+边框(border) 这三个部分。
3、如何设置两种盒模型
通常情况下,在不设置box-sizing时,默认box-sizing:content-box;
box-sizing:content-box;//标准盒模型
box-sizing:border-box;//IE盒子模型