CSS基础测试4：聊天界面布局

[wingmeng]

题目：

完成下图所示的布局效果，只要兼容移动端即可：

---

我的答案：

在线Demo

---

<div class="chatbox">
  <article class="message">
    <div class="user-avatar">
      <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="提案笙">
    </div>
    <h4 class="message-heading">
      <span>提案笙</span><small>9月30日21:47</small>
    </h4>
    <div class="message-content">什么秘密，我觉得你现在跟我说什么都没有意义。</div>
  </article>
  <article class="message">
    <div class="user-avatar">
      <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="淮南王铃">
    </div>
    <h4 class="message-heading">
      <span>淮南王铃</span><small>10月8日10:30</small>
    </h4>
    <div class="message-content">@蝴蝶蓝 优秀</div>
  </article>
  <article class="message">
    <div class="user-avatar">
      <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="蝴蝶蓝">
    </div>
    <h4 class="message-heading">
      <span>蝴蝶蓝</span><small>昨天 22:13</small>
    </h4>
    <div class="message-content">值得一听~~</div>
  </article>
  <article class="message oneself">
    <div class="user-avatar">
      <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="Y优秀X">
    </div>
    <h4 class="message-heading">
      <span>Y优秀X</span><small>刚刚</small>
    </h4>
    <div class="message-content">围观戏精现场</div>
  </article>
</div>

html {font-size: 14px;}
body {
  padding: 0;
  margin: 0;            
}

h4 {font-weight: 500;}

.chatbox {
  padding-top: 2rem;
  background: #fff;
}

.message {
  position: relative;
  padding: 0 5.5rem;
  margin-bottom: 2rem;
  font-size: 1.125rem;
}

.user-avatar {
  position: absolute;
  width: 4rem;
  height: 4rem;
  left: calc((5.5rem - 4rem) / 2 - 5px);
  overflow: hidden;
  background: #e6e6e6;  /* 背景色兜底，防止头像“走光” */
  border-radius: 50%;
}

.user-avatar > img {
  display: block;
  max-width: 100%;
  margin: auto;
}

.message-heading {
  margin: 0;
  margin-bottom: .4rem;
  font-size: inherit;
  color: #ababab;
}

.message-heading > span {margin-right: .5em;}

.message-content {
  position: relative;
  display: inline-block;
  min-height: 1em;
  padding: .5em 1em;
  line-height: 1.6;
  background: #f2f4f7;
  border-radius: 10px;
  border-top-left-radius: 0;
}

.message-content::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: calc(5.5rem - 4rem);
  height: calc(5.5rem - 4rem);
  transform: translateX(-100%);

  /* 弧形箭头借鉴了 @guisturdy 的代码 */
  box-shadow: 0.5rem 0 0 #f2f4f7;
  border-radius: 50% 50% 0 0;
}

.message.oneself {direction: rtl;}

.oneself > .user-avatar {
  left: auto;
  right: calc((5.5rem - 4rem) / 2 - 5px);
}

.oneself > .message-heading > span {
  float: right;
  margin-right: 0;
  margin-left: .5em;
}

.oneself > .message-content {
  direction: ltr;
  color: #fff;
  background: #00bdfe;
  border-radius: 10px;
  border-top-right-radius: 0;
}

.oneself > .message-content::before {
  left: auto; right: 0;
  transform: translateX(1rem);
  box-shadow: inset .5rem 0 0 #00bdfe;
}

[wingmeng]

自我评分：一般

优秀、良好、一般、差劲

不足之处：

1. css 类名忽略了命名空间；
2. 内圆角小尾巴的实现不够理想；
3. 对移动端的兼容性处理不够好。

学习收获：

1. 基于 iPhone6 为基准分辨率的移动端响应式解决方案；
2. direction: rtl 的使用