第3章《精通css》

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

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

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

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

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

相对定位.png

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

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

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

不浮动.png

浮动.png

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。