作者 | 大漠出品 | 淘系技术超干货长文预警。这次把网页布局方案讲得通通透透的，等高布局，水平垂直居中，经典的圣杯布局等等全都有了。随着 Web 技术不断的革新，CSS 近几年也变得更强大。在 Web 开发中，CSS 是不可或缺的一部分，对于很多 Web 开发者来说，有很多 CSS 属性不知道，或者说他们知道，但忘记在最恰当的时候使用最适合的 CSS 属性。而且时至今日，其中有一些 CSS 的属性可以让开发者能节约更多的时间。比如说，在 Web布局中，现代 CSS 特性就可以更好的帮助我们快速实现，例如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等。在本文中，我将会介绍一些不同的 CSS 属性来实现这些效果，希望大家会感兴趣。更希望对大家今后的工作有所帮助。水平垂直居中如何实现水平垂直居中 可以说是 CSS 面试题中的经典面试题，在多年前这个面试题给很多同学都带来了困惑，但 Flexbxo 布局模块 和 CSS Grid 布局模块 的到来，可以说实现水平垂直居中已是非常的容易。淘系技术 2020 技术年货 > 179x Flexbox 中实现水平垂直居中在 Flexbox 布局模块中，不管是单行还是多行，要让它们在容器中水平垂直居中都是件易事，而且方法也有多种。最常见的是在 Flex 容器上设置对齐方式，在 Flex 项目上设置 margin:auto。先来看在 Flex 容器上设置对齐方式。x Flex 容器和 x Flex 项目上设置对齐方式你可能已经知道在 Flex 容器上设置 justify-content、align-items 的值为 center 时，可以让元素在 Flex 容器中达到水平垂直居中的效果。来看一个示例：

/* CSS */.flex__container {display: flex;justify-content: center;align-items: center;}效果如下：180 < 第一部分 淘系年度精选技术栈内容 / 前端篇Demo(https://codepen.io/airen/embed/YzwYRRy)这种方式特别适应于让 Icon 图标在容器中水平垂直居中，不同的是在 Icon 图标容器上显示设置 display: inline-flex。比如下面这个示例：/* CSS */.flex__container {display: inline-flex;align-items: center;justify-content: center;}效果如下：Demo(https://codepen.io/airen/embed/xxZpQNv)在这种模式之下，如果要让多个元素实现水平垂直居中的效果，那还需要加上 flex-direction: column，比如：淘系技术 2020 技术年货 > 181/* CSS */.flex__container {display: flex;flex-direction: column;justify-content: center;align-items: center;}效果如下：Demo(https://codepen.io/airen/embed/QWyazpZ)在 Flexbox 布局中，还可以像下面这样让 Flex 项目在 Flex 容器中达到水平垂直居中的效果：182 < 第一部分 淘系年度精选技术栈内容 / 前端篇/* CSS */.flex__container {display: flex; // 或 inline-flexjustify-content: center;}.flex__item {align-self: center;}效果如下：Demo(https://codepen.io/airen/embed/yLepGKW)如果在 Flex 容器中有多个 Flex 项目时，该方法同样有效：.flex__container {display: flex; // 或 inline-flexjustify-content: center;}.flex__container > * {align-self: center;}淘系技术 2020 技术年货 > 183比如下面这个效果：Demo(https://codepen.io/airen/embed/bGEaOjm)除此之外，还可以使用 place-content: center 让 Flex 项目实现水平垂直居中：.flex__container {display: flex;place-content: center;}.flex__item {align-self: center;}效果如下：Demo(https://codepen.io/airen/embed/gOPoZQz)184 < 第一部分 淘系年度精选技术栈内容 / 前端篇或者换：.flex__container {display: flex;place-content: center;place-items: center;}效果如下：Demo(https://codepen.io/airen/embed/JjGMwzE)这两种方式同样适用于 Flex 容器中有多个 Flex 项目的情景：.flex__container {display: flex;flex-direction: column;place-content: center;}.flex__container > * {align-self: center;}// 或.flex__container {淘系技术 2020 技术年货 > 185display: flex;flex-direction: column;place-content: center;place-items: center;}效果如下：Demo(https://codepen.io/airen/embed/XWXVoLd)可能很多同学对于 place-content 和 place-items 会感到陌生。其实 place-content 是 align-content 和 justify-content 的简写属性；而 place-items 是 align-items 和 justify-items 的简写属性。即：.flex__container {place-content: center;place-items: center;}等效于：.flex__container {align-content: center;justify-content: center;align-items: center;justify-items: center;}186 < 第一部分 淘系年度精选技术栈内容 / 前端篇虽然扩展出来有四个属性，但最终等效于：. flex__container {display: flex;align-items: center;justify-content: center;}// 多行.flex__container {display: flex;flex-direction: column;align-items: center;justify-content: center;}在 x Flex 项目上设置: `margin: auto`如果在 Flex 容器中只有一个 Flex 项目，还可以显式在 Flex 项目中显式设置 margin 的值为auto，这样也可以让 Flex 项目在 Flex 容器中水平垂直居中。例如：.flex__container {display: flex; // 或 inline-flex}.flex__item {margin: auto;}效果如下：淘系技术 2020 技术年货 > 187Demo(https://codepen.io/airen/embed/KKVZJNp)整个过程，你可以通过下面这个示例来体验。尝试着选中不同方向的 margin 值：Demo(https://codepen.io/airen/embed/gOPoqRq)Grid 中实现水平垂直居中CSS Grid 布局可以说是现代 Web 布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。在 CSS Grid 布局中，只需要仅仅的几行代码也可以快速的帮助我们实现水平垂直居中的效果。比如下面这个示例:188 < 第一部分 淘系年度精选技术栈内容 / 前端篇/* CSS */.grid {display: grid; // 或 inline-gridplace-items: center}效果如下：Demo(https://codepen.io/airen/embed/zYrRYxW)在 CSS Grid 布局模块中，只要显式设置了 display: grid（或 inline-grid）就会创建 Grid 容器和 Grid 项目，也会自动生成网格线，即行和列（默认为一行一列）。在没有显式地在 Grid 容器上设置 grid-template-columns 和 grid-template-rows，浏览器会将 Grid 容器默认设置为 Grid 内容大小：淘系技术 2020 技术年货 > 189这种方法也适用于 CSS Grid 容器中有多个子元素（Grid 项目），比如：这个时候你看到的效果如下:Demo(https://codepen.io/airen/embed/PoZQoGP)而且 palce-items 适用于每个单元格。这意味着它将居中单元格的内容。比如下面这个示例：190 < 第一部分 淘系年度精选技术栈内容 / 前端篇/* CSS */.grid__container {display: grid;place-items: center;grid-template-columns: repeat(2, 1fr);gap: 2vh;}.grid__item {display: grid;place-items: center;}效果如下：Demo(https://codepen.io/airen/embed/mdVXdpe)淘系技术 2020 技术年货 > 191等高布局等高布局也是 Web 中非常常见的一种布局方式，而且实现等高布局的方案也有很多种。这里我们主要来看 Flexbox 布局模块和 Grid 布局模块给我们带来了什么样的变化。在 Flexbox 和 Grid 布局模块中，让我们实现等高布局已经是非常的简单了，比如：/* CSS */.flex__container {display: flex; // 或 inline-flex}简单地说，在容器上显式设置了 display 的值为 flex 或 inline-flex，该容器的所有子元素的高度都相等，因为容器的 align-items 的默认值为 stretch。这个时候你看到的效果如下：Demo(https://codepen.io/airen/embed/NWxyOQq)192 < 第一部分 淘系年度精选技术栈内容 / 前端篇这种方式特别适用于卡片组件中：Demo(https://codepen.io/airen/embed/OJMQoOO)在 Grid 布局模块中类似：/* CSS */.grid__container {display: grid;grid-template-columns: 20vw 1fr 20vw; /* 根据需求调整值*/}效果如下：淘系技术 2020 技术年货 > 193Demo(https://codepen.io/airen/embed/mdVXQON)同样在一些卡片类布局中运用：Demo(https://codepen.io/airen/embed/MWKQzmE)如果需求有所调整，比如在 Flex 项目 或 Grid 项目的子元素高度和容器高度相同。/* CSS */.flex__container {display: flex;}.content {height: 100%}// 或.grid__container {194 < 第一部分 淘系年度精选技术栈内容 / 前端篇display: grid;grid-auto-flow: column;}.content {height: 100%;}效果如下：Demo(https://codepen.io/airen/embed/jOWZdbo)y Sticky Footer首先用下图来描述什么是 Sticky Footer 布局效果：淘系技术 2020 技术年货 > 195Sticky Footer 实现方案和等高、垂直居中一样，同样有很多种方案可以实现(//http://css-tricks.com/couple-takes-sticky-footer/)。比如像下面这样的结构：

先来看 Flexbox 布局模块中的实现方案：body {display: flex;flex-direction: column;}footer {margin-top: auto;}Demo(https://codepen.io/airen/embed/bGELzYy)可以尝试着在 main 区域右下角向下拖动，改变主内容区域的高度，你会发现“当内容不足一屏时，