CSS布局技巧 | 青训营笔记

小宇爱吃榴莲
79 阅读4分钟

简介

CSS是Web开发中不可或缺的一部分，随着Web技术的不断革新，CSS也变得更加强大。CSS的众多属性你知道了多少？具体开发中该使用什么属性才最适合恰当？如今的一些CSS属性可以让我们节约更多的时间。比如在Web布局中，现代CSS特性就可以更好的帮助我们快速实现如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等效果。现将粗略介绍一些不同的CSS属性来实现这些效果，希望对同学们有所帮助。

关于页面布局技术的细节：

  • 正常布局流
  • display属性
  • 弹性盒子
  • 网格
  • 浮动
  • 定位
  • CSS 表格布局
  • 多列布局

一 水平垂直居中

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

Flexbox中实现水平垂直居中

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

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

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

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>

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

效果如下：

image.png

这种方式特别适应于让Icon图标在容器中水平垂直居中，不同的是在Icon图标容器上显示设置 display: inline-flex。比如下面这个示例：

<!-- HTML -->
<div class="flex__container">
    <svg> </svg>
</div>

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

效果如下：

image.png

在这种模式之下，如果要让多个元素实现水平垂直居中的效果，那还需要加上 flex-direction: column，比如：

<!-- HTML -->
<div class="flex__container">
    <div class="avatar">:)</div>
    <div class="media__heading"></div>
    <div class="media__content"></div>
    <div class="action"></div>
</div>

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

效果如下：

image.png

在Flexbox布局中，还可以像下面这样让Flex项目在Flex容器中达到水平垂直居中的效果：

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>

/* CSS */
.flex__container {
    display: flex; // 或inline-flex
    justify-content: center;
}

.flex__item {
    align-self: center;
}

效果如下：

image.png

如果在Flex容器中有多个Flex项目时，该方法同样有效

Grid中实现水平垂直居中

CSS Grid布局可以说是现代Web布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。

在CSS Grid布局中，只需要仅仅的几行代码也可以快速的帮助我们实现水平垂直居中的效果。比如下面这个示例：

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item"></div>
</div>

/* CSS */
.grid {
    display: grid; // 或 inline-grid
    place-items: center
}

效果如下：

image.png

在CSS Grid布局模块中，只要显式设置了 display: grid（或 inline-grid）就会创建Grid容器和Grid项目，也会自动生成网格线，即行和列（默认为一行一列）。

image.png

在没有显式地在Grid容器上设置 grid-template-columns 和 grid-template-rows，浏览器会将Grid容器默认设置为Grid内容大小：

image.png

这种方法也适用于CSS Grid容器中有多个子元素（Grid项目），比如：

<!-- HTML -->
<div class="grid__container">
    <div class="avatar">:)</div>
    <div class="media__heading"></div>
    <div class="media__content"></div>
    <div class="action"></div>
</div>

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

image.png

而且 palce-items 适用于每个单元格。这意味着它将居中单元格的内容。比如下面这个示例：

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item">
        <h3>Special title treatment</h3>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <div class="action">Go somewhere</div>
    </div>
</div>

/* CSS */
.grid__container {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vh;
}


.grid__item {
    display: grid;
    place-items: center;
}

效果如下：

image.png

小结

文章中主要介绍了Web中一些布局的实现思路和具体方案。其实文章提到的效果，比如水平垂直居中、等高布局等，在CSS中一直有多种解决方案，只不过随着CSS Flexbox布局模块和CSS Grid布局模块的到来，实现这些效果变得更为灵活和简洁。 最后希望这篇文章对你平时的工作有所帮助。

avatar
文章
阅读
粉丝