一、今日学习内容
1、Web移动端流式布局和flex布局
介绍了浏览器现状、手机屏幕现状、移动端调试方法。
2、背景缩放background-size：背景图片的宽度 背景图片的高度；
可用像素值或者cover、contain
3、视口
概念：视口就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
可分为：布局视口（Layout viewport）、视觉视口（Visual viewport）、理想视口（Ideal viewport）
4、meta标签
可设置width viewport的宽度。可设置device-width的特殊值
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否缩放，yes或者no（1或0）
5、移动端开发选择及技术方案
5.1 移动端常见布局
（1）流式布局
概念：百分比布局，也叫做非固定像素布局
（2）flex布局
了解了flex布局原理：
1.flex意思是弹性布局，任何一个盒子都可以指定为flex
2.给父级盒子指定了flex布局后，子元素里面的float、clear和vertical-align属性都将失效。
3.采用Flex布局的元素，称为Flex容器（flex container）简称“容器”，它的所有的子元素自动成为容器成员，叫做Flex项目（flex item）。
flex布局父项常见属性
（1）flex-direction：设置主轴方向
属性值有：
row 沿X轴从左到右进行排列；
row-reverse：沿X轴从右到左进行排列；
column:沿Y轴从上到下进行排列
column-reverse：沿Y轴从下到上进行排列
（2）justify-content：设置主轴上的子元素排列方式
属性值：
flex-start：默认值，从头开始，由主轴从左到右排列；
flex-end：沿主轴从右到左排列：
center：在主轴上进行居中对齐；
space-around：所有子元素平分剩余空间；
space-between；先让两侧盒子贴边，然后平分其余空间
（3）flex-wrap设置子元素是否换行
属性值：
nowrap不换行（默认值）
wrap 换行
（4）align-items 设置侧轴子元素排列方式（单行）
属性值：
flex-start：默认值，从头开始
flex-end：从尾部开始
center：居中显示；
stretch：拉伸
（5）align-content：设置侧轴上子元素排列方式（多行）
属性值有：
flex-start：默认值，从头开始
flex-end：从尾部开始
center：居中显示；
space-around：所有子元素平分剩余空间；
space-between；先让两侧盒子贴边，然后平分其余空间
stretch：拉伸
（6）flex-flow符合属性
语法：flex-flow：column wrap；
flex布局子项常见属性
（1）align-self：控制子项自己在侧轴的排列方式
属性值有：
auto（默认值，继承父元素align-items）；
flex-start：默认值，从头开始；
flex-end：从尾部开始；
center：居中显示；
stretch：拉伸；
order属性定义项目的排列顺序，数值越小排位越靠前，默认0，可设置负值
flex可控制子项占的份数
二、今日问题
今日未遇到问题
|
