1、flex弹性盒模型
在父容器中添加display:flex;把父容器变为弹性盒模型
作用(写)在flex容器上 作用(写)在flex子项上
flex-direction order
flex-wrap flex-grow
flex-flow flex-shrink
justify-content flex-basis
align-items flex
align-content align-self
*快速写子类的方法：
div.parent>div.box按下tab：
<div class="parent">
<div class="box"></div>
</div>
1、作用在flex容器上的属性：
1、flex-direction:
用来控制子项整体布局方向的，是从左往右还是从右往左，是从上往下还是从下往上。
取值:
row:默认值，显示为行，默认方向为当前文档水平流方向，默认情况下是从左往右
row-reverse：显示为杭，但是方向与row属性值相反
column：显示为列
column-reverse：显示为列，方向与column属性值相反
2、flex-wrap：
用来控制子项整体单行显示还是换行显示
取值：
nowrap：默认值，表示单行显示，不换行
wrap：宽度不足换行显示
wrap-reverse：宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面
注：子元素不会轻易溢出，而是在无法自动调节大小适应父容器后才溢出。
3、flew-flow
flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性，第一个值表示方向，第二个值表示换行，中间用空格隔开。
4、justify-content(针对主轴)
决定了主轴方向上所有子项的对齐和分布方式。
取值：
flex-start：默认值，表现为其实位置对齐
flex-end：表现为结束位置对齐
center：表现为居中对齐
space-between：表现为两端对齐，between是中间的意思，意思是多余的空白间距只在元素中间区域分配
space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly：evenly是匀称、平等的意思，也就是视觉上，每个flex子向两侧的空白间距完全相等。
5、align-items(在侧轴方向上操作子容器)
align-items中的items指的就是flex子项们当中的元素，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
取值：
stretch：默认值，flex子项拉伸
flex-start：表现为容器顶部对齐
flex-end：表现为容器底部对齐
center：表现为垂直居中对齐
*flex-wrap：wrap；造成的换行会使父容器平均分配（换了多少行就分几份），这就解释了为何换行后两行间距这么大，这是因为，换行后容器分成几份，容器间挨着，容器里面的元素未填满时，乍一看两容器内，元素的间隔很大，其实两容器本身是挨着的
6、align-content(针对侧轴)
决定了侧轴方向上所有子项的对齐和分布方式。
align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项中只有一行，则align-content属性是没有任何效果的
取值：
stretch：默认值，每一行flex元素都等比例拉伸，例如，如果共两行flex元素，则每一行拉伸高度是50%
flex-start：默认值，表现为起始位置对齐
flex-end：表现为结束位置对齐
center：表现为居中对齐
space-between：表现为两端对齐，between是中间的意思，意思是多余的空白间距只在元素中间区域分配
space-around：每一行元素上下都享有独立不重复的空白空间。
space-evenly：每一行元素都完全上下等分
*关于主轴、侧轴，比如在一个长方形盒子中，主轴类似于x轴，从左到右，起点在左（start），终点在右（end）
侧轴类似于Y轴，不过是从上到下，起点在上（start），终点在下（end）。
justify-content(针对主轴上各子容器的分布)
align-content(针对侧轴上各子容器的分布)
2、作用在flex子项上的属性
作用(写)在flex子项上
order：通过设置order改变某一个flex子项的排序位置，所有flex子项的默认order属性值为0(即全部元素都为0，元素按order值从左到右，由小到大排列)
flex-grow：扩展就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余空白间隙，默认值为0(整个空余空间总大小为1，大于1时，比如一个值为1，一个为2则剩余空间分三份)
flex-shrink：shrink是收缩的意思，flex-shrink主要处理当flex容器空间不足时，单个元素的搜索比例，默认值是1(0表示不收缩)
flex-basis：定义了在分配剩余空间之前元素的默认大小(有空白空间时给的是确定值，没剩余空间时，由于优先级问题，不能按达到预期的大小)，当与width一起写时，优先级高。
flex：flex属性是flex-grow、flex-shrink和flex-basis的缩写,默认值： flex:0 1 auto;（顺序与左边一一对应）
注：flex：1;比flex-grow;优先级高，前者可以覆盖默认宽度，后者不行。
align-self(针对侧轴，align-items是针对多个子项，该属性针对某个具体某某个子项，除此之外功能完全一样)：
属性值默认为center(居中)，指控制单独某一个flex子项的垂直对齐方式,属性值与align-items相同
2、Grid网格布局
在父容器中添加display:grid;把父容器变为网格模型
Grid布局死一个二维的布局方法，纵横两个方向总是同时存在的
作用(写)在grid容器上 作用子啊grid子项上
grid-template-columns grid-column-start
grid-template-rows grid-column-end
grid-template-ares grid-row-start
grid-template grid-row-end
grid-column-gap grid-column
grid-row-gap grid-row
grid-gap grid-area
justify-items justify-self
align-items align-self
place-items place-self
justify-content
align-content
place-content
*创建12个div，内容分别为1~12：div{$}*12
1、作用在grid容器上的属性
1、 grid-template-columns 与 grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应及fr单位（网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。
创建三行，四列的网格：
grid-template-rows: 100px auto 25%;
grid-template-columns: 100px 100px 200px 100px;
fr分配剩余空间：
均分为三行三列：
grid-template-rows: 1fr 1fr 1fr;（fr的值累加后大于1才撑满剩余空间，与flex-grow的值类似）
grid-template-columns: 1fr 1fr 1fr;
值使用repeat表示（横纵较多且相同的简写方式）
repeat(3,1fr)：表示三个大小为1fr的行/列
2、grid-template-ares和grid-template
area是区域的意思，grid-template-area就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于哪个区.(区域划分不能形成特殊图形)
grid-template是以上三个属性的复合写法
分开写法：
grid-template-rows: repeat(3,1fr);
grid-template-columns:repeat(3,1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
复合写法：（比较麻烦）
grid-template:
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr;
3、grid-column-gap和grid-row-gap
这两个属性使用来定义网格中网格间隙的尺寸。
CSS grid-gap属性是该两个属性的复合写法。 grid-gap: 20px 20px;第一个表示横向，第二个为纵向
4、justify-items和align-items
justify-items指定了网格元素的水平(主轴)呈现方式，是水平拉伸显示，还是左中右对齐。align-items制定了网格元素的垂直(侧轴)呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items是这两个属性的复合写法。
place-items: center start;注意顺序，第一个针对纵向，第二个针对水平
取值：
stretch：默认值，拉伸。表现水平或垂直填充
start：表现为容器左侧或顶部对齐(即主轴或侧轴的起点)
end：表现为容器右侧或底部对齐(即主轴或侧轴的终点)
center：表现为水平或垂直居中对齐。
5、justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content是这两种属性的复合写法。
place-content: center start;同样值的顺序为纵横
取值：
stretch：默认值，拉伸，表现为水平或者垂直填充
start：表现为容器左侧或顶部对齐
end：表现为容器右侧或底部对齐
center：表现为水平或垂直居中对齐。
space-between：表现为两端对齐
space-around：享有独立不重叠打的空白空间
space-evenly：平均分配空白空间
*justify-content与justify-items的区别(务必弄清楚区别)
justify-content针对的是整个网格在容器内的排列。
justify-items针对的是每个网格里面元素的排列。
2、作用在grid子项上的属性
1、grid-column-start表示子项起始纵线是那一条， grid-column-end表示的是子项结束纵线是哪一条
定义网格是每一条线都是有序号的，横线，从上往下从1开始；纵线从左往右，从1开始
grid-column-start: 2;
grid-column-end: 3;(定义子项容器区域为第二条纵线到第三条纵线)
*简写grid-column：2/3;斜线前表示起始位置，斜线后表示结束为止
2、grid-row-start表示子项起始的横线是那一条， grid-row-end表示的是子项结束横线是哪一条
grid-row-start: 2;
grid-row-end: 3;(定义子项容器区域为第二条横线到第三条横线)
grid-row-end: span 2;（span表示结束地方占两个网格）
*简写grid-row：2/3;或者grid-row：2/span 3;斜线前表示起始位置，斜线后表示结束为止
3、grid-area：表示当前网格所占的区域，有名字和位置两种表示方法。
位置表示法： grid-area: 3/2/4/4;分别表示，横线起始位置、纵线起始位置、横线结束位置、纵线结束位置。
4、justify-self：针对单个网格元素的水平(主轴)对齐方式；align-self：单个网格元素的垂直(侧轴)对齐方式
复合写法： place-self: start end;值的顺序为纵横
3、移动端模拟器
切换平台之后一定要重新刷新浏览器
4、去访问一些网站的PC端和移动端
大一点的公司都是分开开发的，PC端一套代码，移动端一套代码
访问淘宝-->后端检测当前设备->如果是PC端->www.taobao.com
访问淘宝-->后端检测当前设备->如果是移动端->www.taobao.com重定向->h5.m.taobao.com
5、viewport视口？
在移动端viewport视口就是浏览器显示页面内容的屏幕区域，在viewport中有两种视口，分别表示为，visual viewport（可视视口）和layout viewport（布局视口）
visual viewport大小固定跟屏幕大小相同，在上面，而Layout viewport可改变大小，在下面。Layout viewport默认大小为980像素，可通过document.documentElement.clientWidth获取
现代王爷需要将layout viewport设置成visual viewport等同的大小，方便进行网页制作。
viewport设置成
通过<meta>标签进行设置，name属性指定viewport的值，content属性进行视口配置。
取值：
width：设置layout viewport的宽度特定值，deice-width表示设备宽
height：设置layout-viewport的高度特定值，一般不进行设置
initial-scale：设置页面的初始缩放
minimum-scale：设置页面的最小缩放
maximum-scale：设置页面的最大缩放
user-scalable：设置页面是否可以进行缩放（应禁止no）
例如：做移动端网页时一定要加下面这句代码
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
6、移动端的适配方案
1、百分比布局，也叫流式布局(随着屏幕的变大，容器间的间隔会变大)。代表网站：优酷、百度、天猫、腾讯。
好处：大屏幕下显示更多的内容；
坏处：宽屏比例下会有一点不协调
2、等比缩放布局，也叫作rem布局(随着屏幕的变大，容器间的间隔不会变)。代表网站：网页、爱奇艺、淘宝、美团。
rem布局：
单位：
em：是一个相对的单位，1em等于当前元素或者父元素的font-size值
rem：是一个相对单位，1rem等于根元素的font-size值
vw/vh：把屏幕分成100份，1vw等于屏幕宽的1%
动态设置font-size的值：
通过JS
通过vw：
vw:把屏幕分成100份，屏幕宽等于100vw
iphone 375 则1vw->3.75
iphone plus 414 则1vw->4.14
如果在iphone下想得到100px，则应该设置多少个vw呢？(100/3.75)
有插件可以解决px到rem的换算问题
注：使用rem布局时要给body重置一下font-size：16px;否则字体会过大
例子：先添加如下样式：
html{font-size: 26.66667vw;}
body{font-size: 16px;}
在通过插件设置每1rem=100px（对应的尺寸）
再选中相关样式：alt+z把其中的px单位转化为rem单位