css中的布局有哪些

CSS是网页前端开发中不可或缺的一部分，掌握CSS的布局技术可以使网页更加美观、实用化。下面，我们来讨论一下CSS中的布局方法有哪些。

1. 浮动布局

浮动布局是CSS中应用最广泛的一种布局方式。主要是通过将元素设置为浮动，来实现元素之间的布局排列。可通过CSS的float属性实现。

.box {
    float: left;
} 

2. 定位布局

定位布局是通过将元素设置为绝对定位或相对定位，来实现元素的位置布局。可通过CSS的position属性实现。

.box {
    position: absolute;
    top: 100px;
    left: 100px;
} 

3. 弹性布局

弹性布局是CSS3提供的一种新的布局方式，主要是通过将元素置于一个弹性容器内，来实现元素的自适应性布局。可通过CSS的display:flex属性实现。

.container {
    display: flex;
}
.box {
    flex: 1;
} 

4. 栅格布局

栅格布局是CSS中较新的布局方式，主要是通过将页面布局分为若干个网格，再将元素安排到这些网格中，实现元素的分布布局。可通过CSS的grid布局实现。

.container {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 100px repeat(3, 1fr) 100px;
}
.box {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
} 

综上，CSS中提供了多种不同的布局方式，我们可以根据实际需要灵活运用，使网页开发更加高效、美观、实用。