盒模型与弹性盒模型

最新推荐文章于 2021-01-25 16:36:47 发布

Mr_gxj

最新推荐文章于 2021-01-25 16:36:47 发布

阅读量446

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Mr_gxj/article/details/53044768

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

display 类似于浮动（float）,必须设置单个div flex:1;margin:auto 表示居中    
<!-- margin 表示边框间的边距，padding 表示内边距，内容和边框间的距离-->
    <style>
        body{
            border: 10px solid blue;
        }
        .div{
            border: 1px solid red;
            padding: 20px;
            margin:20px;
        }
    </style>
</head>
<body>
<div class="div">我是一个盒子</div>
</body>


<style>
        #main1{
            display: flex;
            width:90%;
            height: 100px;
            margin: auto;
            border: 1px solid red;

        }
        #main1 div{
            flex: 1;

        }
        #main2{
            display: flex;
            width:90%;
            height: 200px;
            margin: auto;
            border: 1px solid red;
        }
        #main2 div{
            flex: 1;
        }
    </style>
</head>
<body>
<!-- 使 内容，随着窗口的大小而变化-->
<div id="main1">
    <div style="background-color: #c0ff29"></div>
    <div style="background-color: #4c93ff"></div>
    <div style="background-color: #ff67ed"></div>
</div>
<div id="main2">
    <div style="background-color: #c0ff29"></div>
    <div style="background-color: #4c93ff"></div>
</div>
</body>

Mr_gxj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模型与弹性盒模型

display 类似于浮动（float）,必须设置单个div flex:1;margin:auto 表示居中 style> body{ border: 10px solid blue; } .div{ border: 1px solid red; padding
复制链接

扫一扫

专栏目录