导语：CSS盒子模型

CSS有两种盒子模型：标准盒子模型和ie盒子模型

盒子模型如下：所谓的盒子模型，无非就是我们编写html结构代码时的块，有内容（content）、内边距（padding）、边框（border），外边距（margin）。

类比

类似于下面这枚戒指，存储戒指的内部空间我们可以称为content，为了避免戒指被摩擦、压坏，商家都会预留一部分空间避免戒指上方不接触到盒子，这部分的空间叫做padding（内边距）。盒子的外框，这部分大小可以称为border，当快递运送这个戒指（250w，非常珍贵）的时候，为了防止损坏，距离这个盒子50厘米内不准放任何东西，这部分我们也可以称为margin（外边边距）。

标准模型和ie盒子模型的区别就在于（height：我们平时写代码设置的）：

标准盒子模型：原本就预留足够存储戒指的空间（也就是戒指占空间多少）= height标准盒子模型，块的高度 = height（content）+padding(上下内边距)+border(上下边框)+margin(外边距)；

ie盒子模型： 原本预留足够存储戒指的空间（content）+为了防止被摩擦、压坏而多预留的空间（padding）+盒子的大小（border）= height；ie盒子模型，块的高度= height（content+padding+border）+margin(上下外边距) （即怪异模式下，width包含了border以及padding；

CSS盒子模型原理

1、W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。2、IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

转换

设置为标准盒子模型

box-sizing: border-box;

设置为ie盒子模型

    box-sizing: content-box;

我们平时更倾向标准盒子模型，因为不用计算，设置高度多大就是内容就多大，边距和边框可以另外设置。

本文内容由小媛整理编辑！