从零基础到轻松就业 | 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;
}
复制代码

💡ul 和 p 重叠的 margin 都为“负”，则取绝对值较大者（-18px)： ide

💡当上边的较大者（-18px）增长到 li 的最大正 margin 上（20px）时，就获得了 20px - 18px = 2px：post

后记： 这篇咱们学习了“块盒子”的格式化方式，下一篇咱们接着这篇继续探讨“行内盒子”的格式化方式。学习

在“行内盒子”格式化方式中，咱们会谈到不少细小的基础知识，和本篇的学习方式同样，让咱们尽量的用代码、用图片来攻克它们。spa

祝好，qdywxs ♥ you！3d