八哥的面试常考题 CSS篇（二）CSS负margin的理解

本文参考 掘金社区 理解并运用 CSS 的负 margin 值

• 负margin

Negative values for margin properties are allowed, but there may be implementation-specific limits. —— W3C

• 根据w3c标准，

  • 负margin不是hack，是正常范围内的写法
  • 与设置正值不同，负margin需要根据设置的 方向/是否浮动/元素的定位方式判断其行为

• 1.元素未设置浮动且未设置定位/position:static

  • 设置margin方向为top或left

    • 当设置负值的margin的方向为top或left时，元素会按照设置的方向移动相应的距离

  
  设置负margin前
  
  设置负margin-top
  
  设置负margin-left

  • 设置margin方向为bottom或right

    • 元素本身不会移动，元素后的其他元素会往该元素的方向移动相应的距离，并覆盖在该元素上。

设置前 盒子1为后代元素 盒子2为后面的元素

设置负margin-bottom后，子代元素为移动，盒子2向上移动

• 2.元素没有设置浮动且 position 为 relative

  • left或top
    元素会按照设置的方向移动相应的距离
  • bottom或right
    元素未设置z-index时，会覆盖后面的移动的元素，如下图
    
    设置了负margin-bottom的盒子覆盖了盒子2

• 3.元素未设置浮动且position为absolute

  • 设置top/left
    元素会按照设置的方向移动相应的距离
  • 设置bottom/right
    因为该元素已脱离文档流，设置margin-bottom/margin-right 不会对后面的元素产生影响

• 4.元素设置浮动

对于一个浮动的元素，设置position无意义

设置红色盒子 float:left

给红色盒子一个负的margin-left, 红色盒子向左移动

给黄色盒子设置左浮动

给黄色盒子一个负右边距 margin-right ，蓝色盒子向左移动

• 对于设置了浮动的元素，设置 margin 为负值的时候，表现如下：

  • 如果设置的 margin 的方向与浮动的方向相同，那么，元素会往对应的方向移动对应的距离。

  • 如果设置 margin 的方向与浮动的方向相反，则元素本身不动，元素之前或者之后的元素会向钙元素的方向移动相应的距离。