移动端页面布局layout技巧

<header class="navber">topbar</header>
<section id="scrollView" class=“scrollView”></section>
<footer class="tabbar"></footer>

<style lang="stylus">
.navbar
  position relative
  display flex
  z-index 10
.scrollView
  display block
  width 100%
  height 100%
  -webkit-box-flex 1
  -webkit-flex 1
  -ms-flex 1
  flex 1
  -webkit-overflow-scrolling touch
  overflow-y auto
  overflow-x hidden
  position relative
  margin-bottom -1px
.tabbar
  width 100%
  position relative
  display webkit box
  display webkit flex
  display flex
  aligon-items center
</style>

前后属性的一个设置

<div>text</div>
<style lang="stylus">
div:after , div:before
  box-sizing border-box 
  //为元素设定的宽度和高度决定了元素的边框盒。
  //就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
  //通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
  outline none 
  //设置 4 个边框的样式：
</style>