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

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

---

手机微信的布局如下图：

图1：微信布局

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

故可以假设 HTML 结构如下：

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

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