盒子模型的注意点

• 一般的元素都会产生一个元素框，它包含内容区(width,height)，内边距(padding)，边框(border)，外边距(margin)。他们控制着元素框的整体高度与宽度。
• 位于元素框的中心是一个内容区，子元素就位于这个内容区中。内容区的高度和宽度分别由width和height决定，应该注意的是这里的width，height并不是元素的整体宽与高，只是内容区的高与宽。很多初学者都会错误的人为width,height是元素的整体宽与高，因此在设置width,height再设置padding这样其实拉长了元素的整个大小。不过对于行内非替换元素无法应用width,height,也就是说如果你对a span等元素设置width,height将没有任何效果
• 位于内容区外面与边框之间的是内边距，它也会改变元素的整个宽与高。当对元素设置背景色时覆盖的是内容区，内边距，边框。对于行内非替换元素，如果设置上下内边距并不会影响其行高，但是内边距还是会产生。
• 边框border默认的样式为none，如果边框的样式为none,则边框不存在，因此你即使设置边框的宽度也不会有边框显示出来，因为边框根本不存在。同内边距，对其设置上下边框并不会影响其行高。
• 外边距margin位于元素的最外层，为透明，但其实是存在的。上下外边距不会影响行内非替换元素的行高。两个上下元素的上下外边距将会发生重叠。即如果有两个元素，上面元素的下外边距为5px,下面元素的上外边距为8px ,这时它们之间的外边距将发生重叠，结果为8px而不是13px。不过浮动元素除外，它与其它元素上下相邻时不会产生重叠现象。
• 水平块元素，如果设置margin:auto将使元素水平居中，而竖直方向将不会居中。这时因为当将margin-left:auto,margin-right:auto时默认两边相等，而margin-top,margin-bottom设置为auto将为0px;水平方向的auto会使其值产生一个值，而该值加上其它个项的和为其包含块的width;竖直方向的auto会使其值变为0。