前端入门记录

原创已于 2025-07-17 15:13:16 修改 · 1k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-07-13 19:12:51 首次发布

HTML 同时被 3 个专栏收录

4 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

2 篇文章

订阅专栏

前端入门记录

本页面内容全部来自于bilibili博主：罗大富Bigrich合集：3小时前端入门教程（HTML+CSS+JS），这篇CSDN用于复盘所学。

在这里就不提及软件下载和环境搭建了，罗老师那里有详细教程可以点击上方链接进入学习观看。这里说一个比视频中好用的实时浏览页面插件（Live Preview）

Live Preview
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/a93edc2d4b244b43980e1e3140453ccc.png

一、HTML基础

HTML（HyperText Markup Language）不是编程语言，而是一种“标记语言”。它用标签（tag）给文本内容做“语义标记”，告诉浏览器：这是标题、这是段落、这是列表、这是表格、这是输入框……人眼看到的是排版，机器读到的却是一棵 DOM 树（Document Object Model）。

在学习中，HTML主要讲了四个区块的内容：

1.<h1>…<h6> 页面主-副标题，数字越小字号越大
<p> 段落 <ul>/<ol> 无序/有序列表 <li> 列表项
<table> 表格 <tr> 行 <th> 列标题 <td> 单元格

2.<a href="URL" target="_blank"> 超链接；target="_blank"新窗口打开
<img src="路径" alt="说明" width height> 嵌入图片；alt图片失效时显示文字

3.<div> 无意义块级容器，用来“分区”
<nav> 语义：导航区域 <span> 无意义行内容器，用来“包一小段”

4.<form action="后端接口"> 表单数据打包发送
<label for="id"> 点击文字即可聚焦对应输入框
<input type="…"> 用户输入控件；type决定样式与校验规则
<button type="submit"> 提交按钮

以下是各个部分内容的HTML编码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.常见文本标签练习</title>
</head>
<body>
    <h1>一级标题标签</h1>
    <h2>二级标签</h2>
    <p>这是一个标题标签</p><p>这是我的测试标签</p>
    <p>更改文本样式、<strong>字体加粗</strong>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s></p>
    <ul>
        <!-- 无序标签块 -->
        <li>无序列表元素 1</li>
        <li>无序列表元素 2</li>
        <li>无序列表元素 3</li>
    </ul>

    <ol>
        <!-- 有序标签块 -->
        <li>有序列表元素 1</li>
        <li>有序列表元素 2</li>
        <li>有序列表元素 3</li>
    </ol>

    <h1>table row</h1>
    <h1>table data</h1>
    <h1>table header</h1>
    <table border="2">
        <tr>
            <!-- 行 -->
             <!-- 行头 -->
            <th>列标题 1</th>
            <th>列标题 2</th>
            <th>列标题 3</th>
        </tr>
        <tr>
            <!-- 行元素 -->
            <td>元素 1</td>
            <td>元素 2</td>
            <td>元素 3</td>
        </tr>
        <tr>
            <td>元素 21</td>
            <td>元素 22</td>
            <td>元素 23</td>
        </tr>
        <tr>
            <td>元素 31</td>
            <td>元素 32</td>
            <td>元素 33</td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.常见文本标签练习</title>
</head>
<body>
    <h1>一级标题标签</h1>
    <h2>二级标签</h2>
    <p>这是一个标题标签</p><p>这是我的测试标签</p>
    <p>更改文本样式、<strong>字体加粗</strong>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s></p>
    <ul>
        <!-- 无序标签块 -->
        <li>无序列表元素 1</li>
        <li>无序列表元素 2</li>
        <li>无序列表元素 3</li>
    </ul>

    <ol>
        <!-- 有序标签块 -->
        <li>有序列表元素 1</li>
        <li>有序列表元素 2</li>
        <li>有序列表元素 3</li>
    </ol>

    <h1>table row</h1>
    <h1>table data</h1>
    <h1>table header</h1>
    <table border="2">
        <tr>
            <!-- 行 -->
             <!-- 行头 -->
            <th>列标题 1</th>
            <th>列标题 2</th>
            <th>列标题 3</th>
        </tr>
        <tr>
            <!-- 行元素 -->
            <td>元素 1</td>
            <td>元素 2</td>
            <td>元素 3</td>
        </tr>
        <tr>
            <td>元素 21</td>
            <td>元素 22</td>
            <td>元素 23</td>
        </tr>
        <tr>
            <td>元素 31</td>
            <td>元素 32</td>
            <td>元素 33</td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 区块</title>
</head>
<body>
    <!-- div就是分块 -->
    <div class="nav">
        <!-- nav是导航栏 -->
        <a href="#" title="这是一个空白网站">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
    </div>

    <div class="content">
        <h1>文章标题</h1>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
    </div>
    <!-- span是一个行内元素标签 -->
    <span>这是第一个span标签</span>
    <span>这是第一个span标签</span>
    <span>这是第一个span标签</span>
    <span>这是第一个span标签</span>
    <hr>
    <span>连接点这里<a href="#">链接</a></span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <!-- 表单的总标签，以下内容全部通过action将id、name传到后端 -->
        <label for="username">用户名：</label>
        <!-- label标签 -->
        <input type="text" id="username" placeholder="请输入用户名" name="username" required>
        <!-- 输入栏，type指的是输入的文本类型，同时也决定了输入东西的展现形式，required则表示文本为必须输入的内容，没输入会有提示 -->
        <br>
        <br>
        <label for="password">密码：</label>
        <input type="password" id="psd" placeholder="请输入密码" name="password" required>
        <br>
        <br>

        <label for="">性别</label>
        <!-- radio为单选标签，要有同一name -->
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
        <br>
        <br>

        <label>爱好</label>
        <!-- checkbox为多选标签，但是他们的name必须相同 -->
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">跳舞
        <input type="checkbox" name="hobby">rup
        <input type="checkbox" name="hobby">篮球
        <br>
        <br>
<!-- 在这里，这个input和这个bottom的意思一样 -->
        <input type="submit" value="上传">
        <button type="submit">登录</button>

    </form>

    
</body>
</html>

二、CSS基础

CSS（Cascading Style Sheets）是“层叠”样式表，用来描述“HTML 元素长什么样、放在哪、如何动”。浏览器把 HTML 解析成 DOM 后，再生成 CSSOM（CSS Object Model），两者合并成渲染树，最终交给 GPU 画像素。

在学习中，CSS主要讲了四个区块的内容：
1. 引入外部样式表写在本页的样式 style=“…” 行内样式1（优先级最高）

2.选择器
h2{…} 选中所有h2 .class{…} 选中某类 #id{…} 唯一ID
父代、子代选择器 :hover 鼠标悬停状态

3.CSS常用属性
color 文字颜色 background-color 背景色
font: 粗细字号字体; 字体族(Font-family)、字体大小（Font-size)和字体样式（Font-style)
line-height 行间距
display:inline/block/inline-block 元素排列方式切换

4.盒子模型
padding 内边距（字到边框的距离）
border 边框 margin 外边距（边框到别人的距离）

5.浮动
float:left/right 让块级元素贴左/右，文字环绕
clear:both 或 overflow:hidden 解决父元素因浮动“坍塌”

6.定位
position:static/relative/absolute/fixed/sticky
控制元素“脱离”或“固守”文档流；
left/top/right/bottom再配合移动

下面是上面内容的HTML编码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS导入方式</title>
    <!-- 这是一个外联样式 -->
     <!-- stylesheet表格风格样式 -->
    <link rel="stylesheet" href="css\style.css">
<!-- 这是一个内部样式 -->
    <style>
        p{
            color: rgb(208, 101, 6);
            font-size: 26px;
        }
        
        h2{
            color: paleturquoise;
        }
    </style>
</head>
<body>
    <p>这是一个用了css样式的文本</p>
    <!-- 这是一个内联样式 -->
    <h1 style="color:pink;">这是一个一级标题，使用CSS内联样式</h1>
    <h2>这是一个二级标题，使用CSS中的内部样式</h2>
    <h3>这是一个三级标题，使用CSS中的外部样式</h3>
</body>
</html>

这里是外联样式文件代码：

console.log("hello,外联样式");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
            /*  元素选择器*/
    h2{
        color: brown;
    }
    /* 类选择器 */
    .hightlight{
        background-color: yellow;
    }
    /* id 选择器 */
    #header{
        font-size: 35px;
    }
    /* 通用选择器 */
    *{
        font-family: "KaiTi";
        font-weight: bolder;
    }
    /* 子元素选择器 */
    .father >.son   {
        /* 可以理解为这是只针对子代的选择器 */
        color: yellowgreen;
    }
    /* 后代选择器 */
    .father p{
        /* 对类名p标签的全覆盖 */
        color: burlywood;
        font-size: larger;
    }
    /* 相邻元素选择器 */
    /* 只选中紧跟在选中元素之后的标签 */
    h3 + p{
        color: aqua;
        background-color: red;
    }
    /* 伪类选择器 */
    /* 选择处于特定状态或者具有特定属性的元素，比如鼠标悬停或者其他待定状态 */
    #element:hover{
        background-color: blueviolet;
    }
    /* 
    选中第一个子元素  :first-child
                    :nth-child
                    :active
     */
     /* 
     伪元素选择器，感觉是用来装饰美化文本内容的
     ：：after
     : ：before
     */
</style>
<body>
    <h1>不同类型的CSS选择器</h1>

    <h2>这是一个元素选择器示例</h2>
    <h3 class="hightlight">这是一个类选择器实例：</h3>
    <h3>这是另一个类选择器实例</h3>
    
    <h4 id="header">这是一个 ID 选择器实例</h4>
    <div class="father">
        <p class="son">这是一个子元素选择器实例</p>
        <div>
            <p class="grandson">这是一个后代选择器示例 </p>
        </div>
    </div>

    <p>这是一个普通的p标签</p>
    <h3>这是一个兄弟相邻选择器示例</h3>
    <p>这是另一个p标签</p>

    <h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .block{
        background-color: pink;
        width: 150px;
        height: 100px;
    }
    .inline{
background-color: beige;
    }
    .inline-block{
        width: 100px;
        height: 150px;
    }
    p{
        color: pink;
    }
    .div-inline{
        display: inline;
        background-color: aqua;
    }
    .span-inline-block{
        display: inline-block;
        background-color: purple;
        width: 300px;
    }
</style>
<body>
    <h1 style="font: bolder 50px 'KaiTi';">这是一个 font 复合属性示例</h1>
    <p style="line-height: 40px;">我今天再也不睡这么晚了，我的天脑子晕乎乎的眼睛也疼，回去洗个澡差不多睡觉了zzz，今天中午倒是睡得挺香的，希望晚上我也能睡这么香</p>
    
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <img src="image.png" alt="" class="inline-block">
    <h2>display</h2>
    <div style="display: inline; background-color: pink;">这是一个转换成行内元素的div标签</div>
    <div class="div-inline">这是一个转换成行内元素的div标签</div>
    <span class="span-inline-block">这是一个转换成行内块元素的span标签</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* "."指的是类名，“#” 指的是ID名*/


        /* padding指的是内边距，就是字周围所占的距离*/
        /* margin指的是外边距，是边框以外的距离 */
        /* border指的是边框 */
        .demo{
            background-color: plum;
            display: inline-block;
            border: 5px solid yellowgreen;
            padding: 50px;
            margin: 40px;
        }
        .border-demo{
            background-color: pink;
            width: 300px;
            height: 200px;
            padding: 150px 0px 0px 150px;
            margin: 40px;
            border-style: solid /*dashed dotted double*/;
            border-width: /*10px 20px 30px*/ 40px;
            border-color: burlywood;

           
            /* border-left: 20px solid navajowhite; */
        } 
    </style>
</head>
<body>
    <div class="demo">梁兴是个小笨猪</div>
    <div class="border-demo"><a href="#">点我</a>这是一个边框示例</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        /* 浮动就是float，他可以控制行内块元素的位置 */
        .father{
            background-color: rgb(50, 222, 179);
            /* height: 200px; */
            border: 3px solid black;
            /* 防止坍塌方法1 */
            /* 隐藏超出边界的内容 */
            overflow: hidden;
        }

        /* 防止坍塌方法2 */
        /* clear的作用就是清除浮动影响 */
        .father::after{
            content: "";
            display: table;
            clear: both;
        }

        .left-son{
            width: 100px;
            height: 100px;
            background-color: rgb(199, 129, 199);
            float: left;
        }

        .right-son{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .box1{
            height: 350px;
            background-color: aqua;
        }

        .box-normal{
            width: 100px;
            height: 100px;
            background-color: purple;
        }

        .box-relative{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            left: 120px;
            top: 40px;
        }
        
        .box2{
            height: 350px;
            background-color: yellow;
            margin-bottom: 200px;
        }

        .box-absolute{
            width: 100px;
            height: 100px;
            background-color: palevioletred;
            position: absolute;
            left: 120px;
        }

        .box-fixed{
            width: 100px;
            height: 100px;
            background-color: brown;
            position: fixed;
            right:10px;
            top: 330px;
        }
    </style>
</head>
<body>
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>
    <h1>绝对定位</h1>
        <div class="box2">
            <div class="box-normal"></div>
            <div class="box-absolute"></div>
            <div class="box-normal"></div>
        </div>
        <h1>固定定位</h1>
        <div class="box-fixed"></div>
</body>
</html>

三、Java Script

JavaScript（ECMAScript 规范）是浏览器内嵌的动态语言，用来“监听事件、改变 DOM、与网络/存储/设备打交道”。它把静态页面变成应用（Application）。

在学习中，Java Script主要讲了四个区块的内容：

1.<script src="…"> 引入外部 JS <script> 写在本页的脚本
放 <head> n内会阻塞渲染；放 <body> 底部或加 defer 不阻塞

2.JS基础语法
var/let/const 声明变量 if/for/while 流程控制 console.log() 打印调试

3.事件属性
onclick=“函数()” 点击触发 onfocus/onblur 获得/失去焦点触发

4.DOM 查询
getElementById() 按 id 抓节点 getElementsByClassName() 按类抓
innerHTML / innerText 读写节点内容 style.属性直接改样式
addEventListener('click',fn) 现代事件绑定

5.DOM 节点操作
这里综合了前面的知识，做了一个可以增加或者删除行，修改内容的表格：
在这里插入图片描述

createElement() 新建节点 appendChild() 追加到父节点
removeChild() 删除节点
this 指向被点击的当前行/按钮

以下是上述功能所示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS导入方式</title>
    <script>
        console.log("hello,head标签的内联样式")
    </script>

    <script src="JS\myscript.js"></script>
</head>

<body>
    <h1>JS的导入方式</h1>
    <script>
        console.log("hello,body标签的内联样式")
        alert("你好内联样式弹窗")
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS基础语法</title>
</head>
<body>
    <script>
        var x;
        let y = 5;
        const PI = 3.14;
        console.log(x,y,PI);
        let name ="如花"
        console.log(name);
        let empty_value = null;
        console.log(empty_value);
        
        let age = 18;
        if (age>=18){
            console.log("你已经成年了");
        }else{
            console.log("不好意思，你还没有成年");
            
        }

        // let time = 22;
        // if(time<12){
        //     alert("上午好！！！！！")
        // }else if(time<18){
        //     alert("下午好！！！！！")
        // }else{
        //     alert("晚上好！！！！！")
        // }
        console.log("循环");
        for(let i=0 ; i<10; i++){
            console.log(i);
            
        }

        console.log("while循环");
        let count = 1;
        while (count<=10) {
            console.log(count);
            count++;
        }
        

        
    </script>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="click_event()">这是一个点击事件按钮</button>
    <input type="text" onfocus="focus_event()" onblur="blur_event()">
    <script>
        //点击事件
        function click_event(){
            alert('点击事件触发了');
        }
        //获取焦点
        function focus_event() {
            console.log('获取焦点');
        }
        //失去焦点
        function blur_event() {
            console.log('失去焦点');
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>

    <div id="box1">这是一个ID选择器标签</div>
    <div class="box2">这是一个类名选择器标签</div>
    <div>普通的div标签</div>
    <button>点击按钮</button>

    <script>
        var element_id = document.getElementById('box1');
        console.log(element_id);

        var element_class = document.getElementsByClassName('box2')[0];
        console.log(element_class);

        var element_tag = document.getElementsByTagName('div')[2];
        console.log(element_tag);
        
        element_id.innerHTML = '<a href="#">跳转链接</a>';
        element_class.innerTaxt = '修改后的类选择器HTML文本';

        element_tag.style.color='red'
        element_tag.style.fontSize='20px'

        //DOM属性绑定事件
        var button_element = document.getElementsByTagName('button')[0]
        console.log(button_element);

        // button_element.onclick=function () {
        //     alert('DCM属性按键触发');
        // }
        button_element.addEventListener('click',function () {
            alert('通过 addEventListener 触发链接')
        })
    </script>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的增删改查</title>
    <style>
        table{
            width: 100%;
            margin-top: 20px;
        }
        th,td{
            border: 1px solid #ddd;
            text-align: center;
            padding: 8px;
        }
        .shanchu{
            font-size: 30px;
            font-family: SimHei, sans-serif;
            color: rgba(236, 6, 6, 0.954);
            cursor: pointer;
            border-radius: 10px;
            background-color: rgb(241, 179, 86);
            margin: 0 50px 0 0;
            float: right;
            width: 100px;
            height: 50px;
            transition: background-color 0.3s;
        }
        .shanchu:hover{
            color: black;
            background-color: rgb(228, 68, 32);
        }
        .bianji:hover{
            color: black;
            background-color: rgb(133, 244, 7);
        }
        .bianji{
            font-size: 30px;
            font-family: SimHei, sans-serif;
            color: rgba(105, 154, 21, 0.954);
            cursor: pointer;
            border-radius: 10px;
            background-color: rgb(39, 83, 25);
            float: left;
            margin: 0 0 0 50px;
            width: 100px;
            height: 50px;
            transition: background-color 0.3s;
        }
        th{
            background-color:#ddd;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center">表格的增删改查</h1>
    <button onclick="addRow()">新增数据</button>
    <table id="table">
        <tr>
            <th>姓名</th>
            <th>联系方式</th>
            <th>操作</th>
        </tr> 
        <tr>
            <td>梁兴</td>
            <td>2024401091</td>
            <td>
                <button class="bianji" onclick="editRow(this)">编辑</button>
                <button class="shanchu" onclick="deleteRow(this)">删除</button>
            </td>
        </tr>
    </table>
    <script src="./JS/table.js"></script>
</body>
</html>

四、移动端适配和弹性盒子

1.rem 适配脚本
document.documentElement.style.fontSize = screen.width/10+'px'
这里让 1 rem 永远等于屏幕宽度的 1/10，实现等比缩放

2.Flex 布局
display:flex 父盒子变弹性容器，子元素可自动伸缩
子元素 width 用 rem 写，自动随屏幕改变大小

代码：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem移动端适配原理</title>
    <style>
        html{
            font-size: 20px;
        }
        .box1-px{
            width: 300px;
            height: 100px;
            background-color: purple;
                        margin-bottom: 50px;
        }
        .box2-rem{
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1-px"></div>
    <div class="box2-rem"></div>

    <script>
        // 获取设备宽度，计算HTML标签的font-size的属性值
        function resetHTMLFontSize(){
            document.documentElement.style.fontSize = screen.width/10 + 'px'
        }
        resetHTMLFontSize()

        // 绑定事件
        window.onresize = resetHTMLFontSize;

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex弹性盒子</title>
    <style>
        html{
            font-size: 10px;
        }

        .container{
            display: flex;
            height: 40rem;
            background-color: aqua;
            /* flex-direction: column; */
            /*  */
            flex-wrap: wrap;
            /* 项目在同一轴线排开是否换行 */
            /* justify-content: space-evenly;主轴对称方式 */
            /* align-items: stretch;交叉轴对称方式 */
            align-content: center;
        }
        .item{
            width: 20rem;
            font-size: 8rem;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <div class="item" style="background-color: yellowgreen;">1</div>
        <div class="item" style="background-color: pink;">2</div>
        <div class="item" style="background-color: white;">3</div>
        <div class="item" style="background-color: plum;">4</div>
        <div class="item" style="background-color: palegreen;">5</div>
        <div class="item" style="background-color: paleturquoise;">6</div>
    </div>
</body>
</html>