你是怎么理解CSS盒子模型的?

这是一道非常高频的css基础面试题，但是很多同学在面试时候都回答不完整。老规矩，点赞收藏，加个关注支持一下，给我一分钟，理想哥教大家该怎么满分回答这个问题

如果我是求职者，我会这么回答：

在HTML文档中，所有元素都可以理解为一个个矩形的盒子，这个盒子由四个部分组成：content、padding、border、margin

content是实际的内容展示区，boreder是边框，padding是内边距，margin是外边距。

在CSS中，可以使用box-sizing 属性定义盒子模型，当值为 content-box 时，表示W3C 标准盒子模型，值为border-box时，表示IE 怪异盒子模型，值为inherit时， 表示从父元素继承。box-sizing的值默认是content-box，也就是W3C 标准盒子模型。

其中，在W3C 标准盒子模型中，盒子的总宽度和总高度等于 content内容区的宽/高 + padding + border + margin，就说是，元素的content内容区宽高不包含padding 和 border值。

在IE 怪异盒子模型中，盒子的总宽度和总高度等于content内容区的宽/高+margin，就是说，元素的content内容区宽高包含了padding 和 border值。

以上就是这个问题的回答了，大家可以下次面试时可以试试这么回答看看效果。

最后，关于关注理想哥，每天学点前端面试小技巧。