css两个盒子怎么竖着排列

CSS是网页开发必不可少的一部分，其中盒子布局是常用的布局方式之一。如何让两个盒子竖着排列呢？下面让我们来详细介绍一下。

1.使用display属性将元素设置为块级元素

.box{
    display: block;
} 

默认情况下元素是行内元素，只有将元素设置为块级元素，才能在高度和宽度上进行自由控制。通过将两个盒子设置成块级元素，就可以使它们竖着排列了。

2.将两个盒子进行上下排列

.container{
    display: flex;
    flex-direction: column;
} 

通过display:flex属性，将父元素设置为弹性盒模型，再通过flex-direction:column属性，将子元素进行上下排列。

3.使用margin或padding属性进行间距控制

.box{
    margin-bottom: 10px;
} 

通过margin或padding属性，可以对两个盒子之间进行间距的控制。在这里我们通过设置margin-bottom属性，来使两个盒子之间间隔10像素。

通过以上三个步骤，我们就可以将两个盒子竖着排列了。