听说你还不会 Tailwind CSS（基础·中篇）

type

status

date

slug

summary

1. 前言

上篇介绍了宽高、边距、边框、文本、颜色等常用基础属性，本篇继续基础内容，包括伪类、伪元素、flex 和 grid 布局、定位。

2. 伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。

2.1 :hover

鼠标悬浮在元素上面时出现的效果。

只要在想要实现 hover 效果的类名前添加 hover: 就可以了，例如上面悬浮时的按钮背景颜色被置为白色（hover:bg-white）、文字颜色置为黑色（hover:text-black）。

2.2 :focus

按钮、输入框等表单控件聚焦时出现的效果。

outline 👉 outline-style: solid;

focus:outline-2, focus:outline-sky-500 👉

2.3 :active

鼠标按住时就打开了 active 激活状态。

active:bg-pink-500 👉

3. 伪元素

伪元素与伪类相似，不过表现得是像是往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。例如：::before、::after、、、

3.1 ::before, ::after

block 👉 display: block;

before:content-['⭐️'], before:mr-2 👉

after:content-['*'], after:ml-0.5, after:text-red-500 👉

3.2 placeholder

placeholder:italic 👉 设置字体为斜体

placeholder:text-yellow-200 👉 设置颜色

3.3 file input

file:mr-4 file:py-2 file:px-4 👉 设置边距

file:rounded-full file:border-0 👉 设置边框

file:text-sm file:font-semibold 👉 设置字体

file:bg-cyan-50 file:text-cyan-700 👉 设置颜色

hover:file:bg-cyan-100 👉 设置悬浮效果

3.4 selection

selection:bg-amber-300 👉 设置选中时的背景颜色

selection:text-amber-900 👉 设置选中时的字体颜色

4. flex

网页的骨架非常重要，而骨架的设计来源是布局。首先是 flex 布局。

4.1 两栏布局

flex 👉 display: flex;

flex-1 👉 flex: 1 1 0%;

4.2 水平垂直方向居中

flex 👉 display: flex;

justify-center 👉 justify-content: center;

items-center 👉 align-items: center;

4.3 两端对齐导航栏

flex 👉 display: flex;

flex-1 👉 flex: 1 1 0%;

cursor-pointer 👉 cursor: pointer;

4.4 垂直方向菜单栏

flex 👉 display: flex;

flex-col 👉 flex-direction: column;

5. grid

5.1 两栏布局

grid 👉 display: grid;

grid-cols-2 👉 grid-template-columns: repeat(2, minmax(0, 1fr));

5.2 水平垂直方向居中

grid 👉 display: grid;

place-items-center 👉 place-items: center;

5.3 导航栏

grid 👉 display: grid;

grid-cols-3 👉 grid-template-columns: repeat(3, minmax(0, 1fr));

5.4 图片画廊

grid 👉 display: grid;

grid-cols-3 👉 grid-template-columns: repeat(3, minmax(0, 1fr));

gap-4 👉 gap: 1rem; /* 16px */

object-scale-down: object-fit: scale-down;

object-contain: object-fit: contain;

object-cover: object-fit: cover;

object-fill: object-fit: fill;

6. 定位

默认的定位 position 为 static，另外除了它和 relative 定位都会脱离文档流，也就是像气球那样依次飘起来。

6.1 relative + absolute

relative 👉 position: relative;

absolute 👉 position: absolute;

top-10 👉 top: 2.5rem; /* 40px */

left-10 👉 left: 2.5rem; /* 40px */

还有另外两个方向：

bottom-* 👉 bottom: _;

right-* 👉 right: _;

6.2 z-index

默认情况下，定位元素的 z-index 都是逐级递增的，就像上面那样，C > B > A。想要子元素 B 的 z 坐标最高，只要加上 z-* 即可：

z-10 👉 z-index: 10;

6.3 fixed

固定定位，将添加按钮固定在右下方是移动端中的常用功能：

fixed 👉 position: fixed;

bottom-10 👉 bottom: 2.5rem; /* 40px */

right-10 👉 right: 2.5rem; /* 40px */

6.4 sticky

粘性定位，一般把导航栏贴在顶端：

overflow-auto 👉 overflow: auto;

sticky 👉 position: sticky;

top-0 👉 top: 0;

7. 总结

以上就是基础中篇的内容，下篇将介绍形变、过渡和动画相关内容。