从零基础到轻松就业 | CSS——CSS 基本视觉格式化：① “块盒子”格式化（ Ⅳ ）

时间 2020-01-10

原文原文链接

原创：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