用户登录

我们可以用 w 前缀的类来设置元素的宽度,用 h 前缀的类设置元素的高度。添加一个 div 元素,先给它一个背景颜色,比如 bg-purple-300。

然后输入 w-,编辑器会列出一些可用的类,用一个 w-32 ,再添加一个 h-16 设置一下元素的高度。 这个表示尺寸大小的数字,可以想成是 4 的倍数,用这个数字乘以 4,结果就是对应的像素。比如 w-32,32x 4 是 128 像素。也就是 w-32 这个类设置的元素的宽度就是 128 像素。

鼠标放在这个类的上面,会显示这个类的样式就是把 width 设置成了 8rem ,rem 是相对于文档根的文字的大小,默认是 16像素,这样 8rem ,如果换算成像素,就是 8 乘以 16,结果就是 128px。

流动

除了设置固定的尺寸,还可以设置流动的尺寸,也就是百分比值的尺寸,复制一份,修改一下背景,改成 bg-purple-400 ,如果想让这个元素占用 50% 的宽度,可以添加一个 w-1/2 ,意思就是占用二分之一的宽度。鼠标放在这个类的上面,用的样式就是 width: 50%。

如果想把宽度设置成可视口的宽度,可以添加一个 w-screen,这个类的样式就是把 width 设置成了 100vw, 意思就是占用 100% 的可视窗口的宽度。

宽度与高度《 Tailwind:CSS 工具样式框架 》

统计

13198
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点