search

Home  >  Q&A  >  body text

前端 - css负边距的问题？

这里有两个p, 都向左浮动，其中sub 设置了margin-left:-100%; 请问为何会出现这样的效果，sub能够占据到main上面。

在线demo:
http://codepen.io/anon/pen/zvJeNG

请问这个负边距有何妙用，为何-100% 和 -190px（p的宽度）效果截然不同呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
   <p class="main">
    this is main</p>
  
    <p class="sub">
      this is sub
    </p>
 </body>
</html>
.main{
  float:left;
  width:100%;
  background-color:aqua;
}
.sub{
  float:left;
  width: 190px;
  margin-left:-100%;
  background-color:black;
 
}

PHP中文网PHP中文网2865 days ago526

reply all(2)I'll reply

  • 怪我咯

    怪我咯2017-04-17 11:28:59

    When the margin value is a percentage, it is calculated equivalent to the width of the containing block of the element

    The .sub margin-left:-100% of 100% here is calculated relative to the width of the sub’s containing block body
    which is the width of the body

    And -190px is just 190 pixels

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:28:59

    1. Both p's are set to left floating. When the width of the body is enough for them to be lined up together, they will definitely be lined up in the same line.
    2. Sub is set to -100%. This 100% is relative to the width of its parent element body, which means it is equal to the width of the body. Therefore, it returns to the far left, and the width of sub is 190px. , that is, arranging from the far left, which is the current style.

    reply
    0
  • Cancelreply