css十种布局

CSS是前端开发中必不可少的技能，而对于网页布局来说，可以选择多种不同的方法来实现。下面就为大家介绍CSS中的十种布局。

css十种布局

1. 流式布局

.container {
    width: 80%;
    margin: 0 auto;
}

使用百分比来掌控容器的宽度，以达到自适应窗口大小的效果。

2. 弹性盒子布局

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

使用flex将容器内的元素进行布局，实现居中或者一行排列的效果。

3. 浮动布局

.container {
    overflow: hidden;
}
.item {
    float: left;
    width: 25%;
}

使用float让元素进行左右浮动，可自由排列达到多种布局的效果。

4. 定位布局

.container {
    position: relative;
}
.item {
    position: absolute;
    top: 0;
    left: 0;
}

使用position让元素进行绝对定位，可将元素定位到任意位置，实现多种布局的效果。

5. 网格布局

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px;
}

使用grid让元素在网格上进行布局，可自由掌控元素的大小和位置，实现多种布局的效果。

6. 多列布局

.container {
    column-count: 3;
    column-gap: 10px;
}

使用column-count让元素在多列上进行布局，可直接控制列数和间距，实现多种布局的效果。

7. 表格布局

.container {
    display: table;
}
.item {
    display: table-cell;
}

使用table将元素进行布局，使用table-cell将元素放置在表格的单元格内，可实现多种等分排列的效果。

8. Canvas布局

.no-canvas {
    display: block;
}
.canvas {
    display: none;
}

使用canvas将元素绘制到画布上，可实现自定义的绚丽效果。

9. 精灵图布局

.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(sprites.png);
    background-position: -20px -20px;
}

使用精灵图将多个图片合并为一张，使用background-position将图片切割出来，实现图标在不同位置的使用。

10. 响应式布局

@media (max-width: 600px) {
    .container {
        width: 100%;
    }
}

使用@media在不同的屏幕下进行布局，可让网页在不同设备上自适应显示。