CSS Day04

最新推荐文章于 2025-05-26 21:55:40 发布

babicu123

最新推荐文章于 2025-05-26 21:55:40 发布

阅读量1k

点赞数 31

文章标签： css java 前端

本文链接：https://blog.csdn.net/babicu123/article/details/148186572

版权

我们知道盒子是默认换行的，那样让它如下图一样显示呢？

下面我们先来了解一些概念：

1.标准流

就是标签默认的排序规则。

2.浮动-基本使用与布局

float

如果只有一个有用float呢？

这里系统会默认把有加float那个盒子给脱离标准，就好比系统检测不到加了float的盒子了，所以就会把没标的盒子给放第一个如下图：

<!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: 50px 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和第八个li 去掉右侧的margin */
        .right li:nth-child(4n) {
            margin-right: 0;
        }

        /* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
    </style>
</head>
<body>
    <!-- 版心：左右，右面：8个产品 → 8个 li -->
    <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>

3.浮动-清除浮动

这时把父级高度注释

发现发生错乱：

（1）额外标签法（了解）

清除成功如下：

（2）单伪元素法

（3）双伪元素法

（4）overflow

4.浮动-总结

5.flex布局-体验

6.flex布局-组成

7.flex布局-主轴与侧轴对齐方式

(1)主轴的对齐方式

常用的是后面四个：

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: sapce-between;

justify-content: sapce-around;

justify-content: sapce-evenly;

（2）侧轴的对齐方式

align-items:stretch;

align-items:center;

align-items: flex-start;

align-items: flex-end;

align-self: center;

8.flex布局-修改主轴方向

flex-direction: column;

9.flex布局-弹性伸缩比

flex: 数字;

根据主轴方向来伸缩扩展。

10.flex布局-弹性换行与行对齐方式

(1)弹性盒子换行

怎么让它盒子大小不够自动换行呢？

flex-wrap: wrap;

这里提示下flex-wrap默认是不换行的 flex-wrap: nowrap;

这样更好看

（2）对齐方式

对单行弹性盒子不生效

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

11.综合案例-抖音解决方案

<!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>
    *{
        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;
        /* 调整主轴对齐方式 */
        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>
<body>
    <div class="box">
        <ul>
            <li><div class="pic">
                <img src="./image/1.svg" alt="">
            </div>

            <div class="text">
                <h4>一键发布多端</h4>
                <p>发布视频到抖音短视频、西瓜视频及今日头条</p>
            </div>
        </li>
        <li><div class="pic">
                <img src="./image/2.svg" alt="">
            </div>

            <div class="text">
                <h4>管理视频内容</h4>
                <p>支持修改已发布稿件状态和实时查询视频审核状态</p>
            </div>
        </li>
        <li><div class="pic">
                <img src="./image/3.svg" alt="">
            </div>

            <div class="text">
                <h4>发布携带组件</h4>
                <p>支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性</p>
            </div>
        </li>
        <li><div class="pic">
                <img src="./image/4.svg" alt="">
            </div>

            <div class="text">
                <h4>数据评估分析</h4>
                <p>获取视频在对应产品内的数据表现、获取抖音热点，及时进行表现评估</p>
            </div>
        </li>
    </div>
</body>
</html>