
- Tailwind CSS 教程
- Tailwind CSS - 首页
- Tailwind CSS - 路线图
- Tailwind CSS - 简介
- Tailwind CSS - 安装
- Tailwind CSS - 编辑器设置
- Tailwind CSS - 核心概念
- Tailwind CSS - 实用优先基础
- Tailwind CSS - 悬停、焦点和其他状态
- Tailwind CSS - 响应式设计
- Tailwind CSS - 深色模式
- Tailwind CSS - 重用样式
- Tailwind CSS - 添加自定义样式
- Tailwind CSS - 函数和指令
- Tailwind CSS - 自定义
- Tailwind CSS - 配置
- Tailwind CSS - 内容配置
- Tailwind CSS - 主题配置
- Tailwind CSS - 自定义屏幕
- Tailwind CSS - 自定义颜色
- Tailwind CSS - 自定义间距
- Tailwind CSS - 插件
- Tailwind CSS - 预设
- Tailwind CSS - 基础样式
- Tailwind CSS - 预设样式
- Tailwind CSS - 布局
- Tailwind CSS - 宽高比
- Tailwind CSS - 容器
- Tailwind CSS - 列
- Tailwind CSS - 断行后
- Tailwind CSS - 断行前
- Tailwind CSS - 断行内
- Tailwind CSS - 边框装饰断开
- Tailwind CSS - 盒子大小
- Tailwind CSS - 显示
- Tailwind CSS - 浮动
- Tailwind CSS - 清除浮动
- Tailwind CSS - 隔离
- Tailwind CSS - 对象适应
- Tailwind CSS - 对象位置
- Tailwind CSS - 溢出
- Tailwind CSS - 滚动行为
- Tailwind CSS - 位置
- Tailwind CSS - 上/右/下/左
- Tailwind CSS - 可见性
- Tailwind CSS - Z-Index
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - Flex 基准
- Tailwind CSS - Flex 方向
- Tailwind CSS - Flex 换行
- Tailwind CSS - Flex
- Tailwind CSS - Flex 伸展
- Tailwind CSS - Flex 收缩
- Tailwind CSS - 顺序
- Tailwind CSS - 网格模板列
- Tailwind CSS - 网格列开始/结束
- Tailwind CSS - 网格模板行
- Tailwind CSS - 网格行开始/结束
- Tailwind CSS - 网格自动流
- Tailwind CSS - 网格自动列
- Tailwind CSS - 网格自动行
- Tailwind CSS - 间隙
- Tailwind CSS - 内容对齐
- Tailwind CSS - 项目对齐
- Tailwind CSS - 自身对齐
- Tailwind CSS - 内容排列
- Tailwind CSS - 项目排列
- Tailwind CSS - 自身排列
- Tailwind CSS - 位置内容
- Tailwind CSS - 位置项目
- Tailwind CSS - 位置自身
- Tailwind CSS - 间距
- Tailwind CSS - 内边距
- Tailwind CSS - 外边距
- Tailwind CSS - 间距相等
- Tailwind CSS - 大小
- Tailwind CSS - 宽度
- Tailwind CSS - 最小宽度
- Tailwind CSS - 最大宽度
- Tailwind CSS - 高度
- Tailwind CSS - 最小高度
- Tailwind CSS - 最大高度
- Tailwind CSS - 尺寸
- Tailwind CSS - 排版
- Tailwind CSS - 字体系列
- Tailwind CSS - 字体大小
- Tailwind CSS - 字体平滑
- Tailwind CSS - 字体样式
- Tailwind CSS - 字体粗细
- Tailwind CSS - 数字字体变体
- Tailwind CSS - 字母间距
- Tailwind CSS - 行数限制
- Tailwind CSS - 行高
- Tailwind CSS - 列表样式图像
- Tailwind CSS - 列表样式位置
- Tailwind CSS - 列表样式类型
- Tailwind CSS - 文本对齐
- Tailwind CSS - 文本颜色
- Tailwind CSS - 文本装饰
- Tailwind CSS - 文本装饰颜色
- Tailwind CSS - 文本装饰样式
- Tailwind CSS - 文本装饰粗细
- Tailwind CSS - 文本下划线偏移
- Tailwind CSS - 文本转换
- Tailwind CSS - 文本溢出
- Tailwind CSS - 文本换行
- Tailwind CSS - 文本缩进
- Tailwind CSS - 垂直对齐
- Tailwind CSS - 空白符
- Tailwind CSS - 断词
- Tailwind CSS - 连字符
- Tailwind CSS - 内容
- Tailwind CSS - 背景
- Tailwind CSS - 背景附件
- Tailwind CSS - 背景裁剪
- Tailwind CSS - 背景颜色
- Tailwind CSS - 背景原点
- Tailwind CSS - 背景位置
- Tailwind CSS - 背景重复
- Tailwind CSS - 背景大小
- Tailwind CSS - 背景图像
- Tailwind CSS - 渐变颜色停止
- Tailwind CSS - 边框
- Tailwind CSS - 边框半径
- Tailwind CSS - 边框宽度
- Tailwind CSS - 边框颜色
- Tailwind CSS - 边框样式
- Tailwind CSS - 分割线宽度
- Tailwind CSS - 分割线颜色
- Tailwind CSS - 分割线样式
- Tailwind CSS - 轮廓宽度
- Tailwind CSS - 轮廓颜色
- Tailwind CSS - 轮廓样式
- Tailwind CSS - 轮廓偏移
- Tailwind CSS - 环宽度
- Tailwind CSS - 环颜色
- Tailwind CSS - 环偏移宽度
- Tailwind CSS - 环偏移颜色
- Tailwind CSS - 效果
- Tailwind CSS - 盒子阴影
- Tailwind CSS - 盒子阴影颜色
- Tailwind CSS - 不透明度
- Tailwind CSS - 混合模式
- Tailwind CSS - 背景混合模式
- Tailwind CSS - 滤镜
- Tailwind CSS - 模糊
- Tailwind CSS - 亮度
- Tailwind CSS - 对比度
- Tailwind CSS - 投影
- Tailwind CSS - 灰度
- Tailwind CSS - 色调旋转
- Tailwind CSS - 反转
- Tailwind CSS - 饱和度
- Tailwind CSS - 棕褐色
- Tailwind CSS - 背景模糊
- Tailwind CSS - 背景亮度
- Tailwind CSS - 背景对比度
- Tailwind CSS - 背景灰度
- Tailwind CSS - 背景色调旋转
- Tailwind CSS - 背景反转
- Tailwind CSS - 背景不透明度
- Tailwind CSS - 背景饱和度
- Tailwind CSS - 背景棕褐色
- Tailwind CSS - 表格
- Tailwind CSS - 边框折叠
- Tailwind CSS - 边框间距
- Tailwind CSS - 表格布局
- Tailwind CSS - 标题位置
- Tailwind CSS - 过渡和动画
- Tailwind CSS - 过渡属性
- Tailwind CSS - 过渡持续时间
- Tailwind CSS - 过渡时序函数
- Tailwind CSS - 过渡延迟
- Tailwind CSS - 动画
- Tailwind CSS - 变换
- Tailwind CSS - 缩放
- Tailwind CSS - 旋转
- Tailwind CSS - 平移
- Tailwind CSS - 倾斜
- Tailwind CSS - 变换原点
- Tailwind CSS - 交互性
- Tailwind CSS - 重音颜色
- Tailwind CSS - 外观
- Tailwind CSS - 光标
- Tailwind CSS - 插入符颜色
- Tailwind CSS - 指针事件
- Tailwind CSS - 调整大小
- Tailwind CSS - 滚动行为
- Tailwind CSS - 滚动边距
- Tailwind CSS - 滚动填充
- Tailwind CSS - 滚动捕捉对齐
- Tailwind CSS - 滚动捕捉停止
- Tailwind CSS - 滚动捕捉类型
- Tailwind CSS - 触摸行为
- Tailwind CSS - 用户选择
- Tailwind CSS - 将更改
- Tailwind CSS - SVG
- Tailwind CSS - 填充
- Tailwind CSS - 描边
- Tailwind CSS - 描边宽度
- Tailwind CSS - 可访问性
- Tailwind CSS - 屏幕阅读器
- Tailwind CSS - 强制颜色调整
- Tailwind CSS - 附加
- Tailwind CSS - 与预处理器一起使用
- Tailwind CSS - 生产优化
- Tailwind CSS - 参考
- Tailwind CSS - 核心概念
- Tailwind CSS - 自定义
- Tailwind CSS - 布局
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - 间距
- Tailwind CSS - 大小
- Tailwind CSS - 排版
- Tailwind CSS - 背景
- Tailwind CSS - 边框
- Tailwind CSS - 效果
- Tailwind CSS - 滤镜
- Tailwind CSS - 表格
- Tailwind CSS - 过渡和动画
- Tailwind CSS - 变换
- Tailwind CSS - 交互性
- Tailwind CSS - 资源
- Tailwind CSS - 讨论
- Tailwind CSS - 有用资源
Tailwind CSS - 宽度
Tailwind CSS 宽度是一个实用程序类,它提供了一种有效处理内容宽度的方法。它用于设置或操作任何 HTML 元素的宽度。
Tailwind CSS 宽度类
以下是提供有效处理内容宽度方法的Tailwind CSS 宽度类列表。
类名 | CSS 属性 |
---|---|
w-0 | width: 0px; |
w-px | width: 1px; |
w-0.5 | width: 0.125rem; /* 2px */ |
w-1 | width: 0.25rem; /* 4px */ |
w-1.5 | width: 0.375rem; /* 6px */ |
w-2 | width: 0.5rem; /* 8px */ |
w-2.5 | width: 0.625rem; /* 10px */ |
w-3 | width: 0.75rem; /* 12px */ |
w-3.5 | width: 0.875rem; /* 14px */ |
w-4 | width: 1rem; /* 16px */ |
w-5 | width: 1.25rem; /* 20px */ |
w-6 | width: 1.5rem; /* 24px */ |
w-7 | width: 1.75rem; /* 28px */ |
w-8 | width: 2rem; /* 32px */ |
w-9 | width: 2.25rem; /* 36px */ |
w-10 | width: 2.5rem; /* 40px */ |
w-11 | width: 2.75rem; /* 44px */ |
w-12 | width: 3rem; /* 48px */ |
w-14 | width: 3.5rem; /* 56px */ |
w-16 | width: 4rem; /* 64px */ |
w-20 | width: 5rem; /* 80px */ |
w-24 | width: 6rem; /* 96px */ |
w-28 | width: 7rem; /* 112px */ |
w-32 | width: 8rem; /* 128px */ |
w-36 | width: 9rem; /* 144px */ |
w-40 | width: 10rem; /* 160px */ |
w-44 | width: 11rem; /* 176px */ |
w-48 | width: 12rem; /* 192px */ |
w-52 | width: 13rem; /* 208px */ |
w-56 | width: 14rem; /* 224px */ |
w-60 | width: 15rem; /* 240px */ |
w-64 | width: 16rem; /* 256px */ |
w-72 | width: 18rem; /* 288px */ |
w-80 | width: 20rem; /* 320px */ |
w-96 | width: 24rem; /* 384px */ |
w-auto | width: auto; |
w-1/2 | width: 50%; |
w-1/3 | width: 33.333333%; |
w-2/3 | width: 66.666667%; |
w-1/4 | width: 25%; |
w-2/4 | width: 50%; |
w-3/4 | width: 75%; |
w-1/5 | width: 20%; |
w-2/5 | width: 40%; |
w-3/5 | width: 60%; |
w-4/5 | width: 80%; |
w-1/6 | width: 16.666667%; |
w-2/6 | width: 33.333333%; |
w-3/6 | width: 50%; |
w-4/6 | width: 66.666667%; |
w-5/6 | width: 83.333333%; |
w-1/12 | width: 8.333333%; |
w-2/12 | width: 16.666667%; |
w-3/12 | width: 25%; |
w-4/12 | width: 33.333333%; |
w-5/12 | width: 41.666667%; |
w-6/12 | width: 50%; |
w-7/12 | width: 58.333333%; |
w-8/12 | width: 66.666667%; |
w-9/12 | width: 75%; |
w-10/12 | width: 83.333333%; |
w-11/12 | width: 91.666667%; |
w-full | width: 100%; |
w-screen | width: 100vw; |
w-svw | width: 100svw; |
w-lvw | width: 100lvw; |
w-dvw | width: 100dvw; |
w-min | width: min-content; |
w-max | width: max-content; |
w-fit | width: fit-content; |
Tailwind CSS 宽度类的功能
- w-*:这指定了宽度,可以设置特定长度。* 可以替换为表中提到的任何可接受的值。
- w-px:这将宽度指定为 1px 值。
- w-auto:这指定宽度根据内容设置。
- w-1/2:这指定宽度设置为窗口的一半。
- w-1/3: 指定宽度设置为窗口的三分之一。
- w-1/4: 指定宽度设置为窗口的四分之一。
- w-1/5: 指定宽度设置为窗口的五分之一。
- w-1/6: 指定宽度设置为窗口的六分之一。
- w-1/12: 指定宽度设置为窗口的十二分之一。
- w-full: 指定宽度设置为全宽。
- w-screen: 指定宽度设置为屏幕尺寸。
- w-svh: 此类将元素的宽度设置为100 svw。(svw 的含义需根据上下文补充说明,例如视窗宽度)
- w-lvh: 此类将元素的宽度设置为100 lvh。(lvh 的含义需根据上下文补充说明,例如视窗高度)
- w-dvh: 此类将元素的宽度设置为100 dvh。(dvh 的含义需根据上下文补充说明,例如文档高度)
- w-min: 此类用于指定最小宽度。
- w-max: 此类用于指定最大宽度。
- w-fit: 此类将宽度设置为适合父元素内容的宽度。
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
Tailwind CSS 宽度类示例
以下示例将演示 Tailwind CSS 宽度类实用程序。
定义固定宽度
要定义固定宽度,我们可以使用诸如'w-px','w-1'和'w-24'之类的类。 上表中任何有效的数值 (w-*) 都可以用来创建一个固定宽度的元素。
示例
在这个示例中,我们将创建多个元素,并为每个元素设置不同的固定宽度。
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-4"> <h2 class="text-xl mb-3"> Tailwind CSS Width Class </h2> <div class="w-44 bg-green-400 h-12 rounded-lg text-center m-2">w-44</div> <div class="w-40 bg-green-400 h-12 rounded-lg text-center m-2">w-40</div> <div class="w-36 bg-green-400 h-12 rounded-lg text-center m-2">w-36</div> <div class="w-32 bg-green-400 h-12 rounded-lg text-center m-2">w-32</div> <div class="w-28 bg-green-400 h-12 rounded-lg text-center m-2">w-28</div> <div class="w-24 bg-green-400 h-12 rounded-lg text-center m-2">w-24</div> </body> </html>
指定百分比宽度
指定百分比宽度意味着该元素的宽度完全取决于父元素的宽度。 通过使用'w-full','w-1/2'和'w-2/5',我们可以设置元素宽度。
示例
在这个示例中,我们将创建多个元素,并为每个元素设置不同的百分比宽度。
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-4"> <h2 class="text-xl mb-3"> Tailwind CSS Width Class </h2> <div class="w-1/12 bg-green-400 h-12 rounded-lg text-center m-2">w-1/12</div> <div class="w-2/12 bg-green-400 h-12 rounded-lg text-center m-2">w-2/12</div> <div class="w-3/12 bg-green-400 h-12 rounded-lg text-center m-2">w-3/12</div> <div class="w-4/12 bg-green-400 h-12 rounded-lg text-center m-2">w-4/12</div> </body> </html>
根据视口宽度定义宽度
要根据视口宽度设置元素的宽度,我们可以使用'w-screen'类。 这将根据视口自动调整元素的宽度。
示例
在这个示例中,我们将创建两个元素,在第一个元素中我们将使用'w-screen'类,而第二个元素保持为空。
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-4"> <h2 class="text-xl mb-3"> Tailwind CSS Width Class </h2> <div class="w-screen bg-green-400 h-12 rounded-lg text-center m-2">w-1/12</div> <div class="bg-green-400 h-12 rounded-lg text-center m-2"></div> </body> </html>
基于悬停的全宽
可以通过使用'hover'类来设置元素在悬停时的全宽。 但您必须记住,只有全宽是可能的。
示例
在这个示例中,我们创建了一个在悬停时占据全宽的元素。
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-4"> <h2 class="text-xl mb-3"> Tailwind CSS Width Class </h2> <div class="flex text-center"> <div class="w-1/6 hover:w-full bg-green-600 h-12 rounded-lg"> Hover over Me </div> </div> </div> </body> </html>
广告