可以划分为灰色的content和白色的padding，所有的微博都适用这个布局，不同的是content的内容
content部分被分为上中下三个部分
<div class="container"><header></header><main></main><footer></footer></div>
关闭按钮可以使用定位
行内元素(span)不能设置宽高，但是设置绝对定位后就可以设置宽高
消息头部
平分为两等份，有两种方式：
浮动(需要清除浮动)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，使内部元素居中
