第七章
1、flex弹性布局？
注：以下属性针对父容器
(1)flex-direction
用来控制子项整体布局方向，是从左向右还是从右向左，是从上向下还是从下向上
取值 含义
row 默认值，显示为行，方向为当前文档水平流方向，即从左往右
row-reverse 显示为行，但方向和row属性值是反的
colume 显示为列
colume-reverse 显示为列，但方向和row属性值是反的
(2)flex-warap
用来控制子项整体单行显示还是换行显示
取值 含义
nowrap 默认值，表示单行显示，不换行，适配显示
warap 宽度不足换行显示
warap-reverse 宽度不足换行显示，但是从下往上开始，也就是原本换行在下面的子项现在跑到上面
（3）flex-flow
flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开
（4）justify-content
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 表现为容器底部对齐
cente 表现为垂直居中对齐
（6）align-content
align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的
注：对多行的对齐方式
取值 含义
stretch 默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。
flex-start 表现为起始位置对齐
flex-end 表现为结束位置对齐
center 表现为居中对齐
space-between 表现为两端对齐
space-around 每一行元素上下都享有独立不重叠的空白空间
space-evenly 每一行元素都完全上下等分
2、作用在flex子项上的CSS属性
取值 含义
order 可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0
flex-grow 属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0
flex-shrink 属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。
flex-basis flex-basis定义了在分配剩余空间之前元素的默认大小
flex flex属性是flex-grow，flex-shrink和flex-basis的缩写 中间空格隔开
align-self align-self指控制单独某一个flex子项的垂直对齐方式（flex-start、flex-end、center）
3、grid网格布局？
注：以下是作用到grid父容器上
(1)grid-template-rows(行)和grid-template-columns（列）
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。
(2）grid-template-areas和grid-template
area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写（不建议用，不好理解）
（3）
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸，单位：px
CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。
(4)
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中(注：第一个值：align-items垂直 第二个值：justify-items水平)。
取值 含义
stretch 默认值，拉伸。表现为水平或垂直填充
start 表现为容器左侧或顶部对齐
end 表现为容器右侧或底部对齐
center 表现为水平或垂直居中对齐
(5)
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中(注：第一个值：align-items垂直 第二个值：justify-items水平)。。
取值 含义
stretch 默认值，拉伸。表现为水平或垂直填充
start 表现为容器左侧或顶部对齐
end 表现为容器右侧或底部对齐
center 表现为水平或垂直居中对齐
space-between 表现为两端对齐
space-around 享有独立不重叠的空白空间
space-evenly 平均分配空白空间
3、作用在grid子项上的CSS属性
取值 含义
grid-column-start 水平方向上的占据的起始位置
grid-column-end 水平方向上占据的结束位置，（span属性）
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置（span属性）
grid-column grid-column-start + grid-column-end的缩写（起始和结束用“/”隔开）
grid-row grid-row-start + grid-row-end的缩写
grid-area 表示当前网格所占用的区域，名字和位置两种表示方法(第一个值是水平起始位置，第二个值是垂直起始位置，第三个值是水平结束位置，第四个值是垂直结束为止。中间“/”隔开)
justify-self 单个网格元素的水平对齐方式
align-self 单个网格元素的垂直对齐方式
place-self align-self和justify-self的缩写
4. 移动端模拟器？
切换平台之后，一定要重新刷新浏览器。
5. 去访问一些网站的PC端和移动端？
大一点的网站都是分开开发的，PC端一套代码，移动端端一套代码。
访问淘宝网 -> 后端检测当前设备 -> 如果是PC端 -> www.taobao.com
访问淘宝网 -> 后端检测当前设备 -> 如果是移动端 -> www.taobao.com重定向 -> h5.m.taobao.com
6. 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的宽度特定值，device-width表示设备宽。
height 设置layout viewport的高度特定值，一般不进行设置。
initial-scale 设置页面的初始缩放。
mim-imum-scale 设置页面的最小缩放
maximum-scale 设置页面的最大缩放
usre-scalable 设置页面能否进行缩放
7、rem布局
动态设置font-size：通过js和通过vw
注：要给body重置一下font-size:16px
8、响应式布局
@media (not) all and （min-width:/max-width:）{}宽度
@media (not) all and （orientation:portrait）{}竖屏
@media (not) all and （orientation:landscape）{}横屏
<link rel="stylesheet" href="base.css1" media="all an (orientation:portrait)">
<link rel="stylesheet" href="base2.css" media="all and (min-width:600px)">
