消息布局分析

可以划分为灰色的content和白色的padding，所有的微博都适用这个布局，不同的是content的内容

content部分被分为上中下三个部分

<div class="container">
    <header></header>
    <main></main>
    <footer></footer>
</div>

关闭按钮可以使用定位

行内元素(span)不能设置宽高，但是设置绝对定位后就可以设置宽高

消息头部

平分为两等份，有两种方式：

1. 浮动(需要清除浮动)
2. flex

• 左侧详细布局
  可划分为头像，文字两部分(flex实现)

头像和v可以用伪元素或者子元素，都要用绝对定位，相对于头像

头像：

.box{
    background:url(XXX) no-repeat center;
    background-size: contain;
}

大v伪元素：

.head-icon::after{
    content: '';
        /* 别忘了父元素要相对定位 */
    position: absolute;
    top:26px;
    right:-2px;
    width: 14px;
    height:14px;
    background:url() no-repeat center;
    background-size: contain;
}

子元素：
html

<div class="head-icon">
    <div class="vip-icon"></div>
</div>

css

.vip-icon{
    /* 别忘了父元素要相对定位 */
    position: absolute;
    top:26px;
    right:-2px;
    width: 14px;
    height:14px;
    background:url() no-repeat center;
    background-size: contain;
}

• 消息开发
  

分为上中下三个部分
html:

<!-- 顶部--标题 -->
<p>初秋的巴黎，与<span>@lexeander</span>诉说一场时装的故事</p>
<!-- 中部--图片 -->
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<!-- 底部--文字 -->
<div>
    <p>
        <!-- span用来添加图标 -->
        <span></span>
        触心话最新动态追踪
    </p>
    <p>183人发表了态度</p>
</div>

• 中间内容
  

可以先给一个图片添加一个margin，再用flex布局拼接，中间重叠的部分就会形成2倍的margin

• 点赞/回复数开发
  

回复点赞评论水平分为3个部分，用flex:1达成

然后每个内部div设置flex，使内部元素居中