css网页美化元素

玖霆

已于 2023-08-11 16:54:03 修改

阅读量198

点赞数 1

分类专栏： CSS笔记文章标签： css 前端 css3

于 2023-08-11 12:04:02 首次发布

本文链接：https://blog.csdn.net/m0_73895936/article/details/132228332

版权

CSS笔记专栏收录该内容

3 篇文章 1 订阅

订阅专栏

css网页美化元素

3.1字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        /* div字体样式，宋体，大小20px，加粗，风格倾斜
            font-family：字体类型，多个元素之间以逗号隔开，顺序为先写英文、再写中文
            font-size：字体大小，默认大小：16px
            font-weight：字体的粗细（粗：bold,bolder,700-bold，细：lighter）常规为：400
            font-style：字体风格
            顺序为，font:顺序为风格、粗细、大小、类型1、类型2、
                        注意以空格隔开
        */
        h1{
            font-family: "宋体";
            font-size: 20px;
            font-weight: 400;
            font-style:italic;
        }
        p{
            font:italic bold 30px "隶书"
        }
        a{
            font: italic bold 30px 'Courier New', Courier, monospace,"隶书";
        }
    </style>
</head>
<body>
    <!-- div为通用块元素，本身不带有任何属性 -->
    <div>
        <h1>心无旁骛渡江河万里，奋发有为过今世今生</h1>
        <p>结发为夫妻，恩爱两不疑</p>
        <a>欢迎来到王者荣耀welcome</a>
    </div>
</body>
</html>

3.2文本居中

<!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>
    /* 垂直居中 :vertical-align：(top,middle,bottom)
        文字和图片垂直居中，让img元素添加vertical-align
    */
    span{
        vertical-align: top;
    }
</style>
<body>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F537ad95c-7317-4834-aae6-409a056b7a5d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692757478&t=8fd9bc44c722234a5d344b80c240ce4d" alt=""><span>斗罗大陆</span>
</body>
</html>

3.3文本阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本阴影</title>
    <style>
        /* 文本阴影text-shadow：阴影颜色，x轴的偏移，y轴的偏移，模糊半径;
                            x轴的偏移：正值向右偏移，负值向左偏移；
                            y轴的偏移：正值向下偏移，负值向上偏移；
                            注意:如若偏移值为0px，则不偏移。
                            模糊半径：模糊半径越大，模糊范范围越大，阴影文字越模糊。
        */
        h1{
            text-shadow: red 2px 2px 3px;
        }
    </style>
</head>
<body>
    <h1>复活吧！我的爱人</h1>
</body>
</html>

3.4超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接伪类</title>
    <style>
        /* 格式为：标签名:hover{伪类样式} */
        /* 案例：设计超链接伪类：要求初始颜色为蓝色，鼠标悬浮时为黄色，鼠标未松时为橙色，访问结束后为红色 */
        a:link{
            color:black;
        }
        a:visited{
            color:red ;
        }
        a:hover{
            color: yellow;
        }
        a:active{
            color: orange;
        }
    </style>
</head>
<body>
    <a id="#taobao" href="">首页</a>
    <hr>
    <a href="">个人中心</a>
    <hr>
    <a href="">登录注册</a>
</body>
</html>

a:link	未单击访问时超链接样式（鼠标初始状态）
a:hover	鼠标悬浮其上的超链接样式（鼠标悬浮超链接状态）
a:active	鼠标单击未释放的超链接样式（鼠标还未松开时超链接状态）
a:visited	单击访问后超链接样式（鼠标点击完成后超链接状态）

设置伪类的顺序： a:link->a:visited->a:hover->a:active

3.5列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表样式</title>
    <style>
        /* 列表的类型：列表前面的图形 
            （空心圆，实心圆，实心方块，数字）
            decimal:数字
            square：实心方块
            circle：空心圆
            disc：实心圆
            none:清除
        */
        li{
            list-style-type:none;
        }
    </style>
</head>
<body>
    <ul>
        <li>a</li>
        <li>s</li>
        <li>d</li>
        <li>f</li>
    </ul>
</body>
</html>

3.6背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色</title>
    <!-- 背景颜色：
            background-color：给网页元素添加的背景颜色 -->
    <style>
        body{
            background-color: brown;
        }
        div{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>1234567890</div>
</body>
</html>

3.7背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- 背景图片：将一张图片作为元素的背景
        由于图片本身的大小不同，一张图片不一定能够覆盖满元素，如果图片很大，元素也不一定能够将整张图片展示出来
        基于以上情况，背景图片还需要设置背景图片的重复方式，背景图片的定位。
        1.background-image:背景图片来源 ;
        2.background-position:背景图重复方式 ;
        3.background-repeat: 背景图定位（如果背景图很小，放在元素什么位置）;
        4.background-size: 背景图尺寸调节;
    -->
    <style>
        div{
            width: 500px;
            height: 500px;
            border: 5px solid red;
            background-image:url(img/bang.gif);
            background-position:center top  ;
             /*背景图定位
                x轴：px left center right 
                y轴：px top center bottom
            */
            background-repeat:no-repeat ;
            /* 注意：repeat重复，no-repeat不重复，repeatp-y在y轴上重复，repeat-x在x轴上重复*/
            background-size:cover ;
            /* 图片大小的调节：
                auto：正常调节，没有变化
                contain：包含按照图片的比例进行缩放，当图片的某个边框占满边框的某个轴时则不再放大
                cover：一直覆盖满整个边框
            */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.8线性渐变

<!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>
        div{
            width: 500px;
            height: 500px;
            border: 5px solid;
            /* 线性渐变为css3特有的
            如果使用线性渐变则不能使用背景色和背景图片，
            background: 属性，添加linear-gradient线性渐变函数（to 方向，color1，color2。。。。。）; */
            background: linear-gradient(to left,blue,yellow );
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

盒子模型

4.1盒子样式

<!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>
        div{
            border: 2px solid red;
        }
        a{
            border: 2px solid orange;
        }
    </style>
</head>
<body>
    <!-- 盒子边框：
            border 边框
            一个盒子的边框的组成有三部分：边框颜色 边框粗细 边框的风（实心线，虚线，点线，双线等等）
            注意：盒子需要有内容将其撑起来，如果是块元素则出现水平线，如果是行元素显示的为竖线
            一个盒子有四个边框
            border-top：设置的为上边框  border-right：设置的为右边框
            border-left:设置的为左边框  border-bottom：设置的为下边框
    -->
    <div></div>
    <a href=""></a>
</body>
</html>

4.2盒子的外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dl{
            width: 100px;
            height: 100px;
            border: 3px solid red;
            margin-top: 10px;
            /* margin表示盒子外边距的移动：
                margin-top：表示从上往下移动，
                margin-left：表示从左往右移动
                margin-right：表示从右往左移动
                margin-bottom：表示从下往上移动
                当出现单独的margin时，margin：上，右，下，左的移动方式（没写出来的找对边）
            */
        }
        .dlt{
            width: 100px;
            height: 100px;
            border: 3px solid blue;
            /* 外边距的妙用
                将盒子额网页水平居中
                三个要素
                1.必须时块元素
                2.块元素需要设置宽度
                3.设置样式margin：离上边距（px） auto;
                */
            margin:50px auto;
            /* 在盒子里面水平居中 
                首先让文本居中，其次设置行高和盒子的高度一致
            */
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="dl"></div>
    <div class="dlt">abcd</div>
</body>
</html>

4.3盒子的外边距

<!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>
        div{
            width: 1000px;
            border: 3px solid black;
            padding-top: 100px;
            padding-left: 100px;
            padding-right: 100px;
            padding-bottom: 100px;
            /* padding:表示盒子的内边距，改变其内边距一般情况下会改变盒子的大小 
                 padding-top:距上边距离;padding-left：距左边距离
                 padding-right:距右边距离;padding-bottom：距下边距离
                 padding:上、右、下、左（没写出来的找对边）
            */
        }
    </style>
</head>
<body>
    <div>123456789</div>
</body>
</html>

4.4盒子的大小计算

<!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>
        div{
            /* 默认情况下样式的宽高设置的是盒子内容的大小，因为盒子的解析方式为content-box */
            width: 500px;
            height: 500px;
            border: 3px solid red;
            padding-top: 100px;
            margin: 50px auto;
           /* 还有一种盒子模型：border-box;根据边框尺寸进行解析
                如果设置成此格式，width、height属性就是边框的大小，
                当改变元素内边距时只会改变元素的位置不会放大盒子
            */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>123456</div>
</body>
</html>

4.5圆角边框

<!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>
        div{
            width: 300px;
            height:500px;
            margin: 0 auto;
            border: 2px solid red;
            /* 圆角边框：
                border-radius：左上角、右上角、左下角、右下角;（没有写出来找对角，只写一个是全部）
                该属性后面可以填写像素值px或百分比。
                特殊构建：
                圆形：边框必须为正方形，
                      设置边框的圆角半径为其高度的半。
                上半圆：边框为长方形且长是宽的二倍
                        设置边框的左上圆角和右上圆角半径等于其宽
                下半圆：边框为长方形且长是宽的二倍
                        设置边框的左下圆角和右下圆角半径等于其宽
                扇形：遵循三同一不同：即圆角半径，宽度，高度相同，取角的位置不同
            */
            border-radius: 40px 40px 40px 40px;
            /* background:url(img/23.jpg)  no-repeat; */
            box-sizing: border-box;
        }
        p{
            width: 200px;
            height: 100px;
            background-color: blue;
            border-radius:0px 0px  100px 100px ;
        }
    </style>
</head>
<body>
    <div class="one">
        <p></p>
    </div>
</body>
</html>

浮动

5.1display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display属性</title>
    <style>
        /* display属性：
        1.block 设置元素是块元素（可以使用width和height进行修改宽度和高度，里面可以放其他块元素和行元素，使其独占一行）。
        2.inline：设置元素是行元素（不可以使用width和height修改高度和宽度，大小取决于里面的内容多少，可以和其他元素并排）。
        3.inline-block： 设置元素是行内块元素，具有块元素的特性，又可以和其他元素并排。
        4.none: 不显示该元素 */
        /* 需求1.两个元素放一行（加，display:inline） 
           需求2.让元素可以设置宽高（display：block）
           需求3.让两个元素既可以设置宽高又可以放一行（display：inline-block）
        */
        div{
            width: 100px;
            height: 100px;
            border: 2px solid blueviolet;
            /* display: inline; */
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 2px solid rebeccapurple;
            /* display: block; */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
</body>
</html>

弊端：display属性使用时无法去除元素与元素之间的间距

5.2左浮动

<!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>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        /* float：浮动属性<left左浮动，元素依次从左向右排列>
            特点：浮动的元素可以横向排列，并且之间无间隔。
        */
        li{
            width: 150px;
            height: 35px;
            border: 2px solid black;
            line-height: 35px;
            text-align: center;
            float: left;
            /* 左浮动 */
            font-size: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="">功能特权</a></li>
        <li><a href="">游戏特权</a></li>
        <li><a href="">生活特权</a></li>
        <li><a href="">会员活动</a></li>
        <li><a href="">成长体系</a></li>
        <li><a href="">年费专区</a></li>
        <li><a href="">超级会员</a></li>
    </ul>
</body>
</html>

父元素里面的子元素浮动不会超过父元素所设定的范围子元素亦是如此,且浮动时只能同级标签之间的浮动

5.3边框塌陷

5.3.1父元素边框塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框塌陷及整合</title>
    <style>
        /* box盒子是元素，此时占据整个浏览器的宽度，高度由大盒子里面的小盒子决定
           如果box盒子里面的元素设置了浮动，里面的盒子脱离了标准文档流，则元素的宽和高将不再支撑box盒子，
           box盒子又将变回原来的状态，这种情况就称之为父元素的边框塌陷
        */
        .box{
            border: 2px solid black;
        }
        .red{
            width: 300px;
            height: 300px;
            background-color: red;
            float: left;
        }
        .yellow{
            width: 300px;
            height: 300px;
            background-color: yellow;
            float: left;
        }
         /* 此时blue中输入的内容为标准文档流，由于出现了边框塌陷则会blue的内容将会按照最初的标准文档流
        位置输入 */
    </style>
</head>
<body>
    <div class="box">
        <div class="red"></div>
        <div class="yellow"></div>
        <div class="blue">123456789</div>
    </div>
</body>
</html>

5.3.1清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框塌陷及整合</title>
    <style>
        .box{
            border: 2px solid black;
        }
        .red{
            width: 300px;
            height: 300px;
            background-color: red;
            float: left;
        }
        .clear{
            clear: left;
             /*1. clear: right;清除右浮动 
              	clear：both;一起清除左右浮动
            	注意：使用both后标准文档流在最低点，如果有浮动元素超过左浮动元素，就没有达到清楚效果，需要放在最后一个浮动的后					面才会出现。
            	2.清除边框塌陷最直接的方式就是直接对塌陷的边框设置其高度，或者加入overflow: hidden;。
            	3..box:after{
                        display: block;
                        content: '';
                        clear: left;（right,both）
                    }使用伪类after
            */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="red"></div>
        <div class="clear"></div>
    </div>
    <div class="blue">123456789</div>
</body>
</html>

定位

6.1相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        /* position：确定使用的定位方式。
        设置偏移量四个方向（top、bottom、left、right）
        总结：相对定位参照物是自己原来位置的参照物，定位之后自己的原位置还保留在标准文档流当中，
        不会对其他元素残产生影响。相对定位在网页里面通常不单独使用，仅作为相对定位的参照物。
        浮动的元素也可以设置相对定位。两个元素的定位没有影响，定位的元素不对其他元素产生影响。
        （正值不行，取反值） */
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .box{
            border: 3px solid black;
            padding: 20px;
            margin: 5px;
        }
        .item:nth-of-type(1){
            background-color: brown;
            margin: 30px 0px;
            height: 50px;
            /* 首先进行左浮动再设置相对定位 */
            float: left;
            position:relative;
            top:20px;
            left: 40px;
        }
        .item:nth-of-type(2){
            background-color: pink;
            margin: 30px 0px;
            height: 50px;
            /* 使用相对定位将第二个div向上移动50px，向右移动30px。 */
            position: relative;
            top:30px;
            left: 40px;
        }
        .item:nth-of-type(3){
            background-color: red;
            margin: 30px 0px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">1234567889</div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

6.2绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        /* position：确定使用的定位方式。
        设置偏移量四个方向（top、bottom、left、right）
        总结：设置的绝对定位之后，盒子脱离标准文档流，宽度会根据盒子里面的内容而设定，不保留原本的位置
        该盒子的位置会被其他盒子占据。偏移的参照物不是本身，而是相对于已经定位了的最近的组件元素偏移。如果
        组件元素没有定位则参照浏览器。
        元素设置了定位之后，relative absolute fixed
         两元素之间的绝对定位不会互相影响，设置绝对定位的元素不会影响其他元素的样式，但有
         可能会影响其他元素的位置。设置绝对定位不设置偏移量会在原位置不变，但同样会脱离标准文档流。
        （正值不行，取反值） */
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        body{
            padding: 20px;
        }
        .box{
            border: 3px solid black;
            margin: 5px;
            /* 选择相对定位，因为相对定位没有设置偏移量会保留在标准文档流中不会变，仅作为参照物
            */
            position: relative;
        }
        .item:nth-of-type(1){
            background-color: brown;
            margin: 30px 0px;
            height: 50px;
        }
        .item:nth-of-type(2){
            background-color: pink;
            height: 50px;
            /* 设置的第二个盒子绝对定位 
                position: absolute;
            */
            position: absolute;
            top:-20px;
            right: -5px;
        }
        .item:nth-of-type(3){
            background-color: red;
            margin: 30px 0px;
            height: 50px;
            position: absolute;
            top:-20px;
            right: -5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">第一个盒子</div>
        <div class="item">第二个盒子</div>
        <div class="item">第三个盒子</div>
    </div>
</body>
</html>

绝对定位在没有祖先元素设置定位的时候，参照物也是浏览器，但它和固定定位不一样，绝对定位它相对于的是浏览器的第一视口

6.3固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        /* position：确定使用的定位方式。
        设置偏移量四个方向（top、bottom、left、right）
        总结：固定定位只以浏览器为参照物进行定位，两个元素的定位没有影响，定位的元素不对其他元素产生影响。
        （正值不行，取反值） */
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .box{
            border: 3px solid black;
            padding: 20px;
            margin: 5px;
            width: 200px;
            height: 200px;
            position: fixed;
            right: 0px;
            bottom: 0px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">1234567889</div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

6.4粘性定位

<!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>
        /* position：确定使用的定位方式。
        设置偏移量四个方向（top、bottom、left、right）
        总结：固定定位只以浏览器为参照物进行定位，两个元素的定位没有影响，定位的元素不对其他元素产生影响。
        （正值不行，取反值） */
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .box{
            height: 4000px;
        }
        .item{
            background-color: brown;
            height: 100px;
        }
        .nav{
            background-color: blue;
            height: 100px;
            /* 粘性定位 */
            position: sticky;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">1234567889</div>
        <div class="nav">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    </div>
</body>
</html>

6.5z-index属性

<!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>
        .big{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: blue;
            z-index: 99;
        }
        .small{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 300px;
            background-color: yellow;
            z-index: 1;
        }
    </style>
</head>
<body>
    <!-- 对于设置postion属性的元素，z-index才生效z-index值越大，越靠上 -->
    <div class="big"></div>
    <div class="small"></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>
</head>
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        }
        /* 1.行元素不能设置宽高属性，但如果变成弹性盒子，可以设置宽高
            2.弹性盒子之间横向排列：display: flex;
        */
    span{
        border: 1px solid  blue;
        display: flex;
        width: 100px;
        height: 100px;
        }
</style>
<body>
    <div></div>
    <span>abc</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>
        .father{
            border: 2px solid blue;
            height: 60px;
            display: flex;
            flex-direction: column;
            /* 设置成弹性盒子，里面的元素称为item项，并且沿着主轴方向排列（主轴也分开始位置和结束位置），默认
            主轴是X方向，可以通过属性改变主轴方向。
            flex-direction:;改变主轴方向。
                            row（默认。主轴是X轴，方向从左向由）
                            row-reverse（主轴是X轴，方向从右向左）
                            column（主轴是Y轴，方向从上到下） */
        }
        .item{
            width: 60px;
            height: 60px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</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>Document</title>
    <style>
        .father{
            border: 2px solid blue;
            height: 60px;
            display: flex;
            justify-content: center;
    /* justify-content属性表示主轴的对齐方式，值为flex-start：靠主轴起始位置，flex-end：靠主轴的结束位置
                                            center：主轴中间 space-between：两端对齐，space-around两端环绕
                                            space-evenly等分*/
        }
        .item{
            width: 60px;
            height: 60px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
    </div>
</body>
</html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .father{
        border: 2px solid blue;
        height: 60px;
        display: flex;
        justify-content: center;
/* justify-content属性表示主轴的对齐方式，值为flex-start：靠主轴起始位置，flex-end：靠主轴的结束位置
                                        center：主轴中间 space-between：两端对齐，space-around两端环绕
                                        space-evenly等分*/
    }
    .item{
        width: 60px;
        height: 60px;
        border: 1px solid red;
    }
</style>

```

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TE8fKOPI-1691726608258)(C:\Users\ZRB\AppData\Roaming\Typora\typora-user-images\image-20230731093640242.png)]