百分比布局
目标
- 了解百分比布局方案
学习内容
-
特点
-
流式布局
-
宽度自适应，高度固定
-
-
布局方式
- 宽度为百分比写法
FLex布局
目标
- 使用Flex布局模型完成网页基本布局效果
学习内容
-
Flex的优势和特点
-
浏览器提倡的布局模型，页面渲染性能高
-
布局简单、方便
-
避免浮动脱标的问题
-
兼容性较高（不兼容低版本浏览器）
- 主要用于移动端（不会有兼容性问题）
-
-
组成部分
-
弹性容器（父级， 添加display:flex的盒子）
-
弹性盒子（子级）
-
主轴（默认水平）
-
侧轴（默认垂直）
-
-
主侧轴对齐方式
-
主轴
-
justify-content
-
center：居中
-
space-between：间距出现在弹性盒子之间
- 较为常用 （jcsb）
-
space-evenly：父子级间距都相同
-
space-around：间距出现在弹性盒子两侧
- 视觉效果: 子级之间的间距是父级左右两侧间距的2倍
-
-
-
侧轴
-
align-items（控制所有弹性盒子）
-
center：居中
- 较为常用（aic）
-
stretch：默认值， 拉伸
-
-
align-self（控制某个弹性盒子）
-
-
-
弹性伸缩比
-
flex: 整数数字;
-
占用父级剩余尺寸的份数
-
案例
购物订单案例
结构：1用户信息模块2商品信息模块3项目模块4底部
用户信息模块 用3个盒子构建 左边location 中间info右边插入字体图标结合弹性布局df
商品信息模块 一个大盒子包两个小盒子 左侧插入图片并设置样式 右侧书写文字 注意盒子嵌套关系
项目模块 ul包li li包a a包spant以及input
底部一左一右两个盒子
运用到的知识点： 1df 灵活布局
2侧轴居中aic
3主轴对齐方式设置两端对齐jcsb
4渐变bgi: linear-gradient
5文字居中tac
6画圆border-radius
7外边距margin
8限制显示的行数（可以上网搜索代码）
9 脱离标准流的元素默认宽度由内容撑开，要重新设置宽高
10盒子阴影box-shadow
