流式布局
视口
移动端开发的宽度范围一般在320px~750px之间。
viewport
目的：通过在html文件里面，利用mate标签来实现理想视口的设置，是为了能够在开发当中可以匹配移动端不同宽度的显示。
理想的移动端视口一般为以下的几点
-
1、视口宽度：宽度=视口宽度
- width=device-width
-
2.初始缩放
- initial-scale=1.0
-
3、最大缩放比
- maximum-scale=1.0
-
4、最小缩放比
- minimum-scale=1.0
-
5、是否允许用户缩放
- 禁止用户缩放：user-scalable=no
- 允许用户缩放：user-scalable=yes
二倍图
- 目的：是为了能够让高分辨率的图片不会产生失真和模糊。
flex布局
百分比布局，也叫流式布局
效果：宽度为自适应100%，高度固定
目的：能够让多行多列的版块进行灵活，快速的布局
特点：
- 1、脱离标准流，不占据位置，但是避免 像浮动那样的脱标问题。
- 2、页面布局更为快速，简单
- 3、是一种浏览器提倡的布局模型，更为适合结构性布局
- 4、添加了flex布局后，子元素的显示方式会变成块级元素，可以设置宽高。
使用方式
- 给需要设置flex布局的父元素，添加display：flex，里面的子元素可以自动挤压或者拉伸到合适的位置和间隙，不需要通过计算和多次添加边距的方式来进行页面布局
4个组成部分
-
弹性容器
-
弹性盒子
-
主轴（水平方向上的，从左到右）
-
6种布局方式
-
1.居中对齐 jcc
- justify-content: center;
-
2.从开始端对齐（左对齐） jcs
- justify-content: start;
- 默认值
-
3.从结束端对齐（右对齐） jce
- justify-content: end;
-
4.两端对齐 jcsb
- justify-content: space-between;
-
5.环绕水平对齐
- justify-content: space-around;
-
6.平均水平对齐 jcev
- justify-content: space-evenly;
-
-
-
側轴（垂直方向上的，从上往下）
-
设置给--弹性容器的 3种对齐方式
-
1.从开始端对齐（顶端对齐） ais
- align-items: flex-start;
-
2.垂直居中对齐 aic
- align-items: center;
-
3.从结束端对齐（底部对齐） aie
- align-items: flex-end;
-
-
设置给--弹性盒子 控制某个弹性盒子在側轴的对齐方式
- 默认值：从起点开始列（左对齐）：：align-self：flex-start
- 从终点开始排列（右对齐）：align-self：flex-end
- 沿着側轴居中排列（水平对齐）align-self：center
- 默认值，弹性盒子沿着主轴线被拉伸整个弹性容器的高度：align-self：stretch
-
伸缩比
-
是给弹性容器里的弹性盒子谈添加伸缩比（例如蛋糕的切法）
-
1.当每个子盒子的需求一样时
- 统一给子盒子的css样式添加flex=1即可
-
2、当每个子盒子的需求不一样时。如两端固定，中间随着拉伸也变化（例如京东的搜索导航栏）
-
两端左右子盒子设置样式： style=“flex：width=100px”
- 两端的子盒子宽度固定不会由屏幕的拉伸而变化
-
中间搜素框子盒子添加样式： style=”flex=1“
- 中间子盒子的宽度为剩下容器的宽度，会由屏幕的拉伸而变化
-
注意点：开发设置移动的底部footer时，会因使用固定定位而导致其脱离标准流，从而看不到最下面的正文内容，解决办法实施有2个步骤
-
1、固定定位:position:fixed，定在页面的最底部，left为0，bottom为0。
- 此时，固定定位脱离标准流，不占位置，当页面前面的内容比较多的时候，就会挡住前面的内容，这里进行第2步操作。
-
2、给body设置bottom-padding：给整个页面的底部内边添加一定的高度（比底部的高度高出10px左右）
- 为了更好地让整个页面信息全部都能被看见，设置底部的更高内边距，让最下面的页面正文内容也能拉上去被用户浏览。
XMind - Trial Version
