标签：
入侵前端计划的第一周即将结束，《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，有如下效果。
看效果，左边距是100px，宽度是200px，但是右边距是auto，根据公式可以得出auto最终的值，恰好填满父级width。
2. 1个auto：三者中无论那个是auto，都会计算出相应的值，使得满足上述公式。
3. 2个auto：如果margin两个值是auto，此时会使两者相等，从而满足公式，此情况常用与居中，就不截图了；如果是width和margin其中之一，该margin会被置0。 
4. 3个auto：此时两个margin会被置零，width会尽可能宽，以满足公式。
还有一些附加点，乱七八糟的。
1. 水平方向的外边距不会合并，垂直方向会合并的，下文详述。
2. 各种值都可以用百分数，但是不够灵活，还是乖乖的该用啥用啥吧。
3. 外边距可以为负数，依旧满足公式，只不过width会比父级宽罢了。
4. 块级替换元素，当width设置为auto，宽度会变为内容的宽度。
也有一个公式，万能的。
height的值默认为auto，也就是随着内容的高度变化而变化，当指定一个高度时，参考内容的高度，会出现过小或者过大的情况，这个很简单，就自行脑补一下吧。
当然也有三个值，可以设置为auto，margin-top、margin-bottom、height，当margin设置为auto时，会被置零，当height设置为auto时，默认情况就不多说了。
块级元素水平方向不会合并外边距，但是垂直方向会合并，大的吃小的的道理，效果如下。
越看到后面越乏味，但是依旧要坚持，今天是周五，还有70多页就搞定了，只是博客没有写，这几天看不进去的时候还在看《JavaScript DOM 编程艺术》，马上看完了，下周可以借用两天来补偿这周的时间了！
标签：
原文地址：http://www.cnblogs.com/zhangkeyang/p/4391104.html
