css3弹性盒子、媒体查询、多列布局

最新推荐文章于 2022-10-19 12:26:54 发布

weixin_48846877

最新推荐文章于 2022-10-19 12:26:54 发布

阅读量396

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_48846877/article/details/107924530

版权

本文介绍了CSS3中的核心特性，包括弹性盒子模型，详细讲解了如何使用弹性盒子进行响应式布局。同时，深入探讨了媒体查询的用法，如适配不同设备、设置媒体类型以及语法结构。此外，还提到了多列布局的应用，并指导如何为移动端配置视口以实现更好的显示效果。

摘要由CSDN通过智能技术生成

css3

一、弹性盒子

<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no" >
    <meta charset="UTF-8">
    <title></title>
    <!-- 自动分配-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }
        .box{
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .box_1 {
            flex: 1;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        .box1 {
            flex: 1;
            display: flex;
            /*justify-content: center;  /!*水平居中*!/*/
            /*align-items: center;      /!*垂直居中*!/*/
        }
        .box1 > span {
            align-self: center;   /*自身垂直居中*/
        }
        .box2 {
            flex: 10;
        }
        .box3 {
            flex: 1.5;
            display: flex;
            flex-direction: row;
            /*justify-content: space-around;*/
            /*justify-content: flex-start;*/
        }
        .box3>div {
            width: 30%;
            box-sizing: border-box;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box_1 box1">
        <span>标题</span>
    </div>
    <div class="box_1 box2">2</div>
    <div class="box_1 box3">
        <div>首页</div>
        <div>订单</div>
        <div>我的</div>
    </div>
</div>
</body>

在这里插入图片描述