网页布局有哪几种？常用的网页布局都有哪些？

1. 水平垂直居中
• Flexbox 中实现水平垂直居中
• Flex 容器和 Flex 项目上设置对齐方式
• Grid 中实现水平垂直居中
2. 等高布局
3. 基于 Sticky Footer
4. 均分列
5. 圣杯布局
6. 12 列网格布局
7. 两端对齐
8. 选择最佳的值
9. Logo 图标的对齐
10. 小结

作者|廖伟华（大貘）

编辑|橙子君

出品|阿里巴巴新零售淘系技术

文章来源：https://juejin.im/post/6865107864139087886#heading-5

随着 Web 技术不断的革新，CSS 近几年也变得多年前要更强大。在 Web 开发中，CSS是不可或缺的一部分，对于很多 Web 开发者来说，有很多 CSS 属性不知道，或者说他们知道，但忘记在最恰当的时候使用最适合的 CSS 属性。而且时至今日，其中有一些 CSS 的属性可以让开发者能节约更多的时间。比如说，在 Web 布局中，现代 CSS 特性就可以更好的帮助我们快速实现，例如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等。在本文中，我将会介绍一些不同的 CSS 属性来实现这些效果，希望大家会感兴趣。更希望对大家今后的工作有所帮助。

水平垂直居中

如何实现水平垂直居中可以说是 CSS 面试题中的经典面试题，在多年前这个面试题给很多同学都带来了困惑，但 Flexbxo 布局模块和 CSS Grid 布局模块的到来，可以说实现水平垂直居中已是非常的容易。

Flexbox 中实现水平垂直居中

在 Flexbox 布局模块中，不管是单行还是多行，要让它们在容器中水平垂直居中都是件易事，而且方法也有多种。最常见的是在Flex容器上设置对齐方式，在 Flex 项目上设置margin:auto。

先来看在 Flex 容器上设置对齐方式。

Flex 容器和 Flex 项目上设置对齐方式

你可能已经知道在 Flex 容器上设置justify-content、align-items的值为 center 时，可以让元素在 Flex 容器中达到水平垂直居中的效果。来看一个示例：

<div >
    <div ></div>
</div>

/* CSS */
.flex__container {
    display: flex;
    justify-content: center;
    align-items: center;
}

效果如下：

居中对齐前面已经介绍过了，这里主要是看图像大小方面的处理：

.brands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
}

.brands__item {
    background: #eee;
}

.brands__item a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.brands__item img {
    width: 130px;
    height: 75px;
    object-fit: contain;
}

这样就能实现上图的效果。你可能发现了，有些 Logo 图像带有背景颜色，如果让效果更好一些，可以把 CSS 混合模式相关的特性运用进来：

.brands__item img {
    width: 130px;
    height: 75px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

这个时候，你看到的效果如下：

object-fit 除了取值 contain 之外，还有其他几个值。其实这个方案也适用于产品图片，人物头像等布局。

小结

文章中主要介绍了 Web 中一些布局的实现思路和具体方案。其实文章提到的效果，比如水平垂直居中、等高布局、平均分布列和 Sticky Footer 等，在 CSS 中一直有多种解决方案，只不过随着 CSS Flexbox 布局模块和 CSS Grid 布局模块的到来，实现这些效果变得更为灵活和简洁。

当然，文章中提到的只是一些最为常见一些效果，其实在 Web 布局中，特别是 Flexbox 布局和 Grid 布局中还存在很多有意思的东西，只不过因为篇幅的时间没有一一罗列。如果你感兴趣可以再挖掘一些出来，如果你在这方面有更好的经验或方案，欢迎在下面的评论中分享。最后希望这篇文章对你平时的工作有所帮助。