前端学习第五周

最新推荐文章于 2024-09-15 10:33:02 发布

三池丶

最新推荐文章于 2024-09-15 10:33:02 发布

阅读量331

点赞数

文章标签：前端学习 html

本文链接：https://blog.csdn.net/qq_72343101/article/details/127953701

版权

一.strong与b标签、em与i标签
二.引用标签
三.iframe嵌套页面
- 3.1iframe的常见属性：
- 3.2iframe的应用场景
四.br与wbr标签
五.pre和code标签
六.map和area标签
七.embed标签和object标签
八.video标签和audio标签
九.文字注解与文字方向
- 9.1文字注解
十.扩展link标签
- 10.1css样式引入
- 10.2标题栏图标引入
- 10.3dns解析访问
十一.扩展meta标签
- 11.1meta中的name属性
- 11.2meta中的http-equiv属性
十二.HTML5新语义化标签
- 12.1第一部分标签（主要是header标签的内容）
- 12.2第二部分（主要是main标签的内容）
- 12.3第三部分（文本相关的标签）
十三.flex弹性布局（弹性盒模型）
- 13.1前言
- 13.2flex-direction
- 13.3flex-wrap
- 13.4flex-flow
- 13.5justify-content
- 13.6align-items
- 13.7align-content
- 13.8align-items与align-content之间的差异
- 13.9作用在flex子项上的属性
- 13.10order
- 13.11flex-grow
- 13.12flex-shrink
- 13.13flex-basis
- 13.14flex
- 13.15align-self
- 13.16flex案例
十四.grid网格布局
- 14.1作用在grid容器上的属性
- 14.2grid-template-columns和grid-template-rows

一.strong与b标签、em与i标签

strong、em、b、i、span都属于内联元素

strong和em都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。
表现形态是相同的。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>文本1</strong>
    <b>文本2</b>
    <em>文本3</em>
    <i>文本4</i>
</body>
</html>

显示为：
请添加图片描述
可以看到，效果是一样的。
区别：strong和em是具备语义化的，而b和i是不具备语义化的。

注：在网站开发时，如果对一段文字进行强调时，要用strong和em，不要用b和i

应用场景：
可以简化选择器的使用，如果都是用span或其他单独一个标签来进行不同样式的修饰，会导致选择器写的非常繁琐，而用b和i就可以方便的区分
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    i em{font-size:16px;}
    i span{font-size:20px;}
    </style>
</head>
<body>
	<i>
	<span>文本1</span>
    <b>文本2</b>
    <em>文本3</em>
    </i>
</body>
</html>

可以减少class或id选择器的使用，简化选择器的操作。

二.引用标签

以下有几个引用标签：
blockquote：引用大段的段落解释
q：引用小段的词语解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题

blockquote和q的效果：
请添加图片描述
abbr的效果：

address和cite的效果：

写法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <abbr title="World Health Organization">WHO</abbr>成立于1948年。
    </p>
</body>
</html>

显示为；
请添加图片描述
跟内联的用法是一样的。

三.iframe嵌套页面

iframe元素（标签）会创建包含另外一个文档的内联框架（即行内框架）。
简单来说就是在一个已有的页面中嵌入其他的页面，其实就是引入其他页面到这个已有页面上。

引入其他的html文件到当前html文件显示

3.1iframe的常见属性：

请添加图片描述
主要是利用iframe的属性进行样式的调节。
例如：
不带边框的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://www.taobao.com" frameborder="0"></iframe>
</body>
</html>

显示为：
请添加图片描述
带边框的引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://www.taobao.com" frameborder="1![请添加图片描述](https://img-blog.csdnimg.cn/a0f03f6f950a495dbadff91d383ed921.png)
"></iframe>
</body>
</html>

显示为：
请添加图片描述
可以看到边框

当src和srcdoc属性同时出现时，只会识别srcdoc而不会识别src,且srcdoc内也能用某些标签。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe srcdoc="<h1>hello world</h1>" src="https://www.taobao.com" frameborder="0" scrolling="no" width="400px" height="400px"></iframe>
</body>
</html>

显示为；
请添加图片描述
可以看到，src没有生效，且h1生效了。

可以通过样式来实现网页占比100%的效果
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe{width: 100%;}
    </style>
</head>
<body>
    <iframe src="https://www.taobao.com" frameborder="0" scrolling="no"></iframe>
</body>
</html>

显示为：
请添加图片描述

3.2iframe的应用场景

坏的方面：
用iframe做钓鱼网站，可以引入一个其他的网站，然后创建一个透明的层，定位在某个地方（例如登录的地方）来获取信息🧐。
正常情况的应用场景：
前后台的数据传输、共享代码、局部刷新、第三方介入等。

数据传输：
涉及到js的知识，略。

共享代码：
一个页面可以共享不同页面的代码，只需要替换src就行了。

局部刷新：
正常刷新页面都是要全部刷新的，但iframe可以通过js来实现局部刷新。

第三方介入：
常用作广告。

可以很方便的借用别人网站的东西

四.br与wbr标签

br标签表示换行操作，而wbr表示软换行操作。

wbr的官方解释：
请添加图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        aaa sdgajdg ajgd sdjgadjgqw sagadhjag gdywqgayudv sjgdbashjdg d awgjhd aaa sdgajdg ajgd sdjgadjgqw sagadhjag gdywqgayudv sjgdbashjdg d awgjhd 
    </p>
</body>
</html>

显示为：
请添加图片描述
当文字超出容器范围时，文字会自动根据单词之间的空格进行换行。

使用br可以使文字没有超出容器时进行换行。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        aaa sdgajdg ajgd sdjgadjgqw <br> sagadhjag gdywqgayudv sjgdbashjdg d awgjhd aaa sdgajdg 
    </p>
</body>
</html>

显示为：
请添加图片描述
而wbr就是可以让单词不根据空隙进行换行。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        aaa sdgajdg ajgd sdjgadjgqw  sagadhjag gdywqgayudv XML<wbr>HTTP<wbr>Request d awgjhd aaa sdgajdg 
    </p>
</body>
</html>

显示为：
请添加图片描述

五.pre和code标签

注：这两个标签通常是组合使用的，pre作为容器，里面是code标签

pre元素可定义预格式化的文本。被包围在pre元素的文本通常会保留空格和换行符。

只应该在计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

这两个效果就相当于markdown里的代码块

注：要想显示，需要把某些符号进行转译。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <pre>
        <code>
            &lt;!DOCTYPE html&gt;
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
            </head> 
            <body>
                hello world
            </body>
        </code>
    </pre>
</body>
</html>

显示为：
请添加图片描述
可以看到，进行转译的& lt;!DOCTYPE html& gt;显示了出来
而没用转译的则没有显示出来。

六.map和area标签

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域
area元素的href属性定义区域URL，shape属性来定义区域的形状，coords属性定义热区的坐标。

就是可以给一张图片中的某一区域添加链接，area能添加的热区的形状有：矩形、圆形、多边形。
语法：

    <img src="图片地址" alt="" usemap="#name名">
    <map name="name名">
        <area shape="" coords="" href="" alt="">
    </map>

当shape为矩形（rect）时，coords里的坐标只需要矩形的左上角和右下角的坐标。
例如：<area shape=“rect” coords=“201 201 405 405"href=”" alt=“”>
即表示：左上角（201，201）右下角（405，405）
当shape为圆（circ）时，coords里的坐标只需要圆的圆心坐标和半径。
例如：<area shape=“circ” coords=“201 201 50"href=”" alt=“”>
即表示：圆心（201，201）半径：50
当shape为多边形（poly）时，coords里的坐标需要多边形的各个边的的拐点。
这个例子较为麻烦，就不演示了，如果不懂，请从117集8分钟开始看。

七.embed标签和object标签

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。（嵌入以flash为主）
object元素要配合param元素一起完成。

注：现在浏览器的兼容性已经比较好了，这两种写法都能兼容

给flash和一些插件进行渲染的标签
embed用法
<embed src="这里填flash或插件的文件地址" type="">
显示为：
请添加图片描述
object用法：
<object data="" type=""> <param name="movie" value="flash或插件地址"> </object>

注；作为了解，用的很少，因为移动端不怎么支持flash

八.video标签和audio标签

现在用的比较多audio（音频）video（视频），可以引入音频与视频的标签，

audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。

为了能够支持多个备选文件的兼容支持，可以配合source标签。
audio和video共有属性：
controls、loop、autoplay。
audio案例：

注：默认音频和视频播放完会自动停止，可以利用loop属性使它循环播放，用autoplay属性使它自动播放。
注；想做指定播放器的样子需要用到JS的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="../音频与视频/采风乐坊 - 蓄势 ~GEAR UP~.mp3"></audio>
</body>
</html>

运行后什么都没有，因为默认控件时不显示的，只有加上controls属性才有显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="../音频与视频/采风乐坊 - 蓄势 ~GEAR UP~.mp3" controls></audio>
</body>
</html>

显示为：
请添加图片描述
同理，video也是这样的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="../音频与视频/Monster Hunter World 2022.11.24 - 08.45.45.01.mp4" controls></video>
</body>
</html>

显示为：
请添加图片描述
source的使用：某些浏览器可能不支持某些视频格式，这时就可以使用source标签来进行一个备选的操作
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video>
        <source src="视频格式1">
        </source>
        <source src="视频格式2">
        </source>
    </video>
</body>
</html>

浏览器会首先检测第一个引入的路径（视频格式1）如果支持，就使用视频格式1，如果不支持，就使用视频格式2，以此类推。

九.文字注解与文字方向

9.1文字注解

rudy标签定义rudy注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。
rt嵌套在rudy中
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ruby>
        寒<rt>han</rt>冬
    </ruby>
</body>
</html>

显示为：
请添加图片描述
bdo标签可覆盖默认的文本方向。
dir属性里的ltr值表示从左到右的顺序，rtl表示从右到左的顺序。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ruby>
        寒<rt>han</rt>冬<rt>dong</rt>
    </ruby>
    <p>
        <bdo dir="ltr">测试文字</bdo>测试文字测试文字
    </p>
</body>
</html>

显示为；
请添加图片描述
可以看到，顺序并没有发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ruby>
        寒<rt>han</rt>冬<rt>dong</rt>
    </ruby>
    <p>
        <bdo dir="rtl">测试文字</bdo>测试文字测试文字
    </p>
</body>
</html>

显示为；
请添加图片描述
可以看到，文字方向反了。

可以用css的方式来实现这个效果。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{direction: rtl;unicode-bidi: bidi-override;}
    </style>
</head>
<body>
    <p>
        <span>测试文字</span>测试文字测试文字测试文字
    </p>
</body>
</html>

显示为：
请添加图片描述
也有同样的效果。

十.扩展link标签

link标签的作用：主要就是引入一个外部的资源文件
rel指要引入文件的种类
type值指文件类型

10.1css样式引入

引入css样式文件
当rel="stylesheet"表示要引入一个样式（css）文件
<link rel="stylesheet" type="text/css" href="css文件地址">

10.2标题栏图标引入

引入一个小图标作为标题栏的小图标。
当rel="icon"表示要引入一个小图标作为标题栏的小图标。
<link rel="icon" type="/image/x-icon" href="图标文件地址/faviocn.ico">
type指定类型，常用x-iocn的值，x-icon要求图片的后缀名为/favicon.ico
地址栏的小图标就是
请添加图片描述
<link href="https://g.csdnimg.cn/static/logo/favicon.ico" rel="shortcut icon" type="image/x-icon">
上面的是csdn的地址栏标签
显示为：

10.3dns解析访问

html文件访问网站的资源时，通过ip进行访问，域名通过dns解析之后转成一个ip的映射，然后html再去访问ip，然后通过rel="dns-prefetch"值让link标签提前访问网址，能加快访问网站的资源的速度.
用法：
<link rel="dns-prefetch" href="网址">
京东的dns解析访问：请添加图片描述

十一.扩展meta标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

可以看到，在头文件内有许多meta标签
<meta charset="UTF-8">是最常见的，设置一个网页编码，防止网页出现乱码
meta标签就是添加一些辅助信息，可以做一些优化，页面渲染，不会在页面中出现效果，与link一样属于功能性。

11.1meta中的name属性

meta标签中name属性的值（辅助信息）：
description：描述网站内容，用户看不到，但有利于搜索引擎的优化。
像美团的描述：
请添加图片描述
keywords：关键字，与上述description一样，用户看不到，但有利于搜索引擎的优化。

renderer content：“webkit”：后面会讲，主要是渲染双内核浏览器？

也可以利用meta做一些自定义的内容，不用name属性

11.2meta中的http-equiv属性

<meta http-equiv="X-UA-Compatible" content="IE=edge">
这句代码主要就是针对IE浏览器，使IE浏览器不论什么版本都以最高版本的edge来渲染。

refresh值：刷新跳转
请添加图片描述
三秒后刷新页面，跳转url的网址（url可能不被支持）

expires值：？？？，不是很懂？122集9分钟。
学习技巧：多观察大网站的的html文件。

十二.HTML5新语义化标签

12.1第一部分标签（主要是header标签的内容）

header（页眉）
footer（页脚）
main（主题）
hgroup（标题组合）
nav（导航）
——————————

header（页眉）footer（页脚）main（主题）等标签只能在一个网页中出现一次，与h1类似，不能出现多次。
红色头部部分就是header标签部分，蓝色主体是main，黑色尾部就是footer，
此外，像红色部分中的标题，分为主标题（绿色）和副标题（黄色），可以用hgroup（标题组合）来制作。
然后导航nav就是紫色部分。
大致块的划分就是以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <ul>
            <li>首页</li>
            <li>论坛</li>
            <li>资料</li>
            <li>关于</li>
        </ul>
    </header>
    <main></main>
    <footer></footer>
</body>
</html>

12.2第二部分（主要是main标签的内容）

article：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption：描述图像或视频的标题部分
——————————————————

article：独立的内容与 aside：辅助信息的内容这两个标签就是相对立的标签。

粉色框内的文章主题内容就是article：独立的内容，
而深蓝色框内，侧边栏的辅助信息就是aside：辅助信息的内容。
section：区域：也是来划分块，与article：独立的内容类似

就像这张图中，黑色的就是article，而红色的就可以理解是section。，与div作用类似。
figure：描述图像或视频
figcaption：描述图像或视频的标题部分
通常这两个标签是组合使用的。
像：
<figure> <img src="../页面仿写素材/1.jpg" alt=""> <figcaption>实心松木块</figcaption> </figure>
这种类型的写法。

12.3第三部分（文本相关的标签）

datalist：选项列表
details/summary：文档细节/文档标题
progress/meter：定义进度条/定义度量范围
time：定义日期或时间
mark：带有记号的文本
————————————————————

datalist：选项列表，一种辅助的信息，
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <ul>
            <li>首页</li>
            <li>论坛</li>
            <li>资料</li>
            <li>关于</li>
        </ul>
    </header>
    <main>
        <article>
            <section>
                <input type="text" list="elems">
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="abc"></option>
                    <option value="apple"></option>
                    <option value="abbr"></option>
                </datalist>
            </section>
        </article>
    </main>
    <footer></footer>
</body>
</html>

显示为：
在这里插入图片描述
当在输入框输入与提示内容相关的语句时：

他就会显示与之相关的辅助信息。
就像搜索引擎的提示效果。
例如：

这种。

details/summary：文档细节/文档标题
用法： <details> <summary>HTML</summary> 超文本标记语言 </details>
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <ul>
            <li>首页</li>
            <li>论坛</li>
            <li>资料</li>
            <li>关于</li>
        </ul>
    </header>
    <main>
        <article>
            <section>
                <input type="text" list="elems">
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="abc"></option>
                    <option value="apple"></option>
                    <option value="abbr"></option>
                </datalist>
                <details>
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>
            </section>
        </article>
    </main>
    <footer></footer>
</body>
</html>

未点击时显示为：
在这里插入图片描述

点击后显示为：
在这里插入图片描述
默认情况时闭合状态，可以在details上加上一个open属性，就像这样

  <details open>
  <summary>HTML</summary>
  <p>超文本标记语言</p>
  </details>

显示为：
请添加图片描述
就直接展开了。

progress/meter：定义进度条/定义度量范围
用法：<progress min="n" max="x" value="y"></progress>
就是一个进度条，min值控制最小进度条值，max值控制最大进度条值，value值控制起始进度条值
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <ul>
            <li>首页</li>
            <li>论坛</li>
            <li>资料</li>
            <li>关于</li>
        </ul>
    </header>
    <main>
        <article>
            <section>
                <input type="text" list="elems">
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="abc"></option>
                    <option value="apple"></option>
                    <option value="abbr"></option>
                </datalist>
                <details open>
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>
                <progress min="0" max="10" value="5"></progress>
            </section>
        </article>
    </main>
    <footer></footer>
</body>
</html>

<progress min="0" max="10" value="5"></progress>
显示为：
在这里插入图片描述
可以看到，value=“5”，max="10"的情况下，进度条直接显示了一半。

然后meter的使用方法基本与progress 相同，也是<meter min="0" max="100" value="50"></meter>这种格式，只不过一个表示进度，一个表示度量范围。
此外，meter还有一个最小值和最大值的设置，就是low属性和high属性。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
        <article>
            <section>
                <meter min="0" max="100" value="90" low="30" high="60"></meter>
            </section>
        </article>
    </main>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，当value值超出high或低于low值时，他就会变色。

time：定义日期或时间
用法：
例如 今天是<time title="2-16">情人节</time>，人很多没有任何显示效果，就是定义时间，让标签更具备语义化。
mark：带有记号的文本
与time用法基本相同，也是 今天是情人节，人很多
显示为：

可以看到，被mark标记的词语背景色变黄，作为一个提醒。

注：这些标签都是div的替代品，就是一种语义化的标签。

十三.flex弹性布局（弹性盒模型）

13.1前言

在这里插入图片描述
flex主要的语法

flex的优势
例如：在之前的学习中，盒子模型想要实现垂直水平居中是比较麻烦的
像：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;}
        #box{width: 100px;height: 100px;background: red;margin: auto;}
    </style>
</head>
<body>
    <div id="parent">
        <div id="box"></div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，里面的块只是水平居中，而没有上下居中。
但是，用flex就可以很方便的实现垂直水平居中。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box{width: 100px;height: 100px;background: red;margin: auto;}
    </style>
</head>
<body>
    <div id="parent">
        <div id="box"></div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
可以看到垂直水平居中。，而且，无论里面容器变小变大，他都能非常好的自适应居中。
像；

都是自适应居中的。

13.2flex-direction

这是加在父容器上的属性。

在这里插入图片描述
例如：
在父元素上不加flex时。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
加上flex之后：
（即display: flex;）
显示为：

可以看到，子项排列的顺序发生了变化。
下面是一些flex-direction的取值
请添加图片描述

注：flex-direction是加在父容器上的属性，像#box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;flex-direction: row}这样。

举几个例子；
当flex-direction的取值为row-reverse时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;flex-direction: row-reverse;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

显示为；
在这里插入图片描述
与row相反。
当flex-direction的取值为column时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;flex-direction: column-reverse;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

显示为；
在这里插入图片描述

13.3flex-wrap

这是加在父容器上的属性。

在这里插入图片描述
一些flex-wrap的值

还是上面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

可知，父容器宽为300px，子容器为50px，按理说，父容器最多能容纳6个子项，就像这样
在这里插入图片描述
但是，当子项超过6个时，他并不会换行，或是超出容器，而是使子项自身宽度减小，进行一个适配。
即：当子元素宽度大于父容器时，会自适应的进行一个调节。
像：

当子元素里的内容超过父容器的宽度，此时，子元素就会超出父容器
就像：
在这里插入图片描述
此时就要用到flex-wrap属性了
请添加图片描述
还是这三个值。

当值为warp时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;flex-wrap: wrap;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

显示为；
在这里插入图片描述
可以看到换行，但是会默认自适应容器，所以显示成这样。
当值为warp-reverse时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;flex-wrap: wrap-reverse;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
可以看到反向。

空隙的调节后面会有。

13.4flex-flow

这是加在父容器上的属性。

在这里插入图片描述
flex-flow这个属性相当于flex-wrap和flex-direction的复合写法。
像：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;flex-wrap: wrap; flex-direction: column;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

与

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;flex-flow: column wrap;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

主要代码的差异为：
#box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;flex-flow: column wrap;}
与
#box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;flex-wrap: wrap; flex-direction: column;}
都显示为；
在这里插入图片描述
可以看到，这两个属性是可以组合使用的。

13.5justify-content

这是加在父容器上的属性。

在这里插入图片描述
主轴方向：与当前设置的方向一致的方向就是主轴方向
例如：当flex-direction设置为row时，主轴方向就是行，设置为column时，主轴方向就是列。
justify-content的取值
请添加图片描述

默认取值时显示为：
取值为flex-end时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;justify-content: flex-end;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述

取值为center时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;justify-content: center;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

显示为；
在这里插入图片描述

取值为space-betwee时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;justify-content: space-between;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
第一个元素靠到最左边，最后一个靠到最右边，中间空白区域均匀分配。

取值为space-around时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;justify-content: space-around;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

显示为；
在这里插入图片描述
每个块左右的间距相等，所以最左和最右的块与边框的间距是块与块之间间距的1/2。

取值为space-evenly时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;justify-content: space-evenly;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
每个空隙的间距都是一样的。
当主轴为列时：
显示为；

问题
当元素过多时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;justify-content: space-evenly;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
解决方法，折行flex-wrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;justify-content: space-evenly;flex-wrap: wrap;}
        #box div{width: 50px; height: 50px;color: white;line-height: 50px;text-align: center;background: red;   }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，justify-content的功能还是实现了，但是因为第一行里元素沾满了，所以还是没有空隙。
但是第一行与第二行有很大的空隙，这是align-items的默认值stretch造成的。

13.6align-items

这是加在父容器上的属性。

在这里插入图片描述
align-items属性相关的值：

默认情况下，假如不设置子项的高度，那么子项就会占满整个父容器
就是这种现象导致了用justify-content和flex-flow换行时中间造成的巨大空隙。
像；

flex-start以顶对齐
像上面文本高度占满整个父容器，如果使用flex-start，就会让子项以顶对齐，且子项高度自适应文本。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;justify-content: space-evenly;align-items: flex-start;}
        #box div{width: 50px;background: red;}
    </style>
</head>
<body>
    <div id="box">
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
    </div>
</body>
</html>

显示为；
在这里插入图片描述
同理，center值就是居中对齐

flex-end就是尾部对齐
请添加图片描述

一般用align-items做上下居中，用justify-content做左右居中。

13.7align-content

这是加在父容器上的属性。

在这里插入图片描述
align-content属性的值：
请添加图片描述

flex-start值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;justify-content: space-evenly;align-items:flex-start;align-content: flex-start;flex-wrap: wrap;}
        #box div{width: 50px;background: red;}
    </style>
</head>
<body>
    <div id="box">
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本</div>
    </div>
</body>
</html>

显示为；
在这里插入图片描述
同理flex-end值就是；
请添加图片描述
center就是

可以看到子项之间的空隙消失了。

13.8align-items与align-content之间的差异

align-items指一行当中的排列，上中下空隙等。
align-content指多行之间的对齐方式。

13.9作用在flex子项上的属性

在这里插入图片描述

13.10order

在这里插入图片描述
当一个子项order值<0，他的位置就会越靠前，子项order值>0，他的位置就会越靠后。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;color: white;}
        #box div{width: 50px;height:50px ;background: red;line-height: 50px;text-align: center;}
        #box div:nth-of-type(2){order: 1;} 
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

显示为；
在这里插入图片描述
而没有加order值时，显示为：

可以很明显的看到，块2的顺序发生了变化，由于加了order>0的值，导致他的位置变到了后面。
大概总结就是，order值越大，块的位置越往后。

13.11flex-grow

在这里插入图片描述
例如：
正常情况下；
请添加图片描述
让2的flex-grow值增大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;color: white;}
        #box div{width: 50px;height:50px ;background: red;line-height: 50px;text-align: center;}
        /* #box div:nth-of-type(2){background: yellow;color: black;flex-grow: 1;}  */
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，2把左边空白的区域侵占了。
即当flex-grow的值大于等于1后，所对应的子项就会把剩余的空间占满，但是，当flex-grow的值小于1大于0时，就不会占满，而是占据一定的百分比。
例如，当flex-grow的值为0.5时

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;color: white;}
        #box div{width: 50px;height:50px ;background: red;line-height: 50px;text-align: center;}
        #box div:nth-of-type(2){background: yellow;color: black;flex-grow: 0.5;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，只占据空白区域的一半空间，而剩余一半没有占据。
所以说，这个值就是一个百分比。
当flex-grow的值为0.2时，就会只占据20%的空间。

当然，flex-grow也可以添加给多个元素。
添加给多个元素时，就是多个元素共同分配这些空白区域。
例如：给两个子项添加flex-grow：0.2，那么这两个元素每个都会被分配到20%的空白区域，总共占据40%的空白区域。
假如多个子项的flex-grow值都大于1，那么就每个元素按照flex-grow值来百分比分配空白区域。
例如：给两个子项添加flex-grow值，其中一个值为1，另一个值为2，那么，flex-grow值为1的就会分配到1/3的区域，flex-grow值为2的就会分配到2/3的区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;color: white;}
        #box div{width: 50px;height:50px ;background: red;line-height: 50px;text-align: center;}
        #box div:nth-of-type(2){background: yellow;color: black;flex-grow: 1;}
        #box div:nth-of-type(3){background: blue;flex-grow: 2;} 
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述

13.12flex-shrink

在这里插入图片描述
flex-shrink与flex-grow正好是一对相反的属性。

每个子项默认flex-shrink值是1，即默认收缩状态，flex-shrink值是0就表示不收缩，flex-shrink值大于1表示收缩的更加严重。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;color: white;}
        #box div{width: 50px;height:50px ;background: red;line-height: 50px;text-align: center;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

可知，父容器最多一行可容纳6个子项，而现在有8个子项，于是，就会显示为：
在这里插入图片描述
即子项没有换行，而是自动收缩。
当flex-shrink值为0时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;color: white;}
        #box div{width: 50px;height:50px ;background: red;line-height: 50px;text-align: center;}
        #box div:nth-child(2){background: blue;flex-shrink: 0;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，块2没有收缩，保持了正常的宽度。
同理，当flex-shrink值为2时，显示为；

13.13flex-basis

在这里插入图片描述
相当于重新再设置一遍子项的宽，且flex-basis的优先级高于width，即当flex-basis和width同时设置在一个容器时，会显示flex-basis的效果，默认值是auto。

注：在有元素收缩的情况下，收缩的优先级是要高于flex-basis的，即flex-basis的效果不会完全显示
比如说，一个块元素已经收缩且收缩后的宽度是30px，你用flex-basis给他一个60px的宽，它在浏览器中就不会显示。
就相当于给一个固定的值，而flex-shrink和flex-grow给的都是比例值。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;color: white;}
        #box div{width: 50px;height:50px ;background: red;line-height: 50px;text-align: center;}
        #box div:nth-child(2){background: blue; width: 80px; flex-basis:100px ;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述
可以看到显示的是flex-basis的值

13.14flex

在这里插入图片描述
是上面3个属性的复合写法。
在flex属性中，第一个值就是flex-grow的值，第二个值就是flex-shrink的值，第三个值就是flex-basis的值。
值之间用空格隔开。
默认值为0 1 auto。

注：第二和第三个值是可以省略的，只写一个值就代表只有flex-grow的效果。
且flex的优先级高于单一样式，即高于flex-grow、flex-shrink、flex-basis的优先级。

如果想要让元素弹性的优先级高于默认宽，就用flex，想保持默认宽，就用flex-grow。

13.15align-self

在这里插入图片描述
和align-items效果是一样的，只不过align-items是针对父元素中所有的子项，而align-self是只针对某一个子项。
例如：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid; margin: 20px auto;display: flex;color: white;}
        #box div{width: 50px;height:50px ;background: red;line-height: 50px;text-align: center;}
        #box div:nth-child(2){background: blue; width: 80px; flex-basis:100px ;align-self: center;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述

13.16flex案例

骰子的点数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;justify-content: center;align-items: center;}
        #box1 div{width: 30%;height: 30%;border-radius: 50%;background: black;}
        #box2{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;justify-content: space-between;}
        #box2 div{width: 30%;height: 30%;border-radius: 50%;background: black;}
        #box2 div:nth-of-type(2){align-self: flex-end;}
        #box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;justify-content: space-between;}
        #box3 div{width: 30%;height: 30%;border-radius: 50%;background: black;}
        #box3 div:nth-of-type(2){align-self: center;}
        #box3 div:nth-of-type(3){align-self: flex-end;}
        #box4{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;
        flex-wrap: wrap;}
        #box4 div{width: 100px;display: flex;justify-content: space-between;}
        #box4 div:nth-of-type(3) {align-items: flex-end;}
        #box4 i{display: block; width: 30%;height: 60%;border-radius: 50%;background: black;}
        #box5{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;
        flex-wrap: wrap;}
        #box5 div{width: 100px;display: flex;justify-content: center;align-items: center;}
        #box5 div:nth-of-type(1) {align-items: flex-start;justify-content: space-between;}
        #box5 div:nth-of-type(3) {align-items: flex-end;justify-content: space-between;}
        #box5 i{display: block; width: 30%;height: 90%;border-radius: 50%;background: black;}
        #box6{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;
        flex-wrap: wrap;}
        #box6 div{width: 100px;display: flex;justify-content: center;align-items: center;justify-content: space-between;}
        #box6 div:nth-of-type(1) {align-items: flex-start;}
        #box6 div:nth-of-type(3) {align-items: flex-end;}
        #box6 i{display: block; width: 30%;height: 90%;border-radius: 50%;background: black;}
    </style>
</head>
<body>
    <div id="box1">
        <div></div>
    </div>
    <div id="box2">
        <div></div>
        <div></div>
    </div>
    <div id="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box4">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div id="box5">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div id="box6">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
</body>
</html>

显示为：
在这里插入图片描述

两列固定，一列自适应。
左右固定，中间自适应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        #main{display: flex;}
        #left{width: 200px;height: 200px;background: red;}
        #center{flex: 1;height: 300px;background: yellow;}
        #right{width: 150px;height: 200px;background: blue;}
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

显示为：
请添加图片描述
当浏览器缩小时：
在这里插入图片描述
可以看到，左右的宽度是固定的，没有变化，而中间的宽度自适应。

百度弹性导航

这一部分就很适合用弹性来实现，每个导航之间的空隙会自适应屏幕的宽度。
大致的结构为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{text-decoration: none;color: black;line-height: 50px;}
        #main{text-align: center;}
        #hang1{display: flex;justify-content: space-around;}
        #hang1 div{width: 50px;height: 50px;background:skyblue;}
        #hang2{display: flex;justify-content: space-around;height: 80px;align-items: flex-end;}
        #hang2 div{width: 50px;height: 50px;background:skyblue;}    
    </style>
</head>
<body>
    <div id="main">
    <div id="hang1">
        <div>
        <a href="">11</a>
        </div>
        <div>
        <a href="">22</a>
        </div>
        <div>
        <a href="">33</a>
        </div>
        <div>
        <a href="">44</a>
        </div>
        <div>
        <a href="">55</a>
        </div>
    </div>
    <div id="hang2">
        <div>
            <a href="">11</a>
            </div>
            <div>
            <a href="">22</a>
            </div>
            <div>
            <a href="">33</a>
            </div>
            <div>
            <a href="">44</a>
            </div>
            <div>
            <a href="">55</a>
            </div>
    </div>
    </div>    
</body>
</html>