再读《精通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、只有普通文档流中的块级元素的垂直空白边才会发生叠加,行内元素、浮动元素以及绝对定位的元素的垂直空白边不会叠加。
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、只有普通文档流中的块级元素的垂直空白边才会发生叠加,行内元素、浮动元素以及绝对定位的元素的垂直空白边不会叠加。