CSS点滴可视化格式模型

1. 如果在元素上添加背景，那么背景会应用于由内容和内边距组成的区域。因此，我们常常使用内边距在内容周围创建一个隔离带，使内容不会与背景混在一起。
2. outline属性与border属性不同，轮廓绘制在元素框上，所以它们不会影响元素的大小或定位。轮廓有助于修复bug，因为它们不影响页面的布局。
3. 在CSS中，width，height指的是内容区域的宽度和高度。IE6在混合模式中，width属性不仅仅包含内容的宽度，而是内容，内边距，边框的宽度总和。解决问题的最好方案是尽量避免这个问题，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素或子元素。
4. 外边距还可以是负值。
5. 只有普通文档流中的块框的垂直外边距才会发生外边距叠加现象。
6. 当两个或更多垂直外边框相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。
7. 当一个元素包含在另一个元素中时（假设没有内边距或边框将外边距分隔开），它们的顶和底外边距也会发生叠加。
8. 外边距可以与本身发生叠加。假设有一个空元素，它有外边距，但是没有边框或内边框。在这种情况下，顶外边距与底外边距碰在了一起，它们会发生叠加。
9. 外边距叠加的实例。由几个段落组成的页面，第一个段落上面的空间等于段落的顶外边距。如果没有外边距叠加，后续的所有段落之间的空间将是相邻顶外边距和底外边距的和。这样段落之间的空间是页面顶部的两倍。如果发生了外边距叠加，段落之间的顶外边距和底外边距就叠在一起，这样各处的距离就一致了。
10. CSS中有3种基本的定位机制：普通流、浮动、绝对定位。
11. 行内元素的内容显示在行内框中，垂直内边距、边框和内边距不会影响行内框的高度。
12. 在使用相对定位时，不论是否移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。
13. 相对定位实际上被看做普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置。与之相反，绝对定位使元素的位置与文档流无关，因为不占据空间。
14. 绝对定位的元素的位置是相对于距离它最相近的那个已定位的祖先元素确定的。如果没有已定位的祖先元素，那么它的位置是相对初始包含块(根据用户代理的不同，包含块可能是画布或HTML元素)。
15. 浮动模型。浮动的框可以左右移动，直到它外边缘遇到包含框或另一个浮动框的边缘。浮动框不在文档的普通流中。
16. 如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得像浮动根本不存在一样。但是。框中的文本内容会受到浮动元素的影响，会移动以留出空间给浮动元素占用。
17. clear属性值可以是left/right/both/none,表示框的哪些边不应该挨着浮动框。其中的原理：浏览器在清理浮动时会在顶上添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面。
18. 因为浮动元素脱离了文档流，所以包含图片和文本的div不占据空间。

 

解决方法：

1） 在最后一个段落下面添加一个空元素并清理浮动(<br class=”clear”/>)。

2） 可以不对浮动进行清理，而是选择浮动div容器。

3） 值为hidden的overflow属性有一个副作用，它会自动清理包含的任何浮动元素。