flexbox一维布局
有关flexbox的基础知识 基础知识这里不详细赘述了，这篇文章写的非常好，稍微看一遍就行。 1. 把容器变成一个flexbox tailwind类名 对应的CSS属性和值 应用在容器还是元素身上 效果 flex display: flex 容器 使元素变成一个flexbox inline-flex display: inline-flex 容器 使元素变成一个inline的flexbox...
我所书写的所有，都列在这里，它们是如此的浅薄与无趣。
有关flexbox的基础知识 基础知识这里不详细赘述了，这篇文章写的非常好，稍微看一遍就行。 1. 把容器变成一个flexbox tailwind类名 对应的CSS属性和值 应用在容器还是元素身上 效果 flex display: flex 容器 使元素变成一个flexbox inline-flex display: inline-flex 容器 使元素变成一个inline的flexbox...
复习一下CSS中有关指定元素位置的样式 CSS有个样式叫position，它决定了浏览器应当如何排版所有元素。 首先介绍的是这个样式的默认值，即position: static: 它表浏览器将以默认的，从左到右，从上到下，从内到外的方式去排列所有元素。比如我们如下正常写三个排排坐的<div> <div class="size-20 bg-red-300"></div>...
旋转 rotate系列类名用来很方便的对元素进行旋转操作。基本写法有四种，如下所示： 写法 示例 解释 rotate-角度 rotate-45 将元素顺时针旋转45度 -rotate-角度 -rotate-45 将元素逆时针旋转45度 rotate-[任意值] rotate-[3.142rad] 将元素顺时针旋转3.142弧度...
基本宽度与高度 宽度用w-<值>来表示，高度用h-<值>来表示，w和h分别代表width和height，很好理解。 而<值>有很多种写法，最常见的写法就下面五种 写法示例 解释 尺寸是怎么计算的 w-2 值用数字表示 真实的值等于数字 * 基本单位即生成的样式是width: calc(var(--spacing) * 2) h-1/2 值用分数表示...
什么是全局变量？ 我们在讲颜色的时候，说tailwind开箱的时候就定义了很多颜色，比如cyan-500，yellow-700等，虽然我们没讲到元素的宽高边框框线内外边距等，但前面的示例代码中或多或少的都出现了类似p-2, m-2, w-30,...
什么是全局预设样式 当你在项目中引入tailwind的时候，即使什么都不写，你也会发现浏览器渲染有些东西跟标准的HTML+CSS是不一样的。比如像下面这个HTML文档，用到了tailwindcss官方提供的play CDN。 <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta...
共有哪些颜色 默认定义的颜色如下图所示： 每种颜色分十一级，最轻是50，最重是950，夹在中间的颜色级差都是100，即不存在yellow-150这种东西 颜色矩阵中没有black和white：因为纯白和纯黑是没有灰度意义的，所以不在上面这个矩阵表中 但在这个矩阵之外，确实有两个颜色，叫white和black 有哪些样式会用到颜色...
empty 元素没有content时生效 <div class="flex p-2"> <div class="w-12 h-12 bg-yellow-300 empty:bg-yellow-700">xxx</div> <div class="w-12 h-12 bg-yellow-300 empty:bg-yellow-700"></div> </div>...
hover 鼠标悬停在元素上，用hover: <div class="p-2"> <div class="w-24 h-24 bg-black hover:bg-red-500"></div> </div> focus...
1 基本知识 在类名前面加上以下前缀，代表该类在大于该断点的屏幕尺寸上生效。比如： <img class="w-16 md:w-32 lg:w-48" src="..."> 代表： 在 [0~md) 屏幕宽度下，width=16 在 [md~lg) 屏幕宽度下，width=32 在 [lg~+inf) 屏幕宽度下，width=48 一共有五个断点，定义如下： 前缀 定义 默认情况下的像素尺寸...