盒子模型的基本概念
盒子示意图：
div、span和a等元素都可以看作一个盒子，但是图片、表单等元素一律看作是文本。 这个很好理解，一张图片并不能放任何东西进去，他自己就是自己的内容。
一个盒子主要由4个区域组成：
- 内容区域：尺寸为内容宽度（或称content-box宽度）,内容高度（或称content-box高度）
- 内边距区域：尺寸是 padding-box 宽度 和 _padding-box 高度。
- 边框区域：尺寸为 border-box 宽度 和 _border-box 高度。
- 外边距区域：尺寸为 margin-box 宽度 和 _margin-box 高度；由于盒之间共享外边距，外边距不容易弄清楚（BFC）。
标准盒模型和IE盒模型
-
标准盒模型中width和height只指内容区域（content）的宽度和高度
-
IE盒模型中width和height由内边距区域（padding）、边框区域（border）以及内容区域（content）的宽度高度共同组成
css中可以通过box-sizing来设置这两种模型
box-sizing: content-box; // 标准盒模型
box-sizing: border-box; // IE盒模型
知识点
- padding区域就是内边距，padding区域也有背景颜色，且与内容区域相同。也就是 说，background-color将填充所有border以内的区域。
- <body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。
- 如何用border属性画三角形？
div {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom-color: red;
}
- margin叠加问题，当两个盒子相邻的上下margin同时存在时，会取较大值作为实际的margin值。
- margin传递问题，在嵌套元素中(父子、兄弟)，子元素的margin-top不会生效，解决方案：
- BFC规范
- 给父容器加一个border
- 使用padding代替margin
- margin:auto 可以做到左右自适应居中，但不能垂直居中。
