css3伸缩布局盒模型(一)

出于蓝

于 2018-04-23 00:14:45 发布

阅读量733

点赞数

分类专栏：布局文章标签：布局

本文链接：https://blog.youkuaiyun.com/orq18810575870/article/details/80045004

版权

布局专栏收录该内容

1 篇文章

订阅专栏

本文通过示例对比了CSS3中display:box与display:inline-box两种容器设置方式的效果。展示了当页面尺寸变化时，这两种布局如何响应。box布局使元素占据整行，而inline-box布局则允许元素在同一行内灵活排列。

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

容器的设置语法是:

display:box|inline-box

我们来看看它们的区别:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3的伸缩布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body>div{
            border: 1px solid #cccccc;
            margin: 20px;
            padding: 10px;
        }
        div>div{
           border: 1px solid #ff95b2;
            width:100px;
            display: inline-block;
        }
          .box{
            display: -webkit-box;
        }
        .inline-box{
            display: -webkit-inline-box;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
    </div>
    <div class="inline-box">
        <div>e</div>
        <div>f</div>
        <div>h</div>
        <div>g</div>
    </div>
</body>
</html>

来看看看结果: