suchen

Heim  >  Fragen und Antworten  >  Hauptteil

前端 - 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中文网2778 Tage vor484

Antworte allen(2)Ich werde antworten

  • 怪我咯

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

    margin值是百分比数的时候，是相当于元素的包含块的width来计算的

    你这儿的.sub margin-left:-100%的100% 是相对于sub的包含块 body的width 来计算
    也就是body的宽度

    而-190px就只是190个像素

    Antwort
    0
  • 伊谢尔伦

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

    1、这两个p都设置了左浮动，当body的宽度足够他们俩平排在一起的时候，他们一定会排在同一行。
    2、sub设置了-100%，这个100%是相对于它的父元素body的宽度，也就是说它等于body的宽度，所以，它就回到了最左边，而sub的宽度为190px，那就是从最左边开始排列，就是现在这个样式。

    Antwort
    0
  • StornierenAntwort