前端面试题系列——css盒子模型

css盒子模型

css盒子模型就是用来装页面上的匀速的矩形区域，CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

标准W3C盒子模型：包括 margin、border、padding、content组成，并且content部分不包含其他部分

IE盒子模型：包括 margin、border、padding、content组成，和标准的W3C盒子模型不同的是，IE盒模型的content部分包含了border和padding。

两者的区别：

从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width值content的部分宽度。在IE盒子模型中，width表示 content+padding+border这三个部分的宽度，故这使得在计算盒子模型整个盒子宽度的时候存在着差异；

计算方法：

1、标准盒子模型的宽度计算：左右border+左右padding+width

2、IE盒子模型的宽度计算：width

例子：当一个最初的盒子宽度为500px,高度为500px

1、在标准盒子模型中，设置左右padding为100px，此时盒子大小会变为600px*600px

2、在IE盒子模型中，盒子的宽度和高度还是500px，内容区域缩小

盒模型的转换

在CSS中对相应的div盒子进行box-sizing属性的设置，就可以让盒模型在标准和怪异中进行转换。

1、box-sizing:content-box; 盒模型设置为w3c标准盒子模型

2、 box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型 。