html+css学习第五节

m0_74110356

已于 2022-11-29 18:08:40 修改

阅读量422

点赞数

文章标签： html css 学习

于 2022-11-26 19:16:45 首次发布

本文链接：https://blog.csdn.net/m0_74110356/article/details/128043019

版权

html+css学习第五节

一、strong和b、em和i
二、引用标签
- 1.blockquote：
- 2.q：
- 3.abbr：
- 4.address：
- 5.cite：
三、iframe嵌套页面
- 1.常见属性
- 2.应用场景
四、br标签和wbr标签
- 1.br标签
- 2.wbr标签
五、pre与code
- 1.pre
- 2.code
六、map标签和area标签
- 1.map标签
- 2.area标签
七、embed 和 object 标签
八、audio和video标签
九、文字注解与文字方向
十、link标签扩展学习
十一、Meta标签扩展
十二、html5新标签语义化
- 1.
- 2.
- 3.
十三、flex弹性布局
- 1.flex-direction
- 2.flex-warp
- 3.flex-flow
- 4.justify-content
- 5.align-items
- 6.align-content
十四、作用在flex子项上的css属性
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
十五、flex案例
- 1.骰子
- 2.两列固定，一列自适应
- 3.百度弹性导航
十六、Grid网格布局
- 1.grid-template-columns
- 2.grid-template-rows
- 3.grid-template-areas
- 4.grid-template
- 5.grid-column-gap
- 6.grid-row-gap
- 7.justify-items和align-items
- 8.justify-content和align-content
- 9.作用在grid子项上的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>
            &lt;!DOCTYPE html&gt;
&lt; html lang="en" &gt;
&lt; head &gt;
    &lt; meta charset="UTF-8"&gt;
    &lt; meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt; meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <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;

在这里插入图片描述