简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
前端 - css负边距的问题？
PHP中文网
PHP中文网 2017-04-17 11:26:59
0
2
479

这里有两个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中文网

认证0级讲师

全部回覆(2)
刘奇
刘奇2017-04-17 11:28:59 2樓

margin值是百分比數的時候，是相當於元素的包含區塊的width來計算的

你這兒的.sub margin-left:-100%的100% 是相對於sub的包含塊 body的width 來計算
也就是body的寬度

而-190px只是190個像素

點贊 +0
新增回覆
伊谢尔伦
伊谢尔伦2017-04-17 11:28:59 1樓

1、這兩個p都設定了左浮動，當body的寬度足夠他們倆平排在一起的時候，他們一定會排在同一行。
2、sub設定了-100%，這個100%是相對於它的父元素body的寬度，也就是說它等於body的寬度，所以，它就回到了最左邊，而sub的寬度為190px ，那就是從最左邊開始排列，就是現在這個樣式。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！