從零基礎到輕鬆就業 | CSS——CSS 基本視覺格式化:① 「塊盒子」格式化( Ⅳ )

原創:itsOli  @前端一萬小時

本文首發於公衆號「前端一萬小時」

本文版權歸做者全部,未經受權,請勿轉載!
複製代碼


🔗緊接上篇文章css

3.2.3 負 margin

🤔提問:水平或垂直方向各自 7 大屬性相加要等於父元素的 width 或 height,那 margin 爲負值會形成什麼結果?html

1. 水平方向
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  <p class="wide">How are you?</p>
  <p>Fine,thank you,and you?</p>
</div>
</body>
</html>
複製代碼

(1)類型1️⃣
div {
  width: 400px;
  border: 3px solid black;
}

p.wide {
  border: 1px dashed black;
  margin-left: 20px;
  width: auto;
  margin-right: -50px;
  background-color: yellow;
}
複製代碼

(2)類型2️⃣
div {
  width: 400px;
  border: 3px solid black;
}

p.wide {
  border: 1px dashed black;
  margin-left: 20px;
  width: 500px;
  margin-right: auto;
  background-color: yellow;
}
複製代碼

(3)類型3️⃣
div {
  width: 400px;
  border: 3px solid black;
}

p.wide {
  border: 1px dashed black;
  margin-left: -50px;
  width: auto;
  margin-right: 10px;
  background-color: yellow;
}
複製代碼

2. 垂直方向

(1)類型 ①:負 margin-top

🔗效果及源碼連接前端

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  <p class="wide1">How are you?</p>
  <p class="wide2">Fine,thank you,and you?</p>
</div>
</body>
</html>
複製代碼
div {
  width: 400px;
  border: 3px solid black;
}

p.wide1 {
  border: 1px dashed black;
  margin-top: -20px; /* 修改這裏的值來觀察效果 */

  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 20px;
  width: auto;
  background-color: yellow;
}   
  
p.wide2 {
  border: 1px dashed black;
  margin-top: ;
  margin-right: 20px;
  margin-bottom: ;
  margin-left: 20px;
  width: auto;
  background-color: grey;
}
複製代碼

💡把段落 1 的 margin-top 設爲「負」,它就被向上「拉」了 20 像素,且緊挨它的段落 2 也相應向上拉了 20 像素: bash


下篇咱們繼續講解 CSS「負 margin」剩下的知識點。ide

祝好,qdywxs ♥ you!post

相關文章
相關標籤/搜索