所有命运馈赠的礼物，都已在暗中标好了价格。——茨威格
1.什么是盒模型？
说一下你对CSS盒模型的理解。
css的盒子模型（box model），
可以把每个可视的HTML元素看作是一个矩形盒子，也就是一个盛装内容的容器。
这个盒子由里到外包括：content（内容）、padding（内边距）、border（边框）、margin（外边距）四个部分。
2.盒模型的类型
盒模型有两种，标准盒模型和IE盒模型（也称怪异盒模型）
（1）标准盒模型（宽高 = 内容部分）
（2）IE盒模型（宽高 = 内容+内边距+边框）
（3）box-sizing属性
在CSS中，可以通过box-sizing属性来指定盒模型的类型。
box-sizing属性有两个可选值：content-box和border-box。
默认值是content-box，表示使用标准盒模型。
如果将box-sizing设置为border-box，则使用IE盒模型。
/* 标准模型（默认） */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box;
（4）题目：计算盒子模型的宽度
<style> .div { width: 100px; height: 100px; padding: 10px; border: 1px solid #ccc; } </style> <html> <div class="div"> <!-- 请问.div盒子的宽度是多少？ --> </html>
①div盒子的宽度是多少？
答案是122px，默认情况下，.div为标准盒子模型，
width属性设置的是content的宽度，
计算公式为 offersetWidth = content + padding-left + padding-right + border-left + border-right
= 100 + 20 + 2
= 122px
（offsetWidth、offsetHeight表示元素在页面中所占用的总宽度、总高度）
②如何让offsetWidth = width
如何让offsetWidth = 100px?
<style> .div { width: 100px; height: 100px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box; } </style> <html> <div class="div"> </html>
添加 box-sizing: border-box;
3.margin问题
（1）纵向折叠问题
相邻元素的margin-top和margin-bottom会发生折叠
推荐文章：
（2）margin负值问题
- margin-top 和 margin-left负值，元素向上、向左移动；
- margin-right负值，右侧元素左移，自身不受影响；（浏览器渲染时忽略其部分宽度/重新计算其宽度）
- margin-bottom负值，下方元素上移，自身不受影响。（浏览器渲染时忽略其部分高度/重新计算其高度）
