1、通过怪异盒子+padding布置div位置:
.header{
width:100%;
height:44px;
padding:7px 50px 7px 8px;
box-sizing:border-box;
}
2、设置标签内文字的位置
通过line-height来设置;因为文字的位置是line-height的一半,所以设置
line-height,即可设置文字位置
3、第二行元素在第一行元素高出的地方补齐排列
不采用方法:采用display:inline-block;给行内元素设置宽高,第二行元素不会在第一行多余
的地方补齐
(1)采用float浮动可以
4、文字其他位置添加如照片等元素可以使用::after等伪类对象,再通过定位
布置其位置
.header .login{
width:44px;
height:44px;
line-height:72px;
}
.header .login::before{
content:'';
position:absolute;
left:50%;
width:24px;
height:26px;
background-image:url('../img/ico_home.png');
}