第3章《精通css》

3.1.2外边距叠加

只有普通文档流中块框的垂直外边距才会发生外边距叠加，行内框、浮动框或绝对定位框之间的外边距不会叠加

3.2定位概述

3.2.1可视化格式模型

css中有3种基本的定位机制:普通流、浮动、绝对定位。

如何修改行内框的尺寸？
1、行内框在一行中水平排列，可以使用水平内边距、边框、外边距调整他们的水平间距
2、行内框高度并不受垂直内边距、边框、和外边距的影响
3、行内框设置显式的高度和宽度也没有影响
4、修改行内框尺寸的唯一办法就是修改行高或者水平边框、水平内边距和外边距

3.2.2相对定位

相对定位移动位置之后,元素仍然占据原来的空间，因此，这样移动会造成它覆盖其他框

.myBox{
  position:relative;
  left:20px;
  top:20px;
}

相对定位.png

3.2.3绝对定位

相对定位实际上可以看做普通流定位模型中的一部分，因为元素的位置是相对于他在普通流中的位置。
绝对定位使元素的位置与文档流无关，因此不占据空间，普通文档流中其他元素的布局就是绝对定位的元素不存在一样。

相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”距离它最近的已定位祖先元素，如果不存在已定位的祖先元素，那么相对于初始包含块

3.2.4浮动

1、现象
浮动会让元素脱离文档流，不再影响不浮动的元素，实际上并不完全如此。
浮动元素后面的文档流元素，这个元素的框不受浮动影响，但是其中的文本元素会受影响，会移动以留出空间。技术术语：浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。实际上，创建浮动框使文本可以围绕图像。

不浮动.png 浮动.png