[分享]css两个盒子上下显示

CSS是网页设计中不可或缺的一部分，通过它我们可以为网页添加各种各样的样式，让网页变得更加美观和易读。在本文中，我们将讨论如何使用CSS将两个盒子上下显示。首先，我们需要在HTML中创建两个盒子。为了...

CSS是网页设计中不可或缺的一部分，通过它我们可以为网页添加各种各样的样式，让网页变得更加美观和易读。在本文中，我们将讨论如何使用CSS将两个盒子上下显示。

首先，我们需要在HTML中创建两个盒子。为了方便起见，我们使用div元素来创建这两个盒子：

 <div class="box">
        ...
    </div>

    <div class="box">
        ...
    </div> 

接下来，我们需要在CSS中为这两个盒子添加样式。要让它们上下显示，需使用CSS的display属性将它们设置为块级元素，并设置宽度和高度：

 .box {
        display: block;
        width: 100px;
        height: 100px;
    } 

现在，这两个盒子已经成为块级元素，并具有相同的宽度和高度。不过，它们依旧在同一行中显示。要让它们上下显示，需要使用CSS的float属性，并将其中一个盒子设置为浮动元素，如下所示：

 .box {
        display: block;
        width: 100px;
        height: 100px;
    }

    .box:first-child {
        float: left;
    } 

这里，我们将第一个盒子设置为浮动元素，并向左浮动。第二个盒子依旧处在文档流中，因此会自动放置在下方。这样，我们就实现了两个盒子的上下显示。

总之，使用CSS将两个盒子上下显示需要设置元素为块级元素，并使用float属性将其中一个元素浮动。这是CSS中比较基础的样式设计内容，希望能对初学者有所帮助。