移动端页面布局

两端固定中间自适应（双飞翼和圣杯布局）

核心：定位和浮动，还有padding和margin的搭配使用

html结构

html结构

页面呈现

页面呈现

1.给父盒子设置弹性盒模型，两端固定宽高，中间给flex为1

css代码

2.父盒子设置定位，左右盒子设置绝对定位，中间的盒子给margin值，高度100%

3.左右盒子浮动，中间的盒子给margin撑开

重点重点：需要把结构该一下，右边的盒子写在中间盒子前面，浮动只会影响后面的盒子

html代码改写

css代码部分

上端固定下端自适应

1.上端固定定位，下端给高度100%，再给下面的盒子加一个padding值

2.给父盒子一个弹性盒模型，上面固定宽高，下端盒子设置flex为1

3.给下面的盒子一个定位，特殊定位方式

4.使用calc计算，但是有兼容性问题，某些华为的手机的浏览器可能有兼容性的问题

左端固定，右端自适应

1.左边浮动，右边给margin值（浮动只会对后面一个盒子产生影响）

2.弹性盒模型

3.calc计算出盒子宽度（兼容性问题）

4.左侧盒子设置定位，右侧盒子给margin挤开

5.给右边的盒子设置特殊定位