对position定位和margin外边距的理解

对position定位和margin外边距的理解

• position定位

  • positon：absolute （脱离文档流，原本位置不在）

    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和absolute的父元素）。 如果一直没找到 relative或者absolute定位的第一个父元素，则父元素为body。绝对定位元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行移动。

  • positon：fixed（脱离文档流，原本位置不在）

    生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行移动。

  • position:relative（未脱离文档流，原本位置仍在）

    生成相对定位的元素，相对于其文本流原始正常位置进行定位。例如，“left:20px” 会使元素相对于原始正常位置向左移动20像素。margin会算到总空间，而left则不会。

  • position:static（默认值，正常显示）

    元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

• margin外边距

  	<div class="a">
  	   <div class="b"></div>
  	</div>
  

  1. 给a或者b设置一个margin-top，两个都一起下移。
  2. 相邻的两个兄弟元素之间的外边距会塌陷

     相邻的两个兄弟元素之间的外边距会取两者之间的最大值进行合并

  3. 对元素的margin设置百分数时，百分数是相对于父元素的width计算
     • 不管是margin-top/margin-bottom还是margin-left/margin-right。当然，padding的原理也是一样的。
     • 如果没有为元素声明width，此时元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。

     为什么margin-top/margin-bottom的百分数是相对于width而不是height呢？
     CSS权威指南中的解释：
     我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。