准备深入学习一下前端并计划每周至少写一篇关于前端的文章。这是第三篇啦。
手机微信的布局如下图：
如果用 HTML 来模仿这个布局，可以认为整个屏幕是一个盒子，盒子最上面是带有灰色背景的标题行，下面则是聊天入口。
故可以假设 HTML 结构如下：
<div class="container">
<header>微信</header>
<p>聊天1</p>
<p>聊天2</p>
<p>聊天3</p>
</div>
该结构在浏览器中默认渲染的效果是这样的：
不好看！我们加一些样式，以便于观察：
* {
padding: 0;
margin: 0;
}
:root {
font-size: 14px;
}
.container {
width: 12rem;
height: 18rem;
border: 1px solid blue;
border-radius: 4px;
margin: 2rem auto;
}
现在，它的渲染效果是这样：
嗯，这样多少贴近手机屏的外观了。
我们再观察图1微信首屏的样式，整个容器内部其实是有内边距的，我们也加一个：
.container {
padding: 1em;
}
此时效果如下：
微信的标题行有灰色背景，我们也加一下：
.container > header {
background: #ccc;
}
效果如下：
不对，这不是我们想要的。我们要的效果是 标题行背景占据容器的整个头部(标题行的左右和上面都不留白) 。但现在的问题是，容器自身的内边距限制了标题行。
怎么办呢？
这个时候，负Marigin 就大有用处了。
我们知道，容器的内边距(padding)是为了给容器内元素的周围以留白，如果容器内某个元素不想要这些留白，可以给自身设置 负Marigin 以抵销留白效果。
因此，我们可以这么做：
.container > header {
background: #ccc;
margin: -1rem -1rem 1rem -1rem;
}
此时，它渲染效果是这样：
我们做到了背景色填充整个容器！但因为容器的内边距被抵销掉了，所有标题行就太靠左了，没关系，我们给标题行加个和容器一样的左边距：
.container > header {
padding-left: 1rem;
}
不错，标题和下面的文本也对齐了。但标题显得太【窄】了，可以把 padding-left 改为 padding，变相地将标题拉高：
.container > header {
padding: 1rem;
}
不错。再微调一下，给几个聊天入口也加些边距：
.container > p {
padding: 4px 0;
}
好啦，一个简单的微信布局，我们主要是学到了 负Margin 的一个用途：抵销父容器内边距的影响。
CodePen Demo 在这里(也可点击【阅读原文】查看)：https://codepen.io/Youmoo/pen/PoGPPeg[1]。
另外，我还写了一个微信电脑版的布局样式，如果你也感兴趣，点这里：https://codepen.io/Youmoo/pen/Vwjojre[2]
欢迎阅读！
参考资料
负margin解决容器padding问题: https://codepen.io/Youmoo/pen/PoGPPeg
[2]纯CSS实现微信电脑版布局: https://codepen.io/Youmoo/pen/Vwjojre
– END –
原文始发于微信公众号（背井）：前端学习(3): 负Margin的一个用途
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/246782.html
