web前端笔记day5

定位
一个大盒子要先被定义成“相对定位relative”，然后在大盒子中的小盒子再设置“绝对定位absolute”并利用left、top、right、bottom来调整图片或其他控件来达到想要的位置。

#weChat{
display:flex;/*定义弹性布局*/
justify-content:space-between;/*弹性布局的子节点两边间隔*/
position:relative;/*定位方式为：相对定位*/
}
.mmyfont_weChat{
disply:block;/*行级转块级标签，这样就可以设置大小了*/
font-family:weiph1;
font-style:normal;/*字体类型为正常*/
font-size;40px;
position:absolute;/*定位为：绝对定位，可根据父级来调节位置*/
left:calc(50% - 30px);/*调节位置达到想要的位置*/
top:-20px;
··········/*代码省略部分*/
}

如何加左边框右边框

类似上图所示的边框生成代码：

#qq::before{
content:"";/*内容为无*/
display:block;/*行转块标签*/
position:absolute;/*依旧通过定位来把边框定位好*/
width:1px;
height:10px;
background-color:#e0e0e0;
left:60px;/*位置调整*/
top:37px;
}
#qq::after{
content:"";
display:block;
width:1px;
height:10px;
position:absolute;
background-color:#e0e0e0e0;
right:201px;
top:37px;
}