精通CSS——chapter3（可视化格式模型）

3.1盒模型
当两个或者更多垂直外边距相遇时，他们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度中的最大者。
如果没有外边距叠加，后续所有段落之间的空间将是相邻外边和底外边距的和，这意味着段落之间的空间是页面顶部的两倍，这样就不太好看了

3.2定位概述

p,h1,div等元素成为块级元素，这意味着这些元素显示为一块内容，而strong和span称为行内元素，因为他们的内容显示在行内。
CSS中有三种基本的定位机制：普通流、浮动和绝对定位。
块级框从上到下一个接着一个垂直排列，框之间的垂直距离有框的垂直外边距计算出来。
而行内框在一行中水平排列，可以用水平内边距，边框和外边距调整他们的水平间距，杭匡的高度总是足以容纳他包含的所有行内框。但是，设置行高可以增加这个框的高度。

display：block——可以让行内元素表现的像块级元素那样
display: none——让生成的元素没有框，这个框的内容就不在显示
display：inline-block——这个声明让元素像行内元素一样水平依次排列，但是框内的内容仍然符合块级框的行为。

但是在一种情况下，就算没有定义也会创建块级元素，这种情况就是将一些文本放在块级元素当中比如div中，他会自动被当成块级元素对待。

绝对定位和相对定位

我们讨论相对定位的时候：
1、先把这个块设置为position:relative
2、然后用top和left来设置

关于这个定位问题，相对定位实际上被看做普通流（也相当于文档流）定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的。

当浏览器开始渲染 HTML 文档，它从窗口的顶端开始，经过整个文档内容的过程中，分配元素需要的空间。除非文档的尺寸被 CSS 特别的限定，否则浏览器垂直扩展文档来容纳全部的内容。每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到了边界，然后换到下一行垂直渲染。这个过程被成为普通文档流。

但是绝对定位跟文档流无关，因此不占据空间。

相对定位是“相对于”元素在文档流中的初始位置，也就是相对于自己原来的那个位置移动，而绝对定位是“相对于”距离他最近的已定位的祖先元素，如果不存在，那么相对于初始包含模块，绝对定位是根据上一辈的位置而决定的。

浮动

浮动框是不在普通流里面的，所以文档的普通流中的块框表现得就像浮动框不存在一样（可以想象成一个框加了浮动之后会飘起来，在天空中行走）

了解浮动之后我们应该要知道clear这个不得不提的好东西。如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现的像浮动根本不存在一样，但是框的文本内容会受到浮动元素的影响，会移动以留出空间，这个时候文本内容就会紧贴着浮动元素，很难看，所以clear就出来了，有right，left，both，none，他表示框的哪边不应该挨着浮动框。

有的时候clear不单单是隔开浮动元素,因为浮动元素不占据空间，所以容器元素不包围他们所以我们需要用到clear来使容器元素假装包围了浮动元素



浮动