最近学习vue，在利用css进行页面布局的时候 发现利用position属性可以实现最简短代码左右布局效果，为自己mark 下。
如图
image.png
看到效果图，最先想到的时先给个背景，然后利用float处理左侧返回图标，然后在用padding来处理“城市选择”距离左边的位置，从而达到上图的效果，但是这样的话代码或比较冗长，而且padding处理后的“城市选择”只是看起来居中了，实际应用到项目中，整个效果会很差。
以下代码利用position就实现了代码短小精悍且十分优美的效果：
hml部分：
<div class="chosen">
城市选择
<div class="goback iconfont">
</div>
</div>
css部分：
（以下为stylus语法）
.chosen
position:relative
overflow:hidden
background: $bgColor
line-height: .86rem
color:#fff
text-align:center
.goback
position:absolute
top:0
left:.1rem
感觉将来css 学到最后，最重要是对页面布局的一种思维方式，而不是掌握了多少属性，继续努力~
网友评论