1.Flex弹性盒模型
随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中。
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
作用在flex容器上 | 作用在flex子项上 |
---|---|
flex-direction | order |
flex-wrap | flex-grow |
flex-flow | flex-shrink |
justify-content | flex-basis |
align-items | flex |
align-ccontent | align-self |
2.flex-direction
flex-direction用来控制子项整体布局方向,是从左往右还是从右往左,是从上往下还是从下往上。
取值 | 含义 |
---|---|
row | 默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。 |
row-reverse | 显示为行。但方向和row属性值是反的 |
column | 显示为列 |
column-reverse | 显示为列。但方向和column属性值是反的 |
3.flex-wrap
flex-wrap用来控制子项整体单行显示还是换行显示。
取值 | 含义 |
---|---|
nowrap | 默认值,表示单行显示,不换行 |
wrap | 宽度不足换行显示 |
wrap-reverse | 宽度不足换行显示,但是是从下往上开始,也就是原本换行在下面的子项现在跑到上面。 |
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 | 表现为容器底部对齐。 |
center | 表现为垂直居中对齐。 |
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 | 每一行元素都完全上下等分。 |
align-items和align-content的区别
前者是一行中每一个子项的排列后者是多行之间的对其方式。
7.作用在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的优先级会高于默认宽度,如果想要保留默认宽度需使用flex-grow
8.Grid网格布局
Grid布局是一个二维的布局方法,纵横两个方向总是同时存在。
8.1 grid-template-columns和grid-template-rows
对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应以及fr单位(网格剩余空间比例单位)。
有时候,我们网格的划分是很规律的,如果需要添加多个横纵网格时,可以利用repeat()语法进行简化操作。
例:
grid-template-columns:1fr 1fr 1fr;//三行每行占1/3
grid-template-rows:100px auto 25%;//三列;第一列占100px,第二列自适应,第三列占剩下的25%。
8.2 grid-template-areas和grid-template
area是区域的意思,grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
写法为:
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
再将div调整为对应区域的数目,在div样式里
grid-area:a1;
grid-area:a2;
grid-area:a3;
grid-template是grid-template-rows,grid-template-columns和grid-template-areas属性的缩写。
符合写法:
grid-template:
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr;
8.3 grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。先写的是行,后写的是列
8.4 justify-items和align-items
justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐。align-items指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐。调整的是内容在网格内的排列
place-items可以让align-items和justify-items属性写在单个声明中。先写的为纵向,后写的为横向。
取值 | 含义 |
---|---|
stretch | 默认值,拉伸。表现为水平或垂直填充。 |
Start | 表现为容器左侧或顶部对齐。 |
end | 表现为容器右侧或底部对齐。 |
center | 表现为水平或垂直居中对齐。 |
8.4 justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。先写的为纵向,后写的为横向。调整的是网格在容器内的排列
取值 | 含义 |
---|---|
stretch | 默认值,拉伸。表现为水平或垂直填充。 |
start | 表现为容器左侧或顶部对齐。 |
end | 表现为容器右侧或底部对齐。 |
center | 表现为水平或垂直居中对齐。 |
space-between | 表现为两端对齐。 |
space-around | 享有独立不重叠的空白空间。 |
space-evenly | 平均分配空白空间 |
8.5 作用在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的缩写。 |
span属性:span + 占的网格数
grid-column和grid-row复合写法:start / end
grid-area中第一个值是水平起始位置,第二个值是垂直起始位置,第三个值是水平结束位置,第四个值是垂直结束位置,中间用斜杠隔开。
place-self:先写的为垂直方向,后写的为水平方向
9.移动端
9.1 移动端模拟器?
切换平台之后,一定要重新刷新浏览器。
9.2去访问一些网站的PC端和移动端?
大一点的网站都是分开开发的,PC端一套代码,移动端端一套代码。
访问淘宝网 -> 后端检测当前设备 -> 如果是PC端 -> www.taobao.com
访问淘宝网 -> 后端检测当前设备 -> 如果是移动端 -> www.taobao.com重定向 -> h5.m.taobao.com
9.3 viewport视口?
在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口,分别表示为, visual viewport(可视视口)和layout viewport(布局视口)。
visual viewport 固定大小跟屏幕大小相同,在上面,而layout viewport 可改变大小,在下面。Layout viewport默认大小为980像素,可通过document.documentElement.clientWidth获取。
现代网页需要将layout viewport设置成跟visual viewport等同大小,方便进行网页制作。
9.4 Viewport设置
通过标签进行设置,name属性指定viewport值,content属性进行视口配置。
取值 | 含义 |
---|---|
width | 设置layout viewport的宽度特定值,device-width表示设备宽。 |
height | 设置layout viewport的高度特定值,一般不进行设置。 |
initial-scale | 设置页面的初始缩放。 |
minimum-scale | 设置页面的最小缩放。 |
maximum-scale | 设置页面的最大缩放。 |
user-scalable | 设置页面能否进行缩放。 |
10. 移动端适配方案
1.百分比布局,也叫流式布局。代表网站:优酷、百度、天猫、腾讯。
2.等比缩放布局,也叫rem布局。代表网站:网易、爱奇艺、淘宝、美团。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y5EPAuWn-1618798912722)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201121140944464.png)]
流式布局原则
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukJwVq1o-1618798912724)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201121141036050.png)]
-
好处: 大屏幕下显示更多的内容。
-
坏处:宽屏下比例会有一些不协调。
rem布局
单位:
em : 是一个相对单位,1em等于当前元素或父元素的font-size值。
rem : 是一个相对单位,1rem等于根元素的font-size值。
vw / vh : 把屏幕分为100份,1vw等于屏幕宽的1%。
动态设置font-size
通过JS:屏幕总宽/3.75
通过VW:26.6667vw
o-1618798912724)]
-
好处: 大屏幕下显示更多的内容。
-
坏处:宽屏下比例会有一些不协调。
rem布局
单位:
em : 是一个相对单位,1em等于当前元素或父元素的font-size值。
rem : 是一个相对单位,1rem等于根元素的font-size值。
vw / vh : 把屏幕分为100份,1vw等于屏幕宽的1%。
动态设置font-size
通过JS:屏幕总宽/3.75
通过VW:26.6667vw
注:要给body重置一下font-size:16px