百分比布局
- 移动端与PC端不同
- pc端可以设置具体数值
- 而移动端的整体为整个body（所以比较适用百分比布局）
FLex布局
学习内容
-
Flex的优势和特点
- 浏览器提倡的布局模型，页面渲染性能高
- 布局简单、方便
- 避免浮动脱标的问题
- 兼容性较高（不兼容低版本浏览器）
-
组成部分
- 弹性容器（父级， 添加display:flex的盒子）
- 弹性盒子（子级）
- 主轴（默认水平）
- 侧轴（默认垂直）
-
主侧轴对齐方式
-
主轴
-
justify-content
-
center：居中
-
space-between：间距出现在弹性盒子之间
-
space-evenly：父子级间距都相同
-
space-around：间距出现在弹性盒子两侧
- 视觉效果: 子级之间的间距是父级左右两侧间距的2倍
-
-
-
侧轴
-
align-items（控制所有弹性盒子）
- center：居中
- stretch：默认值， 拉伸
-
-
align-self（控制某个弹性盒子）
-
-
弹性伸缩比
- flex: 整数数字;【都设置1为平分父元素剩余尺寸】
- 占用父级剩余尺寸的份数
