Div盒模型+浮动

盒模型

在CSS中，width和height指的是内容区域的宽度和高度。增长内边距、外框和外边距不会影响内容区域的尺寸，可是会增长元素框的总尺寸。

假设框的每一个边上有px的外边距和5px的内边距，若是但愿这个框达到100px宽，就须要将内容的宽度设置为70px。

Ps：外边距能够是负值。

外边距叠加

• 当两个或更多垂直外边距相遇时，他们将造成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。
• 当一个元素包含在另外一个元素中时（假设没有内边距或边框将外边距分隔开），元素的顶外边距就会与父元素的顶外边距发生叠加。

假设有一个空元素，他有外边距，可是没有边框或内边距。此时，顶外边距和底外边距就碰到一块儿，发生叠加。
只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。

CSS定位机制

• 普通流
• 浮动
• 绝对定位

块级框从上到下一个接一个地垂直排列，框之间的垂直距离由框的垂直外边距计算出来。
行内框在一行中水平排列。可使用水平内边距、边框和外边距调整他们的水平间距。垂直内边距、边框、外边距不影响行内框的高度。
由一行造成的水平框称为行框，行框的高度老是足以容纳它包含的全部行内框。可是，，设置行高能够增长这个框的高度。

将dispaly的属性设置为inline-block。顾名思义，这个声明让元素像行内元素同样水平地依次排列。可是，框的内容仍符合块级框的行为。
框能够按照HTML元素的嵌套方式包含其余框。大多数框由显式定义的元素造成。可是，若是将一些文本添加到一个块级元素（例如div）的开头时。即便没有把这些文本定义为块级元素，他也会被看成块级元素对待。

相对定位

将一个元素相对定位，他将出如今他所在的位置上，而后，能够经过设置垂直或水平位置，让这个元素“相对于”它的起点移动。若是将top设置为20px，那么它就会向下移动20px。
Ps：在使用相对定位时，不管是否移动，元素仍然占据原来的空间。所以，移动元素会致使他覆盖其余框

绝对定位

相对定位实际上被看做普通流定位模型的一部分，由于元素的位置是相对于他在普通流中的位置。与之相反，绝对定位使元素的位置与文档流无关，所以不占据空间。普通文档流中其余元素的布局就像绝对定位的元素不存在同样。

决定定位的元素的位置是相对于距离它最近的那个已定位的祖先元素肯定的。若是元素没有已定位的祖先元素，那么他的位置是相对于初始包含块的。
绝对定位的框与文件流无关，因此他们覆盖页面上的其余元素。能够经过设置z-index属性来控制这些框的叠放次序。z-index值越高，框在栈中的位置就越高

若是扩大绝对定位的框，周围的框不会从新定位。所以，尺寸的任何改变都会致使绝对定位的框产生重叠。

固定定位

固定定位是绝对定位的一种，差别在于固定元素的包含块是视口（viewport）。这使咱们可以建立老是出如今窗口中相同位置的浮动元素。

浮动

浮动框不在标准文档流中，一个元素设置浮动以后，他就脱离了标准文档流，不占据空间。他会超设置的方向移动，直到他的边缘碰到包含框的边缘。

行框和清理

若是浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得像浮动根本不存在同样。可是框的文本内容会受到会受到浮动元素的影响
应用：建立浮动框使文本能够围绕图像。
想要阻止行框围绕在浮动框的外边，须要对包含这些行框的元素应用clear属性。clear属性的值能够是left、right、both或none，他表示框的哪些边不该该挨着浮动框
在清理浮动时，浏览器在元素顶上添加足够的外边距，使元素的顶边缘垂直降低到浮动框下面。
对元素进行清理实际上为前面的浮动元素流出了垂直空间。

案例：假设有一张图片，但愿让它浮动到一个文本块的左边。而后将他们包含在另外一个具备背景颜色和边框的元素中。
可是浮动元素脱离了文档流，因此包围图片和文本的div不占据空间。
- 这时就须要在这个元素中的某个地方应用clear。可是父元素div中没有现有的元素能够清理，因此要在最后一个段落中添加一个空元素而且清理它。
能够添加一个<br class="clear" / > - 或者直接浮动容器div