(一)flex弹性盒布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
1). flex父容器样式
[1]. lex-direction
flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
[2]. flex-wrap
flex-wrap用来控制子项整体单行显示还是换行显示。
默认是如果子容器即使设置宽的情况下，所有子容器整体内容没有超出行的宽度，是会自适应的平分正行，如果内容超出行的宽度，内容是会溢出，无论是否查过行的宽度，都不会换行显示
[3]. flex-flow
flex-flow属性时flex-direction和flex-wrap的缩写，表示flex布局的flow流动性。第一个值表示方向，第二个值表示换行，中间用空格隔开。
[4]. justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式。
[5]. align-items
align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
默认情况下子项是填充整个父容器，而不是根据内容占据相应的大小。
取值为flex-start、flex-end、center、，就会根据子容器内容占据相应的大小,并体现出相应的样式。
[6]. align-content
align-content可以看成是justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性时没有任何效果的。
2). flex子容器样式
[1].order
可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0。
[2].flex-grow
属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是去除元素外的剩余的空白间隙。默认值是0，当取值为1时就将所有空白空间都占据。
当多个子元素的flex-grow的值大于1，则会将空白空间按比例进行分配。
[3].flex-shrink
属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1，0表示不收缩。
[4].flex-basis
flex-basis定义了在分配剩余空间之前元素的默认大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
[5].flex
flex属性是flex-grow，flex-shrink和flex-basis的缩写。默认值为0 1 auto。后两个属性可选。也可以写成百分比。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
[6].align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
(二)Grid网格布局
Grid布局是一个二维的布局方法， 纵横两个方向总是同时存在。
1).Grid父容器样式
[1]. grid-template-columns和grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)
有时候，我们网格的划分是很规律的，如果需要添加多个纵横网格时，可以利用repeat()语法进行简化操作
grid-template-rows/columns: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
grid-colunn-gap和grid-row-gap属性时用来定义网格中网格间隙的尺寸。
CSS grid-gap是grid-columv-gap和grip-row-gap属性的缩写
[4]. justify-items和align-items
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。
align-items指定了网格元素的崔志呈现方式，是垂直拉伸显示，还是上中下对齐
place-items可以让align-items和justify-items属性写在单个声明中
当设置除了stretch的值外，其他取值会根据子元素中的内容将容器撑开。
[5]. justify-content和align-content
justify-content指定了网格元素的水平分布方式。
align-content指定了网格元素的垂直分布方式。
place-content可以让align-content和justify-content属性卸载一个CSS声明中。
当设置除了stretch的值外，其他取值会根据子元素中的内容将容器撑开。
2).Grid子容器样式
[1]. grid-column-start和grid-column-end和grid-row-start和grid-row-end
grid-column-start:2;
grid-column-end:3;
grid-row-start:2;
gird-row-end:4;
grid-row-end:span 2 表示垂直方向上占据2个单元格的位置
grid-row:start / end 或者 grid-row:start / span number
[2]. grid-area
方式1：
grid-area:水平的起始位置 / 垂直的起始位置 / 水平的结束位置 / 垂直的结束位置
方式2：
在父容器中，将一个3*3的网格进行命名，横向和纵向中间的那个命名为a5
grid-template-areas:
“a1 a2 a3”
“a4 a5 a6”
“a7 a8 a9”
在子容器中直接用
grid-area:a5 就代表横向和纵向中间的那个元素
[3]. justify-self和align-self
(三)viewport视口
-
在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口，分别表示为，visual viewport(可视视口)和layout viewport(布局视口。)
-
visual viewport固定大小跟屏幕大小相同，在上面，而layout viewport可变大小，在下面。layout viewport默认大小为980像素，可通过document.documentElemet.clientWidth获取。
-
现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。
-
通过<meta>标签进行设置，name属性指定viewport值，content属性进行视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0，user-scalable = no"> user-scalable:是否允许用户进行缩放
(四)移动端的适配方案
[1]. 百分比布局(流式布局)
代表网站：优酷、百度、天猫、腾讯
1). 流式布局原则
- 好处：大屏幕下显示更多的内容
- 坏处：宽屏下比例会有些不协调
[2]. 等比缩放布局(rem布局)
代表网站：网易、爱奇艺、淘宝、美团
可以在vs code中添加工具：px to rem，先设置，再要转换的值后面按住 alt + z 即可实现一个的转换，选中全部要转换的css样式，按住alt + z
1). 单位
- em:是一个相对单位，1em等于当前元素或父元素的font-size值。
- rem(root em):是一个相对单位，1rem等于根元素的font-size值。
- vw / vh:吧屏幕氛围100份，1vw等于屏幕宽度的1%。
- rem相对于html元素的font-size
2). 动态设置font-size:
-
通过js
//以一个设备作为基准设备，比如 iphone6 ： 375 var fontsize = document.documentElement.clientWidth / 3.75; document.documentElement.style.fontSize = fontsize + “px”; -
通过vw
- iphone 的屏幕是375 1vw = 3.75
- iphone的屏幕是14 1vw = 4.14
- 屏幕是375的iphone ,100px是26.66666667vw，所以html{font-size: 26.66666667vw}
- 26.666666667vw = 100px / 3.75
- 元素的使用单位还是rem
-
注：动态设置font-size的时候，要给body重置一下font-size:16px
[3].响应式布局
1).媒体查询语法
- 利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。
- 先写正常的样式，然后再写响应式的样式
/*响应式条件，当屏幕的宽度大于500px时触发该样式*/
@media all and (min-width:500px){}
/*响应式条件，当屏幕的宽度大于500px并小于700px时触发该样式*/
@media all and (min-width:500px) and (max-width:700px){}
/*响应式条件，当屏幕的宽度小于500px时触发该样式*/
@media not all and (min-width:500px) {}
/*响应式条件，横屏时触发样式*/
@media all and (orientation:portrait) {}
/*响应式条件，纵屏时触发样式*/
@media all and(orientation:landscape) {}
/*响应式条件，当屏幕大于400px时引入base.css文件*/
<link rel=”stylesheet” href=”base.css” media=”all and (min-width:400px)”>
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
