前言
入侵前端计划的第一周即将结束，《CSS权威指南》已近尾声，真心推荐，是本好书，会带来一些新的认识，比如说盒子模型。
如果想讨论讨论，欢迎评论，共同进步嘛，初来乍到，有何不妥，请多多指点。
引入问题
据说CSS中最基础的一个重点，也就是最重点的一个基础，就是盒子模型，究竟什么是盒子模型？
基本概念
本文中会提到的名词列在下面，如文章有其他不熟悉的词汇，请请求网络帮助。
1. 正常流：正常文本从左向右、从上向下显示，称为正常流，本文一律在正常流下进行讨论，浮动和定位会让元素脱离正常流。
2. 非替换元素：元素内容包含在文档中，如<p>、<h1>。
3. 替换元素：用作为其他内容占位符的元素，如<img>。
4. 块级元素：本文介绍块级元素的一些特征，从最基本的<div>、<p>元素开始。
5. 外边距（margin）：默认值为0，可以为负数。
6. 边框（border）：默认没有边框，宽度不能为负数。
7. 内边距（padding）：默认值为0，不能为负数。
8. 宽度（width）：默认值为auto，不能为负数，为内容宽度（不包括内边距）。
9. 高度（height）：默认值为auto，不能为负数，为内容高度（不包括内边距）。
盒子模型
开篇第一图盗自百度百科。
这就是伟大的盒子模型，有什么特性，你猜。为了方便下文的观察，CSS噼里啪啦敲些东西。
水平方向有如下关系：
其中可以设置为auto的属性有三个：margin-left、width、margin-right，于是乎，就有了以下絮絮叨叨的各种情况的讨论。
1. 0个auto：此时会根据一个叫过分受限的原则，将margin-right自动变为auto，有如下效果。
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
3. 2个auto：如果margin两个值是auto，此时会使两者相等，从而满足公式，此情况常用与居中，就不截图了；如果是width和margin其中之一，该margin会被置0。 .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X8kAkBERMT86kUAzz///Msvv/yd73xHjABef/31F198cWxsjAggY4gAACxkIBGA0/O/Mae9WYAugHQkAkBERERb9CKAL37xi5/73OeOHTt29uzZSqXyxhtvTE9Pv/jii1/4whe+8pWvEAFkDBEAgIUMvgtggBFAoSUCQERERFsUI4AXX3zx+eeff+6551544YU///M//+xnPzs6OvrlL3+ZCCB7iAAALGQAEYAzF4Cm1KcLIE2JABAREdEWAxHASy+9NDY25vzPl770pZdffpkIYCgQAQBYSOoRgPtoAOUuALoA0lZ6KAARACIiIuZXbQRQKpXGx8eJAIYIEQCAhaQbAbj1/998vxa+lC6AFJ3bPmi3j9qte/8lEQAiIiLmViIAMyECALCQNCOAS+tbzcDjAOkCGJhz9560j55szzp/pAsAERER8ysRgJkQAQBYSGoRQLf6ny6AlGUuAERERLRFIgAzIQIAsJB0IgDnKYCR9T9dAClLBICIiIi2SARgJkQAABaSSgRwaaOx1dToVPvuBAFBu+QFdAF0kQgAERERbZEIwEyIAAAsZAAPBRygQ//5ZJBEAIiIiGiLRABmQgQAYCG5jgCK3AUwt33Qbn+00fkjEQAiIiLmVyIAMyECALCQXEcABfbaXvuo3bo313mFCAARERHzKxGAmRABAFhIriOAInYBzN170j5qy/V/iQgAERER8ywRgJkQAQBYSK4jAPQkAkBERMT8SgRgJkQAABYSFgEM/SdBHE24Jz9LHzz4TxEOffcQERERk0kEYCZEAAAWkusIABEREREtkAjATIgAACwk1xFA0boAEBEREa2UCMBMiAAALCTXEQAiIiIiWiARgJkQAQBYSK4jgPx0Acxut4Jz+A/Gk3tj15923CsN/cARERERu0sEYCZEAAAWklYEMLl8Y6vZ6Hi11stS+52796R9tPdO/Le8uj12/elYLXlkUFogAkBERMS8SARgJkQAABaSSgQwuXxDKOzLSzelOj96aT/mpQtgY6/XFgAiAERERCyQRABmQgQAYCEDuRHg7NWtZmNzuZxkaU6du/ekfbA9p116ba999GR7tpcNDiUCmN1u9bqfiIiIiClIBGAmRAAAFjKQCGBqYbPZ2KpXkiztRUO6AOa2D9rto/betfClH20EX3eKfMfV7U6tPldafSrczC+4sNFZGizstdV+a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" width="863" height="354" />
还有一些附加点，乱七八糟的。
1. 水平方向的外边距不会合并，垂直方向会合并的，下文详述。
2. 各种值都可以用百分数，但是不够灵活，还是乖乖的该用啥用啥吧。
3. 外边距可以为负数，依旧满足公式，只不过width会比父级宽罢了。
4. 块级替换元素，当width设置为auto，宽度会变为内容的宽度。
垂直方向格式化
也有一个公式，万能的。
height的值默认为auto，也就是随着内容的高度变化而变化，当指定一个高度时，参考内容的高度，会出现过小或者过大的情况，这个很简单，就自行脑补一下吧。
当然也有三个值，可以设置为auto，margin-top、margin-bottom、height，当margin设置为auto时，会被置零，当height设置为auto时，默认情况就不多说了。
外边距合并
块级元素水平方向不会合并外边距，但是垂直方向会合并，大的吃小的的道理，效果如下。
我知道了 