学习移动端页面布局尺寸样式

移动端页面布局样式
整体，外部section，width：100%；height：100%；margin：0 auto；display：flex；

1，header，给定高度。display：flex；没给宽度

1.1 左边，给定高度和父元素一样，宽度100%，因为右边有东西占15%，所以给100%也没事

1.2，右边

2，最外层大盒子，宽高100%,overflow-X:hidden;overflow-Y:auto;flex：1；

tabceil布局 外层盒子，无高无宽，溢出隐藏，有内边距，相对定位

2.1，里面a标签，左浮动，width：20%；

2.2 里面图标盒子，有宽有高，margin：0 auto；

2.3 图标盒子里面图片，宽高100%；

2.4 文字盒子以及文字，里面还，就font-size，颜色，没其他的了

3，四格布局，外层盒子无宽无高，有内边距

3.1 里面a标签，display：block；width48%，左浮动，有内外边距

3.2图片盒子，宽度100%，高度自动，文字都是rem

3.3里面图片，宽度100%；高度自动

4，三等分排列
外面盒子都是无宽无高，只有内边距

4.1 里面每个a标签，width：33.33%；左浮动

4.2 里面图片盒子，高度自动，宽度100%

4.3，里面图片，宽度100%,高度自动

5，流式布局，外面盒子无宽无高，有内边距

5.1

5.2

5.3 总结起来就是，最外层大盒子宽高100%

,再里一层也可以是宽高100%,以及一些，overflow-X：hidden；overflow-Y：auto；

再里面一级盒子不设宽高，

再里面一级盒子包裹的元素，宽度50%，左浮动