移动Web第三天

了解移动端与PC端屏幕和网页布局的差异，能够使用flex布局模型布局移动端网页

百分比布局

特点

• 流式布局
• 宽度自适应，高度固定

布局方式

• 宽度为百分比写法

flex布局

特点和优势

• 浏览器提倡的布局模型，页面渲染性能高
• 布局简单，方便
• 避免浮动拖标的问题
• 兼容性高（不兼容低版本浏览器）

组成部分

• 弹性容器（父级，添加display:flex的盒子）
• 弹性盒子（子级）
• 主轴（默认水平方向）
• 侧轴（默认垂直方向）

主轴

• justify-content

  • centent:居中

  • space-between:间距出现在弹性盒子之间

  • space-evenly:父子级间距都相等

  • space-around:间距出现在弹性盒子两侧

    • 视觉效果：子级之间的间距是父级左右两侧间距的2倍

侧轴

• align-self:控制某个弹性盒子

弹性伸缩比

• flex:整数数字
• 占用父级剩余尺寸的份数