css学习**

Ling_Ye_

已于 2022-11-25 18:37:14 修改

阅读量315

点赞数

文章标签： css 学习前端

于 2022-11-24 23:35:09 首次发布

本文链接：https://blog.csdn.net/Ling_Ye_/article/details/128028616

版权

第一部分

1. b标签与i标签

表现形态都是文本加粗和文本斜体

区别：是否具备语义化

代码演示

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

效果演示
在这里插入图片描述

2.引用标签的基本操作

blockquote : 引用大段的段落解释
q : 引用小段的短语解释
abbr : 缩写或首字母缩略词
address : 引用文档地址信息
cite : 引用著作的标题

代码演示

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

效果演示
在这里插入图片描述

3. iframe标签嵌套页面

可以引入其他的html到当前html中显示。

主要是利用iframe的属性进行样式的调节。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    iframe{ width:100%; height:700px;}
    </style>
</head>
<body>
   <!--  <iframe srcdoc="<h1>hello world</h1>" src="https://www.taobao.com" frameborder="0" scrolling="no" width="400" height="400"></iframe> -->
   <!-- <iframe src="https://www.taobao.com" frameborder="0" scrolling="no"></iframe> -->
   <iframe src="https://g.163.com/r?site=netease&affiliate=homepage&cat=homepage&type=logo450x40&location=1" frameborder="0" width="450" height="40"></iframe>
</body>
</html>

效果演示
在这里插入图片描述

4.br标签与 wbr标签

br 就是换行、 wbr 就是软换行（在指定时机进行换行）

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <p>
        hello ahsj  jdhakj  hshdhdsj  sjdhsj asdsad  <br> hello ahsj  jdhakj  hshdhdsj  sjdhsj asdsad
    </p> -->
    <p>
        hello ahsj  jdhakj  hshdhdsj  sjdhsj asdsad hello ahsjjdhakjhshdhdsj XML<wbr>HTTP<wbr>Request  sjdhsj asdsad
    </p>
</body>
</html>

效果演示
在这里插入图片描述

5.pre标签与 code标签

针对网页中的程序代码的显示效果。

代码演示

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

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

效果演示
在这里插入图片描述

6.map标签与 area标签

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="./img/star.jpg" alt="" usemap="#star">
    <map name="star">
        <!-- <area shape="rect" coords="205 83 386 173" href="https://www.taobao.com" alt=""> -->
        <!-- <area shape="circ" coords="300 130 50" href="" alt=""> -->
        <area shape="poly" coords="305 99 233 156 256 250 172 197" href="" alt="">
    </map>
</body>
</html>

效果演示
在这里插入图片描述

7.embed标签与 object标签

给flash和一些插件进行渲染操作的标签。

8.audio标签与 video标签

引入音频与视频的标签。属于H5的功能。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <audio src="./img/johann_sebastian_bach_air.mp3" controls loop autoplay></audio> -->
    <!-- <video src="./img/Intermission-Walk-in_512kb.mp4" controls></video> -->
    <video>
        <source src="./img/Intermission-Walk-in.ogv"></source>
        <source src="./img/Intermission-Walk-in_512kb.mp4"></source>
    </video>

    <div style="position: relative; height:250px; overflow: hidden;">
            <video style="min-width:100%; min-height:100%;" loop="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-fullscreen="false" x5-video-player-type="h5" id="introvideo" autoplay="">
                    <source src="http://shimmer.neusoft.edu.cn/h/www/media/intro2016.mp4" type="video/mp4">
                    <source src="http://shimmer.neusoft.edu.cn/h/www/media/intro2016.webm" type="video/webm">
            </video>
    </div>
</body>
</html>

效果演示
在这里插入图片描述

9.文字注解与文字方法

ruby 、 rt 这样一个组合

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    span{ direction: rtl; unicode-bidi:bidi-override; }
    </style>
</head>
<body>
    <ruby>
        寒<rt>hán</rt>冬
    </ruby>
    <p>
        <bdo dir="rtl">爱神的箭</bdo>卡后端框架爱迪生
    </p>
    <p>
        <span>爱神的箭</span>卡后端框架爱迪生
    </p>
    
</body>
</html>

效果演示
在这里插入图片描述

10. link标签扩展学习

添加网址标题栏前的小图标：

 <link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
    DNS预解析：
    <link rel="dns-prefetch" href="//static.360buyimg.com">

代码演示

<!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>来自瑞典森林</title>
    <link rel="icon" type="/image/x-icon" href="./favicon.icon">

效果演示
在这里插入图片描述

11. meta标签扩展学习

meta添加一些辅助信息。

<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
<meta name="keywords" content="大连美食,大连酒店,大连团购">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url="">
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">

12… HTML5新的语义化标签

header : 页眉
footer : 页脚
main : 主体
hgroup : 标题组合
nav : 导航

注：header、footer、main 在一个网页中只能出现一次。

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

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

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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>
                <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>
                    <option value="around"></option>
                </datalist>
                <details open>
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>
                <progress min="0" max="10" value="8"></progress>
                <meter min="0" max="100" value="80" low="10" high="60"></meter>
                <p>
                    今天是<time title="2-14">情人节</time>，街上人很多。
                </p>
                <p>
                    今天是<mark>情人节</mark>，街上人很多。
                </p>
            </section>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="./img/youku.jpg" alt="">
                            <figcaption>
                                    新水果篮子❤️高甜   
                                    <br>
                                    十二生肖恋上美少女！
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="./img/youku.jpg" alt="">
                            <figcaption>
                                    新水果篮子❤️高甜   
                                    <br>
                                    十二生肖恋上美少女！
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="./img/youku.jpg" alt="">
                            <figcaption>
                                    新水果篮子❤️高甜   
                                    <br>
                                    十二生肖恋上美少女！
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
            <section></section>
        </article>
        <aside>

        </aside>
    </main>
    <footer></footer>
</body>
</html>

效果演示
在这里插入图片描述

第二部分

1.flex弹性布局（a）

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
在这里插入图片描述
flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

在这里插入图片描述

代码演示

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

    #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;}

    #box2{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; /* flex-wrap:wrap; flex-direction: column; */ flex-flow: column wrap;}
    #box2 div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}
    </style>
</head>
<body>
    <!-- <div id="parent">
        <div id="box"></div>
    </div> -->

    <!-- <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div> -->

    <div id="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

效果演示
在这里插入图片描述

2.flex弹性布局（b）

flex-wrap用来控制子项整体单行显示还是换行显示。
注：默认值为 nowrap ，若元素多的情况下会发生压缩至内容最小值再溢出。
flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。
（flex-wrap：wrap；+ flex-direction：colum = flex-flow：colum wrap；）
justify-content属性决定了主轴方向上子项的对齐和分布方式。（主轴方向为自己设置的方向）

在这里插入图片描述

注：在使用有空隙的属性时，若某行元素过多，则会自适应压缩后溢出，而溢出部分会换行再进行空隙操作

代码演示

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

    #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;}

    #box2{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; /* flex-wrap:wrap; flex-direction: column; */ flex-flow: column wrap;}
    #box2 div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}

    #box3{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; justify-content: space-evenly; flex-wrap:wrap;}
    #box3 div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}
    </style>
</head>
<body>
    <!-- <div id="parent">
        <div id="box"></div>
    </div> -->

    <!-- <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div> -->

    <!-- <div id="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
    </div> -->

    <div id="box3">
        <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>

效果演示
在这里插入图片描述

3.flex弹性布局（c）

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
在这里插入图片描述
align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

代码演示

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

    #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;}

    #box2{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; /* flex-wrap:wrap; flex-direction: column; */ flex-flow: column wrap;}
    #box2 div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}

    #box3{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; justify-content: space-evenly; flex-wrap:wrap;}
    #box3 div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}

    #box4{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; justify-content: space-evenly;  flex-wrap:wrap;  align-items: flex-start; align-content: space-around; }
    #box4 div{ width:50px; background:red;}
    </style>
</head>
<body>
    <!-- <div id="parent">
        <div id="box"></div>
    </div> -->

    <!-- <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div> -->

    <!-- <div id="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
    </div> -->

    <!-- <div id="box3">
        <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> -->
    <div id="box4">
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
    </div>
</body>
</html>

效果演示
在这里插入图片描述

4.flex弹性布局（d）

作用再flex子项上的css属性

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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;}
    /* #box div:nth-child(2){ order:1;}
    #box div:nth-child(3){ order:-1;} */
    #box div:nth-child(2){ background:yellow; color:black; flex-grow: 1;}
    #box div:nth-child(3){ background:blue; color:black; 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>

效果演示
在这里插入图片描述

5.flex弹性布局（e）

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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;}
    /* #box div:nth-child(2){ order:1;}
    #box div:nth-child(3){ order:-1;} */
    #box div:nth-child(2){ background:yellow; color:black; flex-grow: 1;}
    #box div:nth-child(3){ background:blue; color:black; flex-grow: 2;}

    #box2{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; align-items: flex-end;}
    #box2 div{ width:50px; color:white; line-height: 50px; text-align: center; background:red;}
    #box2 div:nth-child(2){ background:yellow; color:black; /* flex:1;  *//* flex-basis: 250px; */ /* flex-shrink: 2; */ align-self: center;}
    #box2 div:nth-child(1){ align-self: center;}
    </style>
</head>
<body>
    <!-- <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div> -->

    <div id="box2">
        <div>1</div>
        <div>测试文字</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

效果演示
在这里插入图片描述

6.flex弹性布局（骰子）

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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 black solid; 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 black solid; 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 black solid; 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 black solid; 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>

效果演示
在这里插入图片描述

7.flex弹性布局（自适应）

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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>

效果演示
在这里插入图片描述

8.grid网格布局（）

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。
在这里插入图片描述

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{ width:300px; height:300px; border:1px gray dotted; display: grid;
        /* grid-template-rows: 100px auto 25%;
        grid-template-columns: 100px 100px 200px 100px; */
       /*  grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr; */
        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>

效果演示
在这里插入图片描述

9.grid网格布局（）

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{ width:300px; height:300px; border:1px gray dotted; display: grid;
        /* grid-template-rows: 100px auto 25%;
        grid-template-columns: 100px 100px 200px 100px; */
       /*  grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr; */
        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"; */
        grid-template: 
        "a1 a1 a1" 1fr
        "a2 a2 a3" 1fr
        "a2 a2 a3" 1fr
        /1fr 1fr 1fr;
        /* grid-column-gap: 10px;
        grid-row-gap: 20px; */
        grid-gap:20px 10px;
    }
    .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="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> -->

     <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

效果演示

在这里插入图片描述

11.grid网格布局（）

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{ width:300px; height:300px; border:1px gray dotted; display: grid;
        /* grid-template-rows: 100px auto 25%;
        grid-template-columns: 100px 100px 200px 100px; */
       /*  grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr; */
        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"; */
        grid-template: 
        "a1 a1 a1" 1fr
        "a2 a2 a3" 1fr
        "a2 a2 a3" 1fr
        /1fr 1fr 1fr;
        /* grid-column-gap: 10px;
        grid-row-gap: 20px; */
        grid-gap:20px 10px;
    }
    .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;}

    .box3{ width:500px; height:500px; border:1px gray dotted; display: grid;
        grid-template-rows: repeat(3 , 100px);
        grid-template-columns: repeat(3 , 100px);
       /*  justify-items: end;
        align-items:end; */
       /*  place-items: start end; */
       /* justify-content: space-between;
       align-content: space-between; */
       place-content: space-between space-between;
    }
    .box3 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> -->

    <!-- <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div> -->

    <div class="box3">
        <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>

效果演示
在这里插入图片描述

12.grid网格布局（）

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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;
        /* 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;
    }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
</body>
</html>

效果演示
在这里插入图片描述

13.grid网格布局（）

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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;
        /* 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; */
        grid-area: 3 / 2 / 4 / 4;   /* 第一个值是水平的起始位置 , 第二个值是垂直的起始位置，三个值是水平的结束位置，第四个值是垂直的结束位置 */
    }

    .box2{ width:300px; height:300px; border:1px gray dotted; display: grid;
        grid-template-rows: repeat(3 , 1fr);
        grid-template-columns: repeat(3 , 1fr);
    }
    .box2 div{ background:red; border:1px black solid;}
    .box2 div:nth-child(2){ /* justify-self: start; align-self: end; */ place-self:end start ; }
    </style>
</head>
<body>
    <!-- <div class="box">
        <div></div>
    </div> -->

    <div class="box2">
        <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>

效果演示
在这里插入图片描述

14.grid网格布局（骰子）

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
    }
    .box div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box div:nth-child(1){ grid-area: 2 / 2 / 3 / 3; }

    .box2{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
    }
    .box2 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box2 div:nth-child(2){ grid-area: 3 / 3 / 4 / 4; }

    .box3{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
    }
    .box3 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box3 div:nth-child(2){ grid-area: a5; }
    .box3 div:nth-child(3){ grid-area: a9; }

    .box4{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
    }
    .box4 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box4 div:nth-child(2){ grid-area: a3; }
    .box4 div:nth-child(3){ grid-area: a7; }
    .box4 div:nth-child(4){ grid-area: a9; }

    .box5{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
    }
    .box5 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box5 div:nth-child(2){ grid-area: a3; }
    .box5 div:nth-child(3){ grid-area: a7; }
    .box5 div:nth-child(4){ grid-area: a9; }
    .box5 div:nth-child(5){ grid-area: a5; }

    .box6{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
    }
    .box6 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box6 div:nth-child(2){ grid-area: a3; }
    .box6 div:nth-child(3){ grid-area: a7; }
    .box6 div:nth-child(4){ grid-area: a9; }
    .box6 div:nth-child(5){ grid-area: a4; }
    .box6 div:nth-child(6){ grid-area: a6; }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
    </div>
    <div class="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果演示
在这里插入图片描述

15.grid网格布局（案例）

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{ width:280px; height:352px; margin:20px auto; display: grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(4 , 1fr);
        grid-template-areas: 
        "a1 a2 a2"
        "a3 a2 a2"
        "a4 a4 a5"
        "a6 a7 a7";
        grid-gap: 6px 6px;
    }
    .box div{ background:red;}
    .box div:nth-child(1){ grid-area: a1;}
    .box div:nth-child(2){ grid-area: a2;}
    .box div:nth-child(3){ grid-area: a3;}
    .box div:nth-child(4){ grid-area: a4;}
    .box div:nth-child(5){ grid-area: a5;}
    .box div:nth-child(6){ grid-area: a6;}
    .box div:nth-child(7){ grid-area: a7;}
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>