项目2--移动Web开发常见布局

--学习目标/`Target`

了解什么是流式布局
掌握flex弹性盒布局以及使用方式
掌握媒体查询的使用方法
掌握如何实现移动端设备的Rem适配布局
掌握Sass和Less的使用方法(下一个项目再讲)

--项目说明/`Summary`

在移动Web开发中，可以通过流式布局、弹性盒布局和Rem适配布局来制作移动端页面。此外，我们还可以将上述三大布局与媒体查询结合起来创建响应式页面，实现一个页面同时兼容PC端和移动端。为了提高CSS样式代码的编写效率，我们可以使用Sass或Less编写复用性更优的CSS代码。在掌握了这些技术后，就已经可以编写响应式页面了。

1 移动端页面常用布局

[目标] 了解移动端页面常用布局，能够说出移动端页面常用的布局方式

移动端页面的常用布局方法包括：

流式布局（百分比布局）
弹性盒布局（flex）
rem适配布局
响应式布局（bootstrap)

1.1 流式布局

流式布局也称为百分比自适应布局，它是一种等比例缩放的布局方式，也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高，例如，把盒子的宽度设置成百分比，网页就会根据浏览器的宽度和屏幕的大小来自动调整显示效果。

【课堂演示】——固定布局转换为百分比布局

01-01-1

1.2 弹性盒布局

弹性盒布局是CSS3中的一种新布局模式，可以轻松地创建响应式网站布局。该弹性盒布局为盒模块增加了灵活性，可以让人们告别浮动（float），完美地实现垂直居中。目前它得到几乎所有主流浏览器的支持。

【课堂演示】——弹性盒布局

01-01-2

1.3 Rem适配布局

Rem适配布局一般采取Less+Rem+媒体查询来实现响应式布局设计。使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用rem单位，可以通过修改html里面的文字大小来改变页面中的元素的大小从而进行整体控制。rem是CSS3中新增的一种相对长度单位。当使用rem单位时，根节点<html>的字体大小（font-size）决定了rem的尺寸。

小提示

流式布局、弹性盒布局和Rem适配布局方式并不是独立存在的，在实际开发过程中往往是相互结合使用的，多种方式融合在一起实现移动端的屏幕适配的方法，称之为混合布局，目前很多公司会采取这种布局方式。

1.4 `bootstarp`响应式布局

【课堂演示】——响应式布局

【小结】

单独制作移动端页面
- 流式布局（百分比布局）
- flex 弹性布局（强烈推荐）
- less+rem+媒体查询布局=rem适配布局
- 混合布局
响应式页面兼容移动端
- 媒体查询
- bootstarp

2 流式布局（百分比布局）

【目标】能够使用百分比布局开发网页

在PC端进行网页制作时，经常使用固定像素的网页布局，但这种布局方式对小屏幕的设备不友好。为了适应小屏幕的设备，在移动设备和跨平台（响应式）网页开发过程中，多数使用流式布局。

流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，所以也称百分比自适应布局。流式布局实现方法是，将CSS固定像素宽度换算为百分比宽度，其换算公式如下。


1
目标元素宽度 / 父盒子宽度 = 百分数宽度


xxxxxxxxxx
2
1
max-width 最大宽度 （max-height 最大高度） 
2
min-width 最小宽度 （min-height 最小高度）

2.1 【课堂案例1】

——固定布局和百分比布局的区别

01-01-1

2.2 【课堂案例2】

——京东移动端首页底部

01-04

技术：固定定位+流式布局

HTML参考代码：


x
1
<body>
2
    <div class="commonNav">
3
      <ul>
4
        <li>
5
          <a href="#"><img src="./images/index.png" alt=""></a>
6
        </li>
7
        .....
8
      </ul>
9
    </div>
10
  </body>
11

CSS参考代码：


xxxxxxxxxx
25
1
  * {
2
        margin: 0;
3
        padding: 0;
4
        box-sizing: border-box;
5
        /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
6
        outline: 0;
7
      }
8
      li {
9
        list-style: none;
10
      }
11
      .commonNav {
12
        position: fixed;
13
        left: 0;
14
        bottom: 0;
15
        width: 100%;
16
        border-top: 1px solid #ccc;
17
      }
18
       .commonNav li {
19
        float: left;
20
        width: 20%;
21
        height: 50px;
22
      }
23
      .commonNav li img {
24
        height: 100%;
25
      }

【小结】

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
效果： 宽度自适应，高度固定

3 `Flex` 弹性盒布局（重点)

[目标] 能够使用Flex布局模型灵活、快速的开发网页

3.1 `Flex` 布局-体验

02-03-01 (2)

思考1: 多个盒子横向排列使用什么属性？
- 浮动
思考2: 设置盒子间的间距使用什么属性？
- margin
思考3: 需要注意什么问题？
- 浮动的盒子脱标

【课堂演示】先用标准流来实现一下：


xxxxxxxxxx
31
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <!--视口的设置：视口的宽度和设备一致，初始缩放比为1，用户不能自行缩放-->
6
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
7
    <title>01-float</title>
8
    <style>
9
      *{
10
        margin: 0;
11
        padding: 0;
12
      }
13
      .box{
14
        height: 200px;
15
        border: 1px solid #000000;
16
      }
17
      .box div{
18
        width: 100px;
19
        height: 100px;
20
        background-color: pink;
21
      }
22
    </style>
23
  </head>
24
  <body>
25
    <div class="box">
26
      <div>1</div>
27
      <div>2</div>
28
      <div>3</div>
29
    </div>
30
  </body>
31
</html>

在浏览器移动端模似器上的效果

02-03-02

现在用浮动和间距来实现一下：


xxxxxxxxxx
7
1
      .box div{
2
        float:left;
3
        magin:10px;
4
        width: 100px;
5
        height: 100px;
6
        background-color: pink;
7
      }

02-03-03

如果把父级高度去掉，会怎么样？？


xxxxxxxxxx
4
1
      .box{
2
       /* height: 200px;*/
3
        border: 1px solid #000000;
4
      }

02-03-04

Flex布局能够实现浮动解决的问题，且没有脱标的问题。

现在我们用Flex布局来看一下效果：


xxxxxxxxxx
6
1
      .box{
2
        display:flex;
3
        justify-content:space-between;
4
        /*height: 200px;*/
5
        border: 1px solid #000000;
6
      }

02-03-05

现在：把子元素的高度|宽度去掉，给父级元素定义高度，然后再观察结果。

子元素的宽度按照内容的实际宽度显示。
子元素会占满父元素的可用高度。

3.2 `Flex` 布局-简介

使用弹性盒布局（Flexible Box）可以轻松地创建响应式网页布局，为盒状（块）模型增加了灵活性。弹性盒改进了块模型，既不使用浮动，也不会合并弹性盒容器与其内容之间的外边距。它是一种非常灵活的结构化布局方法，就像几个小盒子放在一个大盒子里一样，相对独立，容易设置。

Flex布局/弹性布局优势：

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

弹性盒模型可以用简单的方式满足很多常见的且复杂的布局需求，它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。不需要考虑浏览器的兼容性问题。

`iOS Safari`	`Android Browser`	`IE`	`Opera`	`Chrome`	`Firefox`
`7.0+`	`4.4+`	`11+`	`12.1+`	`21+`	`22+`

https://caniuse.com/ （搜哪些技术的浏览器兼容性）

02-03-07

3.3 `Flex`布局模型构成

Flex弹性布局是由容器、项目和轴构成。

弹性容器(Flex Container)：采用flex布局的元素，称为弹性容器，也称为弹性盒子，设置display: flex; 即可。
弹性项目(Flex Item)：容器中的子元素，称为弹性项目
轴：
- 主轴：主要用来配置 Flex项目，默认是水平方向
- 侧轴 / 交叉轴：与主轴垂直的轴称作侧轴，默认是垂直方向

02-03-09

注意！！！

容器中所有的子元素默认情况下都是沿着主轴方向显示的
方向：默认主轴从左向右，默认侧轴从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换

3.4 `Flex`布局常用属性

3.4.1 `display`（定义弹性容器）

display属性用于指定元素容器的类型，常用的属性值有：

默认值为inline，这意味着此元素会被显示为一个内联元素，在元素前后没有换行符；
如果设置display的值为flex，则表示用于指定弹性盒的容器；
如果设置display的值为none，则表示此元素不会被显示。

4-1

弹性盒子容器与项目的属性：（前6个为容器的属性，后3个为项目的属性）

属性名	属性值	含义
`flex-direction`	`row`(默认)、`row-reverse`、`column`、`column-reverse`	主轴的方向，即项目的排列方向
`flex-wrap`	`nowrap`(默认)、`wrap`、`wrap-reverse`	如果一行放不下，是否换行
`flex-flow`	简写属性	`flex- direction`和`flex- wrap`的简写属性
`justify-content`	`flex-start`(默认)、`flex-end`、`center`、 `space-between`、`space-around`、`space-evenly`	项目在主轴上的对齐方式
`align-items`	`stretch`(默认)、`flex-start`、`flex-end`、`center`、`baseline`	项目在交叉轴上的对齐方式
`align-content`	`flex-start`(默认)、`flex-end`、`center`、 `space-between`、`space-around`、`space-evenly`	元素换行后设置多行对齐方式，容器必须设置`flex-wrap`换行
`align-self`	同`align-items`	定义单独项目如何没着纵轴排列
`flex`	默认为`0`，表示不伸缩 `1`表示扩展	定义项目的伸缩比例
`order`	默认为`0`，数值越小，排列越靠前	定义项目的排列顺序

3.4.2 `flex-flow`（=方向+拆行）

当使用flex-flow时，其值是flex-direction的值和flex-wrap的值的组合。

3.4.2.1 `flex-direction`设置主轴方向

目标：使用flex-direction改变元素排列方向

02-03-11

flex-direction用于调整主轴的方向，可以调整为横向或者纵向。默认情况下是横向，此时横轴为主轴，纵轴为侧轴；如果改为纵向，则纵轴为主轴，横轴为侧轴，flex-direction的取值：

取值	描述
`row`	弹性盒子元素按横轴方向顺序排列（默认值）
`row-reverse`	弹性盒子元素按横轴方向逆序排列
`column`	弹性盒子元素按纵轴方向顺序排列
`column-reverse`	弹性盒子元素按纵轴方向逆序排列

4-2

4-3

3.4.2.2 `flex-wrap`（是否拆行）

目标：使用flex-wrap实现弹性盒子多行排列效果

思考：默认情况下，多个弹性盒子如何显示？
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式：align-content
- 取值与justify-content基本相同

4-3-2

flex-wrap用于让弹性盒元素在必要的时候拆行，取值如表所示：

取值	描述
`nowrap`	容器为单行，该情况下`flex`子项可能会溢出容器。该值是默认属性值，不换行
`wrap`	容器为多行，`flex`子项溢出的部分会被放置到新行（换行），第一行显示在上方
`wrap-reverse`	反转`wrap`排列（换行），第一行显示在下方

3.4.2.3 `flex-flow`（=方向+拆行）


xxxxxxxxxx
5
1
/* 综合写法：简写形式 */
2
flex-flow: row nowrap;
3
/* 分开写 */
4
flex-direction: row;
5
flex-wrap: nowrap;

3.4.3 `justify-content`（主轴对齐方式）

【目标】使用justify-content调节元素在主轴方向的对齐方式

思考：网页中，盒子之间有距离吗？
- 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

值	描述	白话文
`flex-start`	（默认值）项目位于容器的开头	让子元素从父容器的开头开始排序，但是盒子顺序不变
`flex-end`	项目位于容器的结尾	让子元素从父容器的后面开始排序，但是盒子顺序不变
`center`	项目位于容器的中心	让子元素在父容器中间显示
`space-between`	项目位于各行之间留有空白的容器内	左右的盒子贴近父盒子，中间的平均分布空白间距
`space-around`	项目位于各行之前、之间、之后都留有空白的容器内	相当于给每个盒子添加了左右margin外边距
`space-evenly`	弹性盒子沿主轴均匀排列弹性盒子与容器之间间距相等	均匀分布

4-4


xxxxxxxxxx
49
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>主轴对齐方式</title>
7
    <style>
8
        * {
9
            margin: 0;
10
            padding: 0;
11
        }
12
        .box {
13
            display: flex;
14
15
            /* 居中 */
16
            justify-content: center;
17
18
            /* 间距在弹性盒子(子级)之间 */
19
            justify-content: space-between;
20
21
            /* 所有地方的间距都相等 */
22
            justify-content: space-evenly;
23
24
            /* 间距加在子级的两侧 */
25
            /* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
26
            justify-content: space-around;
27
            
28
            height: 200px;
29
            margin: auto;
30
            border: 1px solid #000;
31
        }
32
        
33
        .box div {
34
            width: 100px;
35
            height: 100px;
36
            background-color: pink;
37
        }
38
    </style>
39
</head>
40
41
<body>
42
    <div class="box">
43
        <div>1</div>
44
        <div>2</div>
45
        <div>3</div>
46
    </div>
47
</body>
48
49
</html>

02-03-10

【练一练】：10’

3.4.4 `align-items`（侧轴对齐方式）

目标：使用align-items调节元素在侧轴上的对齐方式

修改侧轴对齐方式属性:
- align-items:（添加到弹性容器）
- align-self：用于设置单独的项目沿着纵轴排列，（添加到弹性项目）

属性值	描述	白话文
`stretch`	默认值项目被拉伸以适应容器	让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
`center`	项目位于容器的中心	垂直居中
`flex-start`	项目位于容器的开头	垂直对齐开始位置上对齐
`flex-end`	项目位于容器的结尾	垂直对齐结束位置底对齐

4-5

3.4.5 `align-self`（项目侧轴对齐方式）


xxxxxxxxxx
49
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>侧轴对齐方式</title>
7
    <style>
8
        * {
9
            margin: 0;
10
            padding: 0;
11
        }
12
13
        .box {
14
            display: flex;
15
16
            /* 居中 */
17
            /* align-items: center; */
18
19
            /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
20
            /* align-items: stretch; */
21
22
            height: 300px;
23
            margin: auto;
24
            border: 1px solid #000;
25
        }
26
        
27
        .box div {
28
            /* width: 100px; */
29
            /* height: 100px; */
30
            background-color: pink;
31
        }
32
33
        /* 单独设置某个弹性盒子的侧轴对齐方式 */
34
        .box div:nth-child(2) {
35
            align-self: center;
36
        }
37
        
38
    </style>
39
</head>
40
41
<body>
42
    <div class="box">
43
        <div>1</div>
44
        <div>2</div>
45
        <div>3</div>
46
    </div>
47
</body>
48
49
</html>

4-6

【思考】这个效果怎么实现？

02-03-11

03-flexbox

3.4.6 `order`（排列顺序）

order控制子项目的排列顺序，正序方式排序，数值越小，排列将会越靠前，默认为0。

用css 来控制盒子的前后顺序。用order 就可以
用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是 0


xxxxxxxxxx
1
1
order: 1;

3.4.7 `flex`(增长与收缩)

flex属性是flex-grow（扩展比率）、flex-shrink（收缩比率）和flex-basis（宽度，像素值）的简写形式，能够设置子元素的伸缩性。


xxxxxxxxxx
3
1
.a { 
2
  flex-grow: 1;  /* 也可以写成 flex: 1; */
3
}

4-8

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值

需要注意的是，在使用弹性盒布局时，以下属性不起作用。

1.多列布局中的column-*属性对弹性子元素无效。

2.float和clear对弹性子元素无效。使用float会导致display属性计算为block。

3.vertical-align属性对弹性子元素的对齐无效。

【综合案例】——确认订单页面

03-100

4. 媒体查询（重点）

4.1 什么是媒体查询

CSS的Media Query媒体查询（也称为媒介查询）用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。使用媒体查询能够在不改变页面内容的情况下，为特定的输出设备制定显示效果。

媒体查询由媒体类型和条件表达式组成。常用的媒体查询属性如下。

设备宽高： device-width、device-height
渲染窗口的宽和高：width、height
设备的手持方向：orientation
设备的分辨率：resolution

@media媒体查询可以针对不同的屏幕尺寸设置不同的样式，能够判断设备尺寸进行不同样式的切换，是响应式布局的基础

语法：


xxxxxxxxxx
5
1
@media 媒体类型 and (媒体属性) {
2
  选择器{
3
    样式规则
4
  }
5
}

媒体类型：

all 所有媒体（默认值）
screen 电脑屏幕、平板电脑、手机等彩色屏幕
print 打印机
tv 电视
......

媒体属性：

min-width　最小宽度
max-width　最大宽度
min-height　最小高度
max-height　最大高度
......

4.2 媒体查询的使用方法

内嵌式
外联式

4.2.1 内嵌式

下面利用媒体查询实现当文档宽度大于640px 时，对CSS样式进行修改。内联式是直接在CSS中使用


xxxxxxxxxx
6
1
<style>
2
  @media screen and (min-width:640px){
3
    css属性: css属性值;
4
    ...
5
  }
6
</style>

4.2.2 外联式

是作为单独的CSS文件从外部引入


xxxxxxxxxx
1
1
<link href="style.css" media="screen and (min-width:640px)" ref="stylesheet">

4.3 响应式布局容器

响应式网站中使用布局容器来实现控制页面中每个元素的大小和布局变化，需要一个父级元素作为布局容器，来配合子级元素实现变化效果。

常见的响应式布局容器尺寸划分：

设备划分	尺寸区间	宽度设置
超小设备（手机）	`<576px`	`100%`
平板	`≥576px`	`540px`
桌面显示器	`≥768px`	`720px`
大桌面显示器	`≥992px`	`960px`
超大桌面显示器	`≥1200px`	`1140px`

[课堂案例]——根据屏幕不同宽度设置布局容器宽度及背景颜色

Video_2022-09-23_020626


xxxxxxxxxx
49
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta name="viewport" content="width=device-width">
5
  <style>
6
    /* 1. 超小设备（小于576px）布局容器的宽度为100% */
7
    @media screen and (max-width: 575px) {
8
      .container {
9
        width: 100%;
10
        background: red;
11
      }
12
    }
13
    /* 2. 平板设备（大于等于576px）布局容器的宽度为540px */
14
    @media screen and (min-width: 576px) {
15
      .container {
16
        width:540px;
17
        background: green;
18
      }
19
    }
20
    /* 3. 桌面显示器（大于等于768px）布局容器宽度为720px */
21
    @media screen and (min-width: 768px) {
22
      .container {
23
        width: 720px;
24
        background: blue;
25
      }
26
    }
27
    /* 4. 大桌面显示器（大于等于992px）布局容器宽度为960px */   
28
    @media screen and (min-width: 992px) {
29
      .container {
30
        width: 960px;
31
        background: yellow;
32
      }
33
    }
34
    /* 5. 超大桌面显示器（大于等于1200）布局容器宽度为1140 */ 
35
    @media screen and (min-width: 1200px) {
36
      .container {
37
        width: 1140px;
38
        background: pink;
39
      }
40
    }
41
    .container {
42
      height: 50px;
43
      margin: 0 auto;
44
    }
45
  </style>
46
  
47
 <body>
48
  <div class="container">布局容器</div>
49
</body>

5 `rem`适配布局（重点）

使用rem适配布局，可以实现根据不同设备的情况，按比例设置页面的字体大小。在页面中，元素使用rem尺寸单位，当页面字体大小变化时，元素的宽度和高度也会发生变化，从而达到等比缩放的适配效果。

5.1 `rem`单位

rem是CSS3中新增的一种相对长度单位。当使用rem单位时，根节点<html>的字体大小（font-size）决定了rem的尺寸。

rem单位类似于em单位，em单位表示父元素字体大小，不同之处在于，rem的基准是相对于<html>根节点的字体大小。

通过代码对比rem单位和em单位的区别，具体使用代码如下。


xxxxxxxxxx
7
1
html {font-size: 14px;}
2
div {font-size: 12px;}
3
div > p {
4
  width: 10rem;  /* 结果为140px */
5
  height: 10rem; /* 结果为140px */
6
}
7


xxxxxxxxxx
8
1
div {
2
  font-size: 12px;
3
}
4
div > p {
5
  width: 10em;  /* 结果为120px */
6
  height: 10em; /* 结果为120px */
7
}
8

5.2 混合应用

利用媒体查询和rem单位，可以实现元素大小的动态变化。其开发思路是:

通过媒体查询来更改不同屏幕宽度下<html>的字体大小
页面中的元素盒子都使用rem单位
从而让它们能够进行等比例缩放

【课堂演示】——Rem+Less+媒体查询

比如：


xxxxxxxxxx
6
1
html{
2
  font-size:16px;
3
}
4
div{
5
  font-size:1rem;
6
}

比如：my.less 生成 my.css


xxxxxxxxxx
15
1
/* 定义一个粉色的变量 */
2
@color: pink;
3
/* 定义一个字体为14px的变量 */
4
@font14: 14px;
5
body {
6
  background-color: @color;
7
}
8
div {
9
  color: @color;
10
  font-size: @font14;
11
}
12
a {
13
  font-size: @font14;
14
}
15


xxxxxxxxxx
13
1
/* 定义一个粉色的变量 */
2
/* 定义一个字体为14px的变量 */
3
body {
4
  background-color: pink;
5
}
6
div {
7
  color: pink;
8
  font-size: 14px;
9
}
10
a {
11
  font-size: 14px;
12
}
13

比如：rem-demo.less 生成rem-demo.css


xxxxxxxxxx
19
1
@media screen and (min-width: 320px) {
2
  html {
3
    font-size: 20px;
4
  }
5
}
6
@media screen and (min-width: 750px) {
7
  html {
8
    font-size: 50px;
9
  }
10
}
11
12
@baseFont:4rem;
13
14
div {
15
  width: @baseFont*2;
16
  height: @baseFont;
17
  background: pink;
18
}
19


xxxxxxxxxx
16
1
@media screen and (min-width: 320px) {
2
  html {
3
    font-size: 20px;
4
  }
5
}
6
@media screen and (min-width: 750px) {
7
  html {
8
    font-size: 50px;
9
  }
10
}
11
div {
12
  width: 8rem;
13
  height: 4rem;
14
  background: pink;
15
}
16

6 其它布局（了解）

6.1 网格布局（了解）

6.1.1 简介

grid网格布局是一个二维的基于网格的布局系统，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

采用grid布局的元素，称为grid容器(Grid Container)
网格容器中的子元素，称为网格项(Grid Item)
组成网格线的分界线，称为列网格线和行网格线
两个相邻的列网格线和两个相邻的行网格线组成的单元格，称为网格单元格

6.1.2 常用属性

先设置容器为网格布局display:grid;，然后设置网格布局的相关属性

样式名	属性值	含义
grid-template-columns	px、%、auto、fr、repeat()、auto-fill	定义每一列的列宽
grid-template-rows	px、%、auto、fr、repeat()、auto-fill	定义每一列的行高
grid-column-gap	px	列与列的间隔
grid-row-gap	px	行与行的间隔
justify-items	start、end、center、stretch(默认)	单元格内容的水平对齐
align-items	start、end、center、stretch(默认)	单元格内容的垂直对齐
justify-content	start(默认)、end、center、space-between、space-around、 space-evenly	整个网格在容器中的水平对齐
align-content	start(默认)、end、center、space-between、space-around、space-evenly	整个网格在容器中的垂直对齐
grid-auto-flow	row(默认)、column	自动放置元素的顺序
grid-column-start/grid-column-end	简写属性：grid-column	列的开始和结束
grid-row-start/grid-row-end	简写属性：grid-row	行的开始和结束

6.1.3 `grid`布局和`flex`布局的区别：

grid 布局与 flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。

flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局
grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局
grid 布局远比 Flex 布局强大，但兼容性不如flex布局

6.2 多列布局（了解）

6.2.1 简介

多列布局是CSS3新增的属性，就是创建多个列来对文本进行布局，其实就是将文本分成多列进行展示，就像报纸排版那样，也有点像word当中的分栏。

6.2.2 常用属性

属性名	属性值	含义
column‐width	px	列的宽度
column‐count	整数值	列的数量
columns	简写属性	column-width 和 column-count的简写属性
column‐fill	balance(默认)、auto	列的填充方式
column‐gap	px	列之间的间隔
column‐rule	类似于border属性的设置	列之间分隔线的宽度、样式、颜色
column‐span	1(默认)、all	元素是否横跨多列

如： 6-2

【历年真题】


xxxxxxxxxx
10
1
2020-12-初
2
3
16、关于flex说法错误的是(   ) 弹性布局 
4
A. 设置flex布局以后，子元素的float和clear等样式全部失效
5
B. 任何一个容器都可以使用flex弹性布局
6
C. 设置flex:1无意义
7
D. flex是弹性布局
8
9
答案：C
10

项目2--移动Web开发常见布局

--学习目标/Target

--项目说明/Summary

1 移动端页面常用布局

1.1 流式布局

1.2 弹性盒布局

1.3 Rem适配布局

1.4 bootstarp响应式布局

【小结】

2 流式布局（百分比布局）

2.1 【课堂案例1】

——固定布局和百分比布局的区别

2.2 【课堂案例2】

——京东移动端首页底部

【小结】

3 Flex 弹性盒布局（重点)

3.1 Flex 布局-体验

3.2 Flex 布局-简介

3.3 Flex布局模型构成

3.4 Flex布局常用属性

3.4.1 display（定义弹性容器）

3.4.2 flex-flow（=方向+拆行）

3.4.2.1 flex-direction设置主轴方向

3.4.2.2 flex-wrap（是否拆行）

3.4.2.3 flex-flow（=方向+拆行）

3.4.3 justify-content（主轴对齐方式）

3.4.4 align-items（ 侧轴对齐方式）

3.4.5 align-self（项目侧轴对齐方式）

3.4.6 order（排列顺序）

3.4.7 flex(增长与收缩)

【综合案例】——确认订单页面

4. 媒体查询（重点）

4.1 什么是媒体查询

4.2 媒体查询的使用方法

4.2.1 内嵌式

4.2.2 外联式

4.3 响应式布局容器

5 rem适配布局（重点）

5.1 rem单位

5.2 混合应用

6 其它布局（了解）

6.1 网格布局（了解）

6.1.1 简介

6.1.2 常用属性

6.1.3 grid布局和flex布局的区别：

6.2 多列布局（了解）

6.2.1 简介

6.2.2 常用属性

【历年真题】

--学习目标/`Target`

--项目说明/`Summary`

1.4 `bootstarp`响应式布局

3 `Flex` 弹性盒布局（重点)

3.1 `Flex` 布局-体验

3.2 `Flex` 布局-简介

3.3 `Flex`布局模型构成

3.4 `Flex`布局常用属性

3.4.1 `display`（定义弹性容器）

3.4.2 `flex-flow`（=方向+拆行）

3.4.2.1 `flex-direction`设置主轴方向

3.4.2.2 `flex-wrap`（是否拆行）

3.4.2.3 `flex-flow`（=方向+拆行）

3.4.3 `justify-content`（主轴对齐方式）

3.4.4 `align-items`（侧轴对齐方式）

3.4.5 `align-self`（项目侧轴对齐方式）

3.4.6 `order`（排列顺序）

3.4.7 `flex`(增长与收缩)

5 `rem`适配布局（重点）

5.1 `rem`单位

6.1.3 `grid`布局和`flex`布局的区别：