7、css3中的box横向自适应布局、flex布局、横向滚动

最新推荐文章于 2025-05-19 14:12:43 发布

刘吉祥

最新推荐文章于 2025-05-19 14:12:43 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：工作总结 css

本文链接：https://blog.youkuaiyun.com/luckybuling/article/details/85266148

工作总结同时被 2 个专栏收录

7 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文详细探讨了CSS3中的盒模型布局，包括display:-webkit-box的使用，自适应布局的实现，以及CSS3 display:box的新属性。同时，介绍了Flex布局的基本语法，帮助理解在移动Web开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、移动web开发实践-css3（1）盒模型display:-webkit-box;的使用

2、自适应布局webkit-box的用法

3、css3中webkit-box的用法 css display:box 新属性

4、css display:box 新属性

5、Flex 布局语法教程

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>横向滚动</title>
    <script src="jquery.min.js"></script>
    <style>
        .iconList {
            background-color: rgba(51, 51, 51, .7);
            border-radius: .5rem;
            overflow-x: scroll;
            overflow-y: hidden;
            /*最外层使用css3中的box横向自适应布局，让浏览器计算内容布局*/
            display: -moz-box;
            display: -webkit-box;
            display: box;
        }
        .box {
            display: flex;/*使用flex让div成行*/
            overflow: scroll;
            width: auto;
        }

        .box::-webkit-scrollbar,
        .iconList::-webkit-scrollbar {/*隐藏滚动条*/
            display: none;
        }

        .boxList {
            display: inline-block;
            text-align: center;
            padding: 0 .2rem;
            width: 2.7rem;
        }

        .boxList img {
            display: block;
            width: 2.7rem;
            height: 2.7rem;
            margin: .2rem 0 .1rem 0;
        }

        .Num {
            display: inline-block;
            font-size: .8rem;
            margin: 0;
            padding: 0;
            text-align: center;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="iconList">
        <div class="box">
            <!--通知列表-->
            <div class="boxList">
                <img src="moneyPack.png" class="icon_img" alt="钱包">
                <p class="Num"></p>
            </div>
            <!--end-->
        </div>
    </div>
    <script>
        var boxDom = $(".box");
        var itemDom = $(".boxList");
        var Num = $(".Num");

        function addList() {
            boxDom.empty();
            for (var i = 0; i < 15; i++) {
                console.log(i);
                var n = i + 1;
                Num.text("第" + n + "个");
                var item = itemDom.clone();
                boxDom.append(item);
            }
        }
        addList();
    </script>
</body>

</html>