html+css学习第五节
一、strong和b、em和i
strong和em都是表示强调的标签,表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。
区别在于,strong 和 em 是具备语义化的,而b和i是不具备语义化的。
二、引用标签
1.blockquote:
引用大段的段落解释
2.q:
引用小段的短语解释
3.abbr:
缩写或首字母缩略词
4.address:
引用文档地址信息
5.cite:
引用著作
三、iframe嵌套页面
iframe 元素会创建包含另一个文档的内联框架(即行内框架)
(可以引入其他的html到当前html中显示)
主要利用iframe的属性进行样式的调节
1.常见属性
<iframe src="https://www.taobao.com" frameborder="0" ></iframe>
<iframe src="https://www.taobao.com" frameborder="0" scrolling=no></iframe>
(消除滚动条)
<iframe srcdoc="hello world" src="https://www.taobao.com" frameborder="0" scrolling="no"width="400"height="400"></iframe>
![网页显示](https://img-blog.csdnimg.cn/24433d4390ed40ba9b0aca828f4b5220.png
)<!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%;height: 770px;}
</style>
</head>
<body>
<iframe srcdoc="<h1>hello world<h1>" src="https://www.taobao.com" frameborder="0" scrolling="no"width="400"height="400"></iframe>
</body>
</html>
2.应用场景
数据传输、共享代码、局部刷新、第三方介入等。
<iframe src="https://img.alicdn.com/imgextra/i3/4201740998/O1CN01sl5Z451JF81cILjxh_!!4201740998.jpg_180x180xzq90.jpg_.webp" frameborder="0" width="200"height="200"></iframe>
四、br标签和wbr标签
1.br标签
br
:表示换行操作,而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>
For this part, you are required to write a composition about 120 words on the topic: Changes in People's Daily Expenses.
<br> Your composition should be written on the following table and Chinese given below.
</p>
</body>
</html>
2.wbr标签
如果单词太长,或者你担心浏览器会在错误的位置换行,那么您可以使用wbr
元素来添加 Word Break Opportunity(单词换行时机)
五、pre与code
1.pre
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。(针对网页中的程序代码的显示效果)
2.code
只应该表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 code 标签。虽然 code 标签通常知识把文本变成等宽的字体,但它暗示着这段文本是源程序代码。
<!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>
<!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>
hello world
</body>
</code>
</pre>
</body>
</html>
六、map标签和area标签
给特殊图形添加链接
1.map标签
定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area能添加的热区的形状:矩形、图形、多边形
2.area标签
area元素的href属性定义区域的URL,shape属性来定义区域的形状,coords属性定义热区的坐标。
<!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>
<img src="./img/web1.png" alt=""usemap="#round">
<map name="round">
<area shape="rect" coords="9 7 50 25" href="https://www.taobao.com" alt="">
</map>
</body>
</html>
七、embed 和 object 标签
embed 和 object 都表示能够嵌入一些多媒体,如flash动画、插件等。基本使用没有太多区别,主要是为了兼容不同的浏览器而已。
<!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>
<embed src="./img/zflash369.swf" type="">
<!-- <object>
<param name="movie" value="./img/zflash369.swf">
</object> -->
</body>
</html>
八、audio和video标签
audio标签表示嵌入音频文件,video标签表示嵌入视频文件。默认控件是不显示的,可通过controls属性来显示控件。()属于h5的功能
为了能够支持多个备选文件的兼容支持,可以配合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>
<audio src="C:\Users\徐\Documents\vs code\img\林俊杰 - 裹着心的光 [mqms2].flac" controls></audio>
</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>
<!-- <audio src="C:\Users\徐\Documents\vs code\img\林俊杰 - 裹着心的光 [mqms2].flac" controls></audio> -->
<video src="C:\Users\徐\Videos\钟离.mp4" controls></video>
</body>
</html>
九、 文字注解与文字方向
ruby标签定义ruby注释(中文注音或字符),rt标签定义字符(中文注音或字符)的解释或发音。
bdo标签课覆盖默认的文本方向
<!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>
<p>
<bdo dir="ltr">绝对理智</bdo>假期
</p>
</body>
</html>
十、link标签扩展学习
<!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>
<link rel="icon"type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
<link rel="dns-prefetch" href="//static.360buyimg.com">
</head>
<body>
</body>
</html>
十一、Meta标签扩展
十二、html5新标签语义化
1.
header:页眉
footer:页脚
main:主体
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>
<nav>
<ul>
<li>首页</li>
<li>论坛</li>
<li>关于</li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
</html>
注:header、footer、main在一个网页中只能出现一次。
2.
article:独立的内容
aside:辅助信息的内容
section:区域
figure:描述图像或视频
figcaption:描述视频或图像的标题部分
<!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>
<nav>
<ul>
<li>首页</li>
<li>论坛</li>
<li>关于</li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<ul>
<li>
<figure>
<img src="./img/原神.jpg" alt="">
<figcaption>
原神
<br>
深渊法师
</figcaption>
</figure>
</li>
</ul>
</section>
</article>
</main>
<footer></footer>
</body>
</html>
3.
datalistat:选项列表
<datalist id="elems">
<option value="a"></option>
<option value="ab"></option>
<option value="abc"></option>
<option value="apple"></option>
<option value="abbr"></option>
<option value="around"></option>
</datalist>
details/summary:文档细节/文档标题
<details>
<summary>html</summary>
<p>语义化标签</p>
</details>
progress/meter:定义进度条/定义度量范围
<progress min="0"max="10"value="5"></progress>
<meter min="0"max="100"value="80"low="10"high="60"></meter>
time:定义日期或时间
<p>
今天是<time title="11-26">周六</time>假期
</p>
mark:带有记号的文本
<p>
今天是<mark>周六</mark>假期
</p>
十三、flex弹性布局
1.flex-direction
flex-direction 用来控制子项整体布局方向,是从左往右还是从右往左,是从上往下还是从下往上。
#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;}
2.flex-warp
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>
#box2{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-wrap: wrap;}
#box2 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red;}
</style>
</head>
<body>
<div id="box2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
注:nowrap会适配宽度,当压缩不了的时候才会溢出,容器自适应。
3.flex-flow
flex-flow 属性是flex-direction 和 flex-wrap的缩写,表示flex布局的flow流动特性。第一个值表示方向,第二个值表示换行,中间用空格隔开。
flex-flow: column wrap;
4.justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式。(根据flex-direction
决定)
主轴:水平
justify-content:flex-end ;
justify-content:space-between ;
justify-content:space-around;
justify-content:space-evenly;
5.align-items
align-items 中的 items 指的就是flex子项们,因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
justify-content: space-evenly;align-items:flex-start ;
justify-content: space-evenly;align-items:flex-end ;
6.align-content
align-content 可以看成和justfy-content是相似且对立的属性,如果所有flex子项只有一行,则align-content属性是没有任何效果的。(多行)
justify-content: space-evenly;flex-wrap: wrap;align-items: flex-start;align-content: flex-start;
justify-content: space-evenly;flex-wrap: wrap;align-items: flex-start;align-content: flex-end;
十四、作用在flex子项上的css属性
1.
#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; }
#box div:nth-child(2){order: 1;}
#box div:nth-child(3){order: -1;}
2.
#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; }
#box div:nth-child(2){color: black;background:yellow ;flex-grow:0.5 ;}
3.
#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; }
#box div:nth-child(2){color: black;background:yellow ;flex-grow:0.5 ;}
#box div:nth-child(3){color: black;background:blue ;flex-grow:0.2 ;}
4.
#box2 div:nth-child(2){color: black;background:yellow ;flex-shrink: 2;}
#box2{width:300px;height: 300px;border:1px black solid;margin: 20px auto;display: flex;}
#box2 div{width:50px;height: 50px;color: white;line-height: 50px;text-align: center;background:red; }
5.
#box2 div:nth-child(2){color: black;background:yellow ;flex-basis: 100px;}
#box2{width:300px;height: 300px;border:1px black solid;margin: 20px auto;display: flex;}
#box2 div{width:50px;height: 50px;color: white;line-height: 50px;text-align: center;background:red; }
6.
#box2 div:nth-child(2){color: black;background:yellow ;width: 100px;flex: 0 1 auto;}
#box2 div:nth-
7.
child(2){color: black;background:yellow ;flex:2;}
#box2{width:300px;height: 300px;border:1px black solid;margin: 20px auto;display: flex;}
#box2 div{width:50px;height: 50px;color: white;line-height: 50px;text-align: center;background:red; }
注:让弹性的优先级高于默认宽度
8.
#box2{width:300px;height: 300px;border:1px black solid;margin: 20px auto;display: flex;align-items: center;}
#box2 div{width:50px;height: 50px;color: white;line-height: 50px;text-align: center;background:red; }
#box2 div:nth-child(2){color: black;background:yellow ;}
#box2 div:nth-child(1){align-self: flex-start ;}
注:整体设置,单个设置
十五、flex案例
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>
#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%;background: black;border-radius: 50%;}
#box2{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;justify-content: space-between;}
#box2 div{width: 30%;height: 30%;background: black;border-radius: 50%;}
#box2 div:last-child{align-self:flex-end;}
#box3{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;display: flex;justify-content: space-between;align-items: center;}
#box3 div{width: 30%;height: 30%;background: black;border-radius: 50%;}
#box3 div:first-child{align-self:flex-start;}
#box3 div:last-child{align-self:flex-end;}
#box4{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;display: flex;flex-wrap: wrap;}
#box4 div{width: 100%;display: flex;justify-content: space-between;}
#box4 div:last-child{align-items: flex-end;}
#box4 i{display: block; width: 30%;height: 60%;background: black;border-radius: 50%;}
#box5{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;display: flex;flex-wrap: wrap;}
#box5 div{width: 100%;display: flex;justify-content:center;align-items: center;}
#box5 div:first-child{align-items: flex-start;justify-content: space-between;}
#box5 div:last-child{align-items: flex-end;justify-content: space-between;}
#box5 i{display: block; width: 30%;height: 90%;background: black;border-radius: 50%;}
#box6{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;display: flex;flex-wrap: wrap;}
#box6 div{width: 100%;display: flex;justify-content: space-between;}
#box6 div:first-child{align-items: flex-start;}
#box6 div:last-child{align-items: flex-end;}
#box6 i{display: block; width: 30%;height: 90%;background: black;border-radius: 50%;}
</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>
2.两列固定,一列自适应
<!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>
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>
*{margin: 0;padding: 0;}
#box1{width: 735px;height:256px;border: 1px solid bisque;border-radius: 20px; margin-left: 300px;margin-top: 100px;}
#box1 div{display: flex;flex-wrap: wrap;justify-content: space-around;}
#box1 div:first-child{margin-top: 30px;}
#box1 div:last-child{margin-top:30px}
#box1 i{display: block;}
#box1 i img{width:60px;height:60px;}
#box1 h3{font-style: normal;font-weight: normal;text-align: center;}
</style>
</head>
<body>
<div id="box1">
<div>
<i>
<img src="https://m.baidu.com/bdlogo/dh1_xinwen_c91c0322e430b019ac7bad08ea95f248.png" alt="">
<h3>新闻</h3>
</i>
<i>
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=758148275,3252013660&fm=179&app=35&f=PNG?w=387&h=387&s=EF871B66D67551847907386B02007018" alt="">
<h3>视频</h3>
</i>
<i>
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2832844731,2703324651&fm=179&app=35&f=PNG?w=129&h=129&s=E537AA76B469D5055E7FA8FA0300C03F" alt="">
<h3>小说</h3>
</i>
<i>
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2195259559,863568018&fm=179&app=35&f=PNG?w=387&h=387&s=66293666D07951844847E87B0200503B" alt="">
<h3>图片</h3>
</i>
<i>
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2383097158,3535800927&fm=179&app=35&f=PNG?w=387&h=387&s=00934A7ED46751050D1233D10200C09E" alt="">
<h3>地图</h3>
</i>
</div>
<div>
<i>
<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1220673176,1987534443&fm=179&app=35&f=PNG?w=387&h=387&s=2291A16C4A316184535E5649020050FD" alt="">
<h3>网站</h3>
</i>
<i>
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1952867002,2106294501&fm=179&app=35&f=PNG?w=390&h=387&s=01938A7E60320D9A4FB2A3C10300709F" alt="">
<h3>贴吧</h3>
</i>
<i>
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3079529804,4278101905&fm=179&app=35&f=PNG?w=129&h=129&s=81D187663C679005430E26500300C0DA" alt="">
<h3>健康</h3>
</i>
<i>
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1774094608,3517642310&fm=179&app=35&f=PNG?w=387&h=387&s=00938A7EC836608445DA1EC90200509F" alt="">
<h3>营销</h3>
</i>
<i>
<img src="https://t8.baidu.com/it/u=233749758,3836311004&fm=179&app=35&f=PNG?w=387&h=387&s=CB023366FA4751455E923BD30200E09E" alt="">
<h3>更多</h3>
</i>
</div>
</div>
</body>
</html>
十六、Grid网格布局
Grid布局是一个二维的布局方法,纵横两个方向总是同时存在。
1.grid-template-columns
对网格进行纵横划分,形成二维布局。单位可以是像素,百分比,自适应以及fr单位网格剩余空间比例单位)
2.grid-template-rows
有时候,我们网格的划分是很规律的,如果需要添加多个纵横网格时,可以利用repeat()语法进行简化操作。
<!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: 500px;height: 500px;border: 1px gray dotted;display: grid;
/* grid-template-rows: 100px auto 25%;
grid-template-columns: 100px 100px 200px 100px;} */
grid-template-rows:repeat(3,1fr);
grid-template-columns:repeat(3,1fr) ;
}
.box div{background: red;border: 1px black solid;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
3.grid-template-areas
area是区域的意思,grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
4.grid-template
grid-template是grid-template-rows,grid-template-columns和grid-template-areas属性的缩写。
<!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 gray dotted;display: grid;
grid-template-rows:repeat(3,1fr);
grid-template-columns:repeat(3,1fr) ;
}
.box div{background: red;border: 1px black solid;}
.box2{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
grid-template-rows:repeat(3,1fr);
grid-template-columns:repeat(3,1fr) ;
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
}
.box2 div{background: red;border: 1px black solid;}
.box2 div:nth-child(1){grid-area: a1;}
.box2 div:nth-child(2){grid-area: a2;}
.box2 div:nth-child(3){grid-area: a3;}
</style>
</head>
<body>
<div class="box2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
5.grid-column-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
6.grid-row-gap
CSS grid-gap属性是grid-colum-gap和grid-row-gap属性的缩写。
/* grid-column-gap: 10px;
grid-row-gap: 20px; */
grid-gap: 20px 10px;
7.justify-items和align-items
justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐。
align-items指定了网络元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。
justify-items: start;
justify-items: center;
align-items: center;
8.justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的水平分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。
justify-content: center;
注:针对整个网格
9.作用在grid子项上的css属性
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: span 2;
/* grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: span 2; */
grid-column: 2 / 3;
grid-row: 2 /span 2;