消息布局分析

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

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

关闭按钮可以使用定位

行内元素(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

css

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

• 消息开发
  

分为上中下三个部分
html:

初秋的巴黎，与@lexeander诉说一场时装的故事


    

    

    

    

    

    

    




    

        
        
        触心话最新动态追踪
    
    
183人发表了态度

• 中间内容
  

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

• 点赞/回复数开发
  

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

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