再讀《精通css》04：盒模型和空白邊疊加

                第二章：可視化格式模型

                2.1 框模型概述

1、框模型：在頁面上的每一個元素被看做是一個矩形的框。這個框由元素的内容(content)，填充(padding)，邊框(border)和空白邊(margin)組成。

2、元素的width和height指的是元素的内容區域的寬度和高度。

    實際寬度=marginLeft+borderLeft+paddingLeft+width+paddingRight+borderRight+marginRight;

    實際寬度=marginTop+borderTop+paddingTop+height+paddingBootom+borderBootom+marginBootom;

3、padding,margin,border都既可以運用于元素所有的邊或隻運用于某一邊。

4、margin可以取負值。

5、IE6在怪異模式中使用自己專有的框模型。width和height包含了padding、margin和border。

6、空白邊(margin)疊加：兩個垂直方向上的空白邊相遇時，他們将疊加成一個空白邊。這個空白邊的高度為疊加前高度較大的那一個。

7、空白邊疊加可能發生在兩個相鄰的元素，父元素與子元素，0高度的原始自身的margin-top和margin-bottom之間。

8、隻有普通文檔流中的塊級元素的垂直空白邊才會發生疊加，行内元素、浮動元素以及絕對定位的元素的垂直空白邊不會疊加。

版權聲明：本文為CSDN部落客「weixin_34284188」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/weixin_34284188/article/details/92575797