前端中全部盒子靠左对齐_前端学习(3): 负Margin的一个用途

准备深入学习一下前端并计划每周至少写一篇关于前端的文章。这是第三篇啦。

---

手机微信的布局如下图：

图1：微信布局

如果用 HTML 来模仿这个布局，可以认为整个屏幕是一个盒子，盒子最上面是带有灰色背景的标题行，下面则是聊天入口。

故可以假设 HTML 结构如下：

<div class="container">
  <header>微信header>
  <p>聊天1p>
  <p>聊天2p>
  <p>聊天3p>
div>

该结构在浏览器中默认渲染的效果是这样的：

图2：默认渲染样式

不好看！我们加一些样式，以便于观察：

* {
  padding: 0;
  margin: 0;
}

:root {
  font-size: 14px;
}

.container {
  width: 12rem;
  height: 18rem;
  border: 1px solid blue;
  border-radius: 4px;
  margin: 2rem auto;
}

现在，它的渲染效果是这样：

图3：加点样式

嗯，这样多少贴近手机屏的外观了。

我们再观察图1微信首屏的样式，整个容器内部其实是有内边距的，我们也加一个：

.container {
  padding: 1em;
}

此时效果如下：

图4：给窗口

微信的标题行有灰色背景，我们也加一下：

.container > header {
  background: #ccc;
}

效果如下：

图5：标题行加灰色背景

不对，这不是我们想要的。我们要的效果是 标题行背景占据容器的整个头部(标题行的左右和上面都不留白) 。但现在的问题是，容器自身的内边距限制了标题行。

怎么办呢？

这个时候，负Marigin 就大有用处了。

我们知道，容器的内边距(padding)是为了给容器内元素的周围以留白，如果容器内某个元素不想要这些留白，可以给自身设置 负Marigin 以抵销留白效果。

因此，我们可以这么做：

.container > header {
  background: #ccc;
  margin: -1rem -1rem 1rem -1rem;
}

此时，它渲染效果是这样：

图6：利用负Marigin消除内边距影响

我们做到了背景色填充整个容器！但因为容器的内边距被抵销掉了，所有标题行就太靠左了，没关系，我们给标题行加个和容器一样的左边距：

.container > header {
  padding-left: 1rem;
}

图7：给标题行添加内边距

不错，标题和下面的文本也对齐了。但标题显得太【窄】了，可以把 padding-left 改为 padding，变相地将标题拉高：

.container > header {
  padding: 1rem;
}

图8：一个完整的微信布局

不错。再微调一下，给几个聊天入口也加些边距：

.container > p {
  padding: 4px 0;
}

图9：微信布局最终版

---

好啦，一个简单的微信布局，我们主要是学到了 负Margin 的一个用途：抵销父容器内边距的影响。

CodePen Demo 在这里(也可点击【阅读原文】查看)：https://codepen.io/Youmoo/pen/PoGPPeg^[1]。

另外，我还写了一个微信电脑版的布局样式，如果你也感兴趣，点这里：https://codepen.io/Youmoo/pen/Vwjojre^[2]

欢迎阅读！

参考资料

[1]

负margin解决容器padding问题: https://codepen.io/Youmoo/pen/PoGPPeg

[2]

纯CSS实现微信电脑版布局: https://codepen.io/Youmoo/pen/Vwjojre

- END -