從零基礎到輕鬆就業 | CSS——CSS 基本視覺格式化：① 「塊盒子」格式化（ Ⅴ ）

時間 2020-01-11

原文原文鏈接

原創：itsOli  @前端一萬小時

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

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

🔗緊接上篇文章css

（2）類型 ②：負 margin-bottom

🔗效果及源碼連接html

div {
  width: 400px;
  border: 3px solid black;
}

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

  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-bottom 設爲「負」，段落 2 會根據段落 1 底端的位置放置：前端

（3）類型 ③：正負 margin 合併

「塊盒子」重疊的時候，若是垂直 margin 都爲負值，瀏覽器會取兩個 margin 絕對值的最大值；若是一個正 margin 與一個負 margin 合併，則會從正 margin 減去這個負 margin 的絕對值。瀏覽器

🔗效果及源碼連接bash

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
 <ul>
  <li>Fine</li>
  <li>thank you</li>
  <li>and you?</li>
 </ul>
<p>回答 How are you? 的方式！</p>
</div>
</body>
</html>
複製代碼

div {
  width: 400px;
  border: 3px solid black;
}

ul {
  border: 1px dashed black;
  margin-top: px;
  margin-right: 20px;
  margin-bottom: -15px; /* ① 修改這裏的值來觀察效果； */
  margin-left: 20px;
  width: auto;
  background-color: yellow;
}   
    
li {
  border: 1px dashed black;
  margin-top: ;
  margin-right: 20px;
  margin-bottom: 20px; /* ② 修改這裏的值來觀察效果。 */
  margin-left: 20px;
  width: auto;
  background-color: grey;
}

p {
  border: 1px dashed black;
  margin-top: -18px; /* ① 修改這裏的值來觀察效果。 */
  margin-right: 20px;
  margin-bottom: px;
  margin-left: 20px;
  width: auto;
  background-color: yellow;
}
複製代碼