百分比布局

• 目标

  • 了解百分比布局方案

• 学习内容

  • 特点

    • 流式布局

    • 宽度自适应，高度固定

  • 布局方式

    • 宽度为半分比写法

 

FLex布局

• 目标

  • 使用Flex布局模型完成网页基本布局效果

Flex的优势和特点

• 浏览器提倡的布局模型，页面渲染性能高

• 布局简单、方便

• 避免浮动脱标的问题

• 兼容性较高（不兼容低版本浏览器）

 

组成部分

• 弹性容器（父级， 添加display:flex的盒子）

• 弹性盒子（子级）

• 主轴（默认水平）

• 侧轴（默认垂直）

 

主侧轴对齐方式

主轴：justify-content

• center：居中

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

• space-evenly：父子级间距都相同

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

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

 

侧轴：align-items（控制所有弹性盒子）

• center：居中

• stretch：默认值， 拉伸

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

 

弹性伸缩比

• flex: 整数数字;

• 占用父级剩余尺寸的份数

•