重看css权威指南 part4

    这一部分的名字叫基本视觉格式化，主要讲了下元素框，边距之类的东西，也对前边的baseline，inline box等知识做了很多补充。

    这里提到一个词，元素框。先说水平方向上。(以下讨论的都是块级元素和行内块元素，对于行内元素以后再说)

    元素框水平宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距 = 包含块的width。

    这里，包含块指的是该元素的 "布局上下文" ，通常是最近的父级块元素，表单元格，或者行内块元素。 其中，width，margin-left，margin-right三个的值可以设为auto。对于从左到右的正常流

    1.当width为固定值，左右margin都不设置时，它的margin-right会自动设置大小，以保证元素框的宽度 = 包含块的width。例如，如果包含块的width为800，子元素的width为600，那么子元素的margin-right会设置为200(这里假设padding，border都为0)。如果子元素width为1000，那么子元素的margin-right会设置为-200。(浏览器的开发工具中显示的盒子模型中不会显示被自动设置的margin值)

    2.当margin-left/margin-right为固定值，width和margin-right/margin-left都不设置时，width会自动设置自己的值，以保证元素框的宽度 = 包含块的width。

    3.当margin-left和margin-right都设置为固定值，嗯，一个道理。

    4.当margin-left，margin-right，width都设置为固定值，但元素框的宽度 != 包含块的width该怎么办。这时，margin-right会改变自己的值，即使你给他设置了固定的宽度。

    auto可以应用在margin，height，width上。height后面再说。

    5.前面说到四种情况，那么说说第五种情况。当width固定，margin-right为固定值，margin-left不设置时，会怎样。

按照前面的说法，margin-left应该会自动改变自己的值，但实际上并非如此。除非我们给margin-left设置auto。

    6. 当我们为margin-left和margin-right都设置auto时，整个元素就会居中，这也是常用的给块级或者行内块级元素居中的方法。

    7.对于图片，当设置他为block或inline-block，给他设置了width或height后，它的height或width会自动等比例放大或缩小。

    使用auto时要注意一点，在有些浏览器下，如果包含块的width没有设置，那么auto可能会无效。