CSS学习2

╰ 羁绊

已于 2023-08-06 10:22:03 修改

阅读量124

点赞数

文章标签： css 学习 css3

于 2023-07-03 15:45:48 首次发布

本文链接：https://blog.csdn.net/qq_44957788/article/details/131464198

版权

结构伪类选择器

作用-根据元素的结构关系查找元素
E:first-child 第一个元素
E:last-child 最后一个
E:nth-child(N) 查找第N个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器-基本使用</title>
    <style>
        /* li:first-child{
            background-color: green;
        } */
        /* li:last-child{
            background-color: green;
        } */
        li:nth-child(1){
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>   
        <li>li 4</li>
        <li>li 5</li>
        <li>li 6</li>   
        <li>li 7</li>
        <li>li 8</li>
    </ul>
</body>
</html>

:nth-child(公式)：根据元素的结构关系查找多个元素
偶数标签：2n 、奇数标签：2n+1 、5的倍数：5n、第5个以后的标签：n+5、第5个以前的标签：-n+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>
        /* li:nth-child(2n+1){
            background-color: green;
        }
        li:nth-child(2n+1){
            background-color: green;
        } */
        /* li:nth-child(5n){
            background-color: green;
        } */
        /* li:nth-child(n+5){
            background-color: green;
        } */
        li:nth-child(-n+5){
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>   
        <li>li 4</li>
        <li>li 5</li>
        <li>li 6</li>   
        <li>li 7</li>
        <li>li 8</li>
        <li>li 9</li>
        <li>li 10</li>
    </ul>
</body>
</html>

伪元素选择器：创建虚拟元素，用来摆放装饰性的内容
E::before 在E元素里面最前面添加一个伪元素
E::after 在E元素里面最后面添加一个伪元素
注意：
1、必须设置content：“ ”属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
2、伪元素默认是行内显示模式
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>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        div::before{
            width: 100px;
            height: 100px;
            background-color: brown;
            display: block;
            content: "老鼠";
        }
        div::after{
            width: 100px;
            height: 100px;
            background-color: orange;
            display: inline-block;
            content: "大米";
        }
    </style>
</head>
<body>
    <!-- 标签内容：老鼠爱大米 -->
    <div>爱</div>
</body>
</html>

PxCook
(像素大厨)：是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
-开发面板（自动智能识别）
-设计面板（手动测量尺寸和颜色）

盒子模型

盒子模型-组成

作用：布局网页，摆放盒子和内容
盒子模型重要组成部分：
-内容区域 -width&height
-内边距 -padding(出现在内容与盒子边缘之间)
-边框线 -border
-外边距 -margin(出现在盒子外面)

<!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{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            border: 1px solid #000;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

盒子模型-边框线

border (bd) 边框线粗细线条样式颜色（不区分顺序）
solid 实线 / dashed 虚线 / dotted 点线

<!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{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border: 1px solid #000; */
            /* border: 2px dashed red; */
            border: 3px dotted green;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

设置单反向边框线

border-方位名词（bd+方位名词首字母，如bdl）

<!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{
            width: 200px;
            height: 200px;
            background-color: pink;
            border-top: 1px solid #000;
            border-right: 2px dashed red;
            border-bottom: 5px dotted green;
            border-left: 10px solid orange;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

盒子模型-内边距

设置内容与盒子边缘之间的距离 padding / padding-方位名词

<!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{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding: 10px; */
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 40px;
            padding-left: 80px;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>

盒子模型-内边距-多值写法

padding多值写法，最多链接四个值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-padding多值写法</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 四值：上 右 下 左 */
            /* padding: 10px 20px 40px 80px; */
            /* 三值：上 左右 下 */
            /* padding: 10px 40px 80px; */
            /* 两值：上下 左右 */
            padding: 10px 80px;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

盒子模型-尺寸计算

默认情况：盒子尺寸=内容尺寸+broder尺寸+内边距尺寸
结论：加border/padding会撑大盒子
解决：
1、手动减法
2、内减模式：box-sizing:border-box

<!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{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            box-sizing: border-box;     
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

盒子模型-外边距

作用：拉开两个盒子之间的距离
margin ,与padding属性值写法，含义相同
版心居中：

<!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{
            /* 版心居中要求：盒子要有宽度 */
            width: 1000px;
            height: 200px;
            background-color: pink;
            /* 外边距不会撑大盒子 */
            /* margin: 50px; */
            /* margin-left: 100px; */
            /* margin: 50px 100px;  */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            /* 去掉列表的项目符号 */
            list-style: none;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>ppppp</p>
    <ul>
        <li>li </li>
    </ul>
</body>
</html>

盒子模型-元素溢出

作用：控制溢出元素的内容的显示方式
overflow (hidden-溢出隐藏 / scroll-溢出滚动<无论是否溢出，都显示滚动条位置> / auto-溢出滚动<溢出才显示滚动条位置>)

<!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{
            width: 200px;
            height: 200px;background-color: pink;
            overflow: hidden;
            /* overflow: scroll; */
            /* overflow: auto; */
        }
    </style>
</head>
<body>
    <div>文字内容测试溢出显示方式文字内容测试溢出显示方式文字内容测试溢出显示方式文
        字内容测试溢出显示方式文字内容测试溢出显示方式文字内容测试溢出显示方式文字内
        容测试溢出显示方式文字内容测试溢出显示方式文字内容测试溢出显示方式文字内容测
        试溢出显示方式文字内容测试溢出显示方式文字内容测试溢出显示方式文字内容测试溢
        出显示方式文字内容测试溢出显示方式文字内容测试溢出显示方式文字内容测试溢出显
        示方式</div>
</body>
</html>

外边距问题-合并现象

场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中的较大值生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距-合并现象</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: brown;
            margin-bottom: 20px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 80px;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

外边距问题-塌陷问题

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题
现象：导致父级一起向下移动

解决方法：
·取消子级margin，父级设置padding
·父级设置overflow: hidden
·父级设置border-top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距-塌陷问题</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* padding-top: 50px;
            box-sizing: border-box; */
            /* overflow: hidden; */
            border-top: 1px solid #000;
            
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

行内元素-内外边距问题

场景：行内元素添加margin和padding，无法改变元素垂直位置
解决办法：给行内元素添加line-height，可以改变垂直位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素-内外边距问题</title>
    <style>
        span{
            margin: 50px;
            padding: 20px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <span>span 标签</span>
    <span>span 标签</span>
</body>
</html>

盒子模型-圆角

作用：设置元素的外边框为圆角
border-radius 数字+px / 百分比(属性值是圆角半径)

<!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{
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: orange;
            /* border-radius: 20px; */
            /* 记忆：从左上角顺时针赋值，没有去值的角与对角赋值相同 */
            /* border-radius: 10px 20px 40px 80px; */
            /* border-radius: 10px 40px 80px; */
            border-radius: 10px 80px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

·常见应用-正圆形状
给正方形盒子设置圆角属性值为宽高的一半/50%
· 常见应用-胶囊形状
给长方形盒子设置圆角属性值为宽高的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角-特殊场景</title>
    <style>
        img{
            width: 200px;
            height: 200px;
            /* 圆角半径最大值是50%，大于50%将没有效果 */
            border-radius: 50%;
        }
        div{
            width: 200px;
            height: 80px;
            background-color: orange;
            border-radius: 40px;
        }
    </style>
</head>
<body>
    <!-- 正圆形--头像 -->
    <img src="./images/1.jpg" alt="">
    <!-- 胶囊状 -->
    <div></div>
</body>
</html>

盒子模型-阴影（扩展）

作用：给元素设置阴影效果
属性名：box shadow
属性值：X轴偏移量 Y轴偏移量模糊半径扩散半径颜色内外阴影
注意：
·X轴偏移量和Y轴偏移量必须*书写

·**默认是外阴影**，内阴影需要添加**inset**
<!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{
            margin: 50px auto;
            width: 200px;
            height: 80px;
            background-color: orange;
            box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5) inset;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

综合案例一-产品卡片

CSS书写顺序
1、盒子模型属性
2、文字样式
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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #f1f1f1;
        }
        .product{
            margin: 50px auto;
            padding-top: 40px;
            width: 400px;
            height: 400px;
            background-color: #fff;
            border-radius: 10px;
            text-align: center;
        }
        .product h4{
            margin-top: 20px;
            margin-bottom: 12px;
            font-size: 18px;
            color: #333;
            font-weight: 400px;
        }
        .product p{
            font-size: 12px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="product">
        <img src="./images/1.jpg" alt="">
        <h4>抖音直播SDK</h4>
        <p>包含抖音直播看播功能</p>
    </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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .news{
            margin: 100px auto;
            width: 360px;
            height: 200px;
            /* background-color: pink; */
        }
        .news .hd{
            height: 34px;
            background-color: #eee;
            border: 1px solid #dbdee1;
            border-left: 0;
        }
        .news .hd a{
            /* 盒子向上移动 */
            margin-top: -1px;
            display: block;
            border-top: 3px solid #ff8400;
            border-right: 1px solid #dbdee1;
            width: 48px;
            height: 34px;
            background-color: #fff;

            text-align: center;
            line-height: 32px;
            font-size: 14px;
            color: #333;
        }
        .news .bd{
            padding: 5px;

        }
        .news .bd li{
            padding-left: 15px;
            background-image: url(./1.jpg);
            background-repeat: no-repeat;
            background-position: 0 center;
        
        }
        .news .bd li a{
            padding-left: 20px;
            background: url(./2.jpg) no-repeat 0 center;
            font-size: 12px;
            color: #666;
            line-height: 24px;
        }
        .news .bd li a:hover{
            color: #ff8400;
        }
    </style>
</head>
<body>
    <!-- 新闻区域 包含 标题+内容 -->
    <div class="news">
        <div class="hd"><a href="">新闻</a></div>
        <div class="bd">
            <ul>
                <li><a href="#">点赞“新农人”温暖的伸手</a></li>
                <li><a href="#">在希望的田野上</a></li>
                <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
                <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
                <li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
                <li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
            </ul>
        </div>
    </div>
    
</body>
</html>

标准流

也叫文档流，标签在页面中的默认排布规则

浮动

作用：让块元素水平排列
float (left-左对齐 / right-右对齐)

```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>
        /* 特点：顶对齐、具备行内块显示模式特点，浮动的盒子会脱标 */
        .one{
            width: 100px;
            height: 100px;
            background-color: brown;
            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* float: left; */
            float: right;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></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>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        .product{
            margin: 0 auto;
            width: 1226px;
            height: 628px;
            background-color: pink;
        }
        .left{
            float: left;
            width: 234px;
            height: 628px;
            background-color: skyblue;
            
        }
        .right{
            float: right;
            width: 978px;
            height: 628px;
            background-color: brown;
        }
        .right li{
            float: left;
            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: orange;
        }
        /* 第四个和第八个li：去掉右边距 */
        .right li:nth-child(4n){
            margin-right: 0;
        }
        /* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
    </style>
</head>
<body>
    <!-- 版心：左右 -->
    <div class="product">
        <div class="left">
        </div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </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>
        .top{
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
        }
        .left{
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
        .right{
            float: right;
            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom{
            height: 100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

解决办法：清除浮动（清除浮动带来的影响）

清除浮动

方法一：额外标签法
·在父元素内容的最后添加一个块级元素，设置css属性clear: both

清除浮动-额外标签法

方法二：单伪元素法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动-单伪元素法</title>
    <style>
        .top{
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
        }
        .left{
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
        .right{
            float: right;
            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom{
            height: 100px;
            background-color: brown;
        }
        /* 单伪元素法 */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></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>
        .top{
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
        }
        .left{
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
        .right{
            float: right;
            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom{
            height: 100px;
            background-color: brown;
        }
        /* 双伪元素法，before伪元素解决外边距塌陷问题 */
        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
        }
        /* after清除浮动 */
        .clearfix::after{
            clear: both;
        }  
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

方法四：overflow
父元素添加CSS属性overflow: hidden

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动-overflow</title>
    <style>
        .top{
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
            overflow: hidden;
        }
        .left{
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
        .right{
            float: right;
            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom{
            height: 100px;
            background-color: brown;

        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

浮动-总结

·浮动属性float，left表示左对齐，right表示右对齐
·特点
1、浮动后的盒子顶对齐
2、浮动后的盒子具备行内块特点
3、父级宽度不够，浮动的子级会换行
4、浮动后的盒子脱标
·清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
1、双伪元素法
·拓展：浮动本质作用是实现图文混排效果

Flex布局

也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间布局和对齐能力
，Flex模型不会产生浮动布局中脱标现象，布局网页更简单，** **。

Flex-组成

设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸
组成部分：
·弹性容器
·弹性盒子
·主轴：默认在水平方向
·侧轴/交叉轴：默认在垂直方向

<!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>
        /* 弹性容器 */
        .box{
            display: flex;
            height: 300px;
            border: 3px solid #000;
        }
        /* 弹性盒子：沿着主轴方向排列 */
        .box div{
            width: 200px;
            /* height: 100px; */
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <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>3</div>
    </div>
</body>
</html>

Flex布局

主轴对齐方式
justify-content
flex-start(弹性盒子从起点开始排列) flex-end(弹性盒子从终点开始排列)
center(沿主轴居中排列)
space-between(沿主轴均匀排列，空白间距均分在弹性盒子之间)
space-around(沿主轴均匀排列，空白间距均分在弹性盒子两侧)
space-evenly(沿主轴均匀排列，弹性盒子与容器之间间距相等)

<!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>
        .box{
            display: flex;
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* 父级剩余的尺寸分配成间距 */
            /* justify-content: space-between; */
            /* 间距出现在盒子两侧，视觉效果：盒子之间的间距是两端间距的2倍 */
            justify-content: space-around;
            /* 各个间距都相等 */
            justify-content: space-evenly;
            height: 300px;
            border: 1px solid #000;
        }
        .box div{
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

侧轴对齐方式
align-items 所有弹性盒子的侧轴对齐方式
align-self 某个弹性盒子的侧轴对齐方式
stretch(弹性盒子沿着、侧轴线被拉伸至铺满容器)-弹性盒子没有设置侧轴方向尺寸则默认拉伸
center(沿侧轴居中排列)
flex-start(盒子从起点开始依次排列)
flex-end(盒子从终点开始依次排列)

<!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>
        .box{
            display: flex;
            /* 如果弹性盒子在侧轴方向没有尺寸才能拉伸 */
            /* align-items: stretch; */
            /* align-items: center; */
            /* align-items: start; */
            align-items: end;
            height: 300px;
            border: 1px solid #000;
        }
        /* 第二个div：侧轴居中对齐 */
        .box div:nth-child(2){
            align-self: center;
        }
        .box div{
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

修改主轴方向
flex-direction 主轴默认在水平方向
column 垂直方向，从上向下

<!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>
        .box{
            display: flex;
            /* 修改主轴方向，垂直方向：侧轴自动变换为水平方向 */
            flex-direction: column;
            /* 主轴在垂直方向：主轴居中变为垂直居中 */
            justify-content: center;
            /* 主轴在垂直方向：侧轴居中变为水平居中 */
            align-items: center;
            width: 150px;
            height: 120px;
            background-color: pink;
        }
        img{
            width: 32px;
            height: 32px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/1.jpg" alt="">
        <span>媒体</span>
    </div>
</body>
</html>

弹性伸缩比-在主轴方向的尺寸

**flex** (**整数数字**，表示占用父级**剩余**尺寸的**份数**)
<!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>
        /* 默认情况下，主轴方向靠内容撑开，侧轴拉伸效果 */
        .box{
            display: flex;
            flex-direction: column;
            height: 300px;
            border: 1px solid #000;
        }
        .box div{
            /* height: 100px; */
            background-color: pink;
        }
        .box div:nth-child(1){
            width: 200px;
        }
        .box div:nth-child(2){
            flex: 1;
        }
        .box div:nth-child(3){
            flex: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

弹性盒子换行
flex-wrap (wrap-换行 / nowrap-不换行)

<!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>
            .box{
                display: flex;
                flex-wrap: wrap;
                /* flex-wrap: nowrap; */
                justify-content: space-between;
                height: 300px;
                border: 1px solid #000;
            }
            .box div{
                width: 200px;
                height: 100px;
                background-color: pink;
            }
        </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>10</div>
            <div>11</div>
            <div>12</div>
        </div>
    </body>
    </html>
    </style>
</head>

行对齐方式
align-content
属性值和主轴对齐方式一样

<!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>
            .box{
                display: flex;
                flex-wrap: wrap;
                /* align-content: flex-start; */
                /* align-content: flex-end; */
                /* align-content: center; */
                /* align-content: space-between; */
                /* align-content: space-around; */
                align-content: space-evenly;
                justify-content: space-between;
                /* 调整行对齐方式，对单行弹性盒子不生效 */

                height: 400px;
                border: 1px solid #000;
            }
            .box div{
                width: 200px;
                height: 100px;
                background-color: pink;
            }
        </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>
    </body>
    </html>
    </style>
</head>

综合案例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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        .box{
            margin: 50px auto;
            width: 1200px;
            height: 418px;
            border: 1px solid #ddd;
            border-radius: 10px;
        }
        .box ul{
            display: flex;
            /* 弹性盒子换行 */
            flex-wrap: wrap;
            /* 调整主轴对齐fangs */
            justify-content: space-between;
            /* 调整行对齐方式 */
            align-content: space-between;
            padding: 90px 40px 90px 60px;
            height: 418px;
        }
        .box li{
            display: flex;
            width: 500px;
            height: 88px;
            /* background-color: pink; */
        }
        .box .pic{
            margin-right: 15px;
        }
        .box .text h4{
            line-height: 40px;
            font-size: 20px;
            font-weight: 400;
            color: #333;
        }
        .box .text p{
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="./1.jpg" alt="">
                </div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>发布视频到抖音短视频，西瓜视频及今日头条</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="./2.jpg" alt="">
                </div>
                <div class="text">
                    <h4>管理视频内容</h4>
                    <p>支持修改已发布稿件状态和即使查询视频审核状态</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="./3.jpg" alt="">
                </div>
                <div class="text">
                    <h4>发布携带组件</h4>
                    <p>支持分享内容携带小程序，地理位置信息等组件，扩展内容及突出地域性</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="./4.jpg" alt="">
                </div>
                <div class="text">
                    <h4>数据评估分析</h4>
                    <p>获取视频对应产品内的数据表现，获取抖音热点，及时进行表现评估</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>