移动端笔记
移动端和PC端的区别
1.PC端
1.定版心
2.页面中的元素宽和高，几乎都是使用PX单位！！定死了大小。
2.移动端
1.不会定版心
2.元素的大小很少使用PX单位，都会使用相对长度单位，如：百分比单位、rm、vm、vh，使其屏幕越大，元素越大。
理想视口
和布局视口的区别代码
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximun-scale=1,minimun-scale=1,user-scalable=no">
- name 告诉meta标签 要设置什么地方 viewport 视口。
- width=device-width:视口的宽=屏幕的宽。
- initial-scale=1.0：缩放的倍数。
- maximun-scale=1:允许的最大缩放倍数。
- minimun-scale=1：允许缩放的最小倍数。
- user-scalable：是否允许缩放；no：不允许缩放。
flex布局/弹性布局
特点
1.是一种浏览器提倡的布局模型 。
2.布局网页更简单、灵活 。
3.避免浮动脱标的问题。
flex的使用以及情况
-
display:flex : 使父盒子变成flex盒子(在父元素添加flex)，简写：df。
-
父元素中的子元素会发生改变(注：只有子元素发生改变，孙子级不会变化)：
（1）设置了flex的盒子 我们称之为“父项”。
（2）盒子里面的子元素 我们称之为“子项”。
-
具体变化：
（1） 子项不再区分块级元素和行内元素、行内块元素,全部都可以设置宽高
（2） 子项
1.宽度：由内容撑开（默认值）
2.高度：等于父项的高度（默认值）
3.只有浮动没有效果,使用定位、margin、transform有效。
-
默认情况下子项的宽就算大于父项也不会进行换行！！！只会进行压缩自身的宽度。
-
换行flex-wrap 属性值：nowrap 默认值，不换行；wrap：换行（父元素添加）。
-
flex：1；设置子项的宽度平均分配剩余空间。
主轴对齐方式
1.在父项里添加justify-content
（1）flex-start（左对齐）
（2）flex-end（右对齐）
（3）center（居中）
（4）space-between（简写sb）两侧紧靠边框，剩余子项平分中间空余部分，中间间隔相等。
（5）space-around（简写sd）两侧子项和边框之间有间隔，可以看做每个子项都有外边距，子项之间的间距为两个子项外边距之和，造成两侧的间距比中间间隔的间距小一半。
（6）space-evenly（简写sv）绝对平均，两侧有间距，并且所有间距完全相等。
侧轴对齐方式（Y轴）
1.align-items（单行）
align-items属性适用于单行的flex容器。
（1）center：侧轴居中排列（两行子项盒子存在间隔）
（2）stretch：默认值，弹性盒子沿着主轴线被拉伸至铺满容器（即height）
（3）flex-start：从起点开始依次排列
（4）flex-end：从终点开始依次排列
2.align-content（多行）
align-content属性只适用于多行的flex容器，对单行的flex容器无效，父项必须设置有换行属性。（添加至父项）
（1） flex-end：元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的 侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
（2）flex-start：元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧 轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
（3）center：元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性 盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内 容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距 离。）
（4）space-between：元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余 的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边 界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内 容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
（5）space-around：元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均 分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一 行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的 空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
（6）space-evenly：平均分布，所有间距相等。
3.align-self（子项）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到子项）
（1）center：侧轴居中排列
（2）stretch：默认值，弹性盒子沿着主轴线被拉伸至铺满容器（即height）
（3）flex-start：从起点开始依次排列
（4）flex-end：从终点开始依次排列
修改主轴方向
1.flex-direction（设置主轴方向）
（1）row：默认从左到右
（2）row-reverse：从右到左
（3）column：上到下（常用）
（4）column-reverse：从下到上
\
