1. 思路：

1. 先讲盒模型是什么
2. 再介绍两种盒模型的区别
3. 可以再提一下 box-sizing 这个属性

2. 回答：

1. 当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。通俗来讲就是网页是由一个一个盒子组成的，而这个盒子是有自己的标准的，一个盒子由以下四个部分组成：

• content（盒子的内容）
• padding（盒子的内边距）
• border（盒子的边框）
• margin（盒子的外边距）

2. 在 CSS 中，盒子模型可以分成：标准盒子模型 和 怪异盒子模型

   • 标准盒子模型：浏览器默认的盒子模型

     盒子总宽度 = width + padding + border + margin

     盒子总高度 = height + padding + border + margin

     width/height 只是内容高度，不包含 padding 和 border 值

   • 怪异盒子模型

     盒子总宽度 = width + margin 盒子总高度 = height + margin

     width/height 包含了 padding 和 border 值

3. CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

   • content-box 默认值，元素的 width/height 不包含padding，border，与 标准盒子模型表现一致
   • border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
   • inherit 指定 box-sizing 属性的值，应该从父元素继承