每天一道面试题：两种盒模型分别说一下
❝作者：bibi不吃鱼 今日的许多烦恼，都来源于昨日的惰性。
❞
我们先来看一下mdn的解释
当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。
官方的解释就是有点难懂。我们打开谷歌浏览器的控制台。
其实每个元素都是一个一个的盒子，它由margin,border,padding,content组成，最中间的蓝色就是content
平时我们就在对里面的content设置各种样式，整体的盒子就会根据设置的样式渲染在浏览器中。
标准盒模型
box-sizing="content-box";
当我们对一个元素设置他的width和height的时候。
标准盒模型只是对content(蓝色部分)设置了宽高，我们再次把刚才的图放在这里。那么这个元素真正的宽高就还要加上他的padding(内边距)border（边框）margin（外边距）。我们布局的时候就要好好计算一下了。
IE盒模型(怪异盒模型)
box-sizing="border-box";
当我们对一个元素设置他的width和height的时候。
怪异盒模型就不一样了，它把整个盒子看成是一个整体。给整个盒子一个宽高。如果你还给盒子设置了额外的边距和边框。那么中间的content蓝色部分就要受到挤压,变小。
总结
标准盒模型：只设置content的大小。
IE盒模型:将整个元素看成整体设置大小
如果对你有帮助的话，请点个👍吧！我们继续分享更多文章的～
本文使用 mdnice 排版
