CSS元素的尺寸包括宽度width和高度height两个属性，Tailwind设置尺寸的单位包括rem、百分比、px、vw以及auto。
- 宽度
- 最小宽度
- 最大宽度
- 高度
- 最小高度
- 最大高度
宽度（width）
Tailwind为宽度设置提供了不同单位形式的工具类，主要分为4种类型
- 自动宽度
- 固定宽度
- 弹性宽度
- 视口宽度
自动宽度（auto）
Tailwind使用.w-auto工具类让浏览器根据元素内容自动计算其宽度，为元素的默认宽度。
.w-auto{ width: auto; }
固定宽度（number）
固定宽度主要使用.w-{number}和.w-px两种类型，其中number为rem相对单位，px为像素绝对单位。以rem为单位时，每个单位为0.25rem，即一个字号的1/4大小。
.w-1{ width: 1rem; }
弹性宽度（fraction）
Tailwind采用.w-full和.w-{fraction}形式命名的工具类为页面元素设置一个基于百分比的可变宽度，也就时常见的栅格布局。
.w-full{ width: 100%; }
| 类名 | 属性 |
|---|---|
| w-1/2 | width:50%; |
| w-1/3 | width:33.3%; |
| 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:75%; |
| w-1/6 | width:16.66%; |
| w-2/6 | width:33.33%; |
| w-3/6 | width:50%; |
| w-4/6 | width:66.66%; |
| w-5/6 | width:83.33%; |
| w-1/12 | width:8.33%; |
| w-2/12 | width:16.66%; |
| w-3/12 | width:25%; |
| w-4/12 | width:33.33%; |
| w-5/12 | width:41.66%; |
| w-6/12 | width:50%; |
| w-7/12 | width:58.33%; |
| w-8/12 | width:66.66%; |
| w-9/12 | width:75%; |
| w-10/12 | width:83.33%; |
| w-11/12 | width:91.66%; |
| w-full | width:100%; |
视口宽度（screen）
Tailwind使用.w-screen工具类设置元素宽度为页面视口（viewport）宽度，视口默认宽度为100vw。
.w-screen{ width: 100vw; }
vw和vh是屏幕视口单位viewport units，视口viewport是浏览器窗口大小的单位，不受屏幕分辨率影响，可用于不同分辨率屏幕自适应处理。
vw全称为viewport width表示可视窗口的宽度单位，和百分比类似，1vw表示可视窗口viewport宽度的1/100。与百分比不同的是vw始终是相对于可视窗口的窗口，而百分比则是相对父级元素的。
最小宽度（min）
min-width属性用于设置页面元素的最小宽度，Tailwind提供了min-w-前缀的工具类用于设置min-width属性。
正常情况下，当父级盒子容器内部元素宽度宽度小于父级容器的min-width时，父级容器的宽度为min-width。当父级盒子容器的内容宽度大于min-width时，父级容器会随着内容的增加而被撑大，没有上限，但父级容器的宽度最小值却是设置的min-width最小宽度的值。
| 工具类 | 属性 |
|---|---|
| min-w-0 | min-width:0 |
| min-w-full | min-width:100% |
最大宽度（max）
CSS中max-width属性用于设置页面元素的最大宽度，Tailwind提供了.max-w-{size}前缀的工具类以设置max-width属性。
max-width属性不包括填充、边框、页边距，只是元素内容区域的最大宽度。max-width属性会对元素的宽度设置一个最大的限制，元素可以比指定值窄，但不能比它宽，而且不允许指定负值。
| 工具类 | 属性 |
|---|---|
| max-w-xs | max-width:20rem; |
| max-w-sm | max-width:24rem; |
| max-w-md | max-width:28rem; |
| max-w-lg | max-width:32rem; |
| max-w-xl | max-width:36rem; |
| max-w-2xl | max-width:42rem; |
| max-w-3xl | max-width:48rem; |
| max-w-4xl | max-width:56rem; |
| max-w-5xl | max-width:64rem; |
| max-w-6xl | max-width:72rem; |
| max-w-full | max-width:100%; |
| max-w-screen-sm | max-width:640px; |
| max-w-screen-md | max-width:768px; |
| max-w-screen-lg | max-width:1024px; |
| max-w-screen-xl | max-width:1280px; |
| max-w-none | max-width:none; |
高度（height）
- 自动高度（auto）
- 屏幕高度（screen）
- 固定高度（fixed）
- 弹性高度（full）
自动高度（auto）
当为元素设置height为auto自动时，元素会根据内容自动调节元素高度。auto是height属性的默认值，浏览器会根据元素内容自动计算出实际高度。
.h-auto{ height:auto; }
屏幕高度（screen）
屏幕高度使用vh作为单位，vh表示viewport height视口高度。使用vh作为单位的元素的实际高度是相对于viewport视口的高度，视口viewport会被划分成为100个单位的vh， 1vh也就是等于视口高度的1%。
视口（viewport）在PC端指的是浏览器的可视区域，在移动端指的是Layout Viewport。因为移动端的视口分为三种分别是：布局视口（Layout Viewport）、视觉视口（Visual Viewport）、理想视口（Ideal Viewport）。
.h-screen{ height: 100vh; }
固定高度（fixed）
固定高度使用h-{number}或h-px工具类来设置元素的高度
| 工具类 | 属性 |
|---|---|
| h-px | height:1px; |
| h-0 | height:0; |
| h-1 | height:0.25rem; |
| h-2 | height:0.5rem; |
| h-3 | height:0.75rem; |
| h-4 | height:1rem; |
| h-5 | height:1.25rem; |
| h-6 | height:1.5rem; |
| h-8 | height:2rem; |
| h-10 | height:2.5rem; |
| h-12 | height:3rem; |
| h-16 | height:4rem; |
| h-20 | height:5rem; |
| h-24 | height:6rem; |
| h-32 | height:8rem; |
| h-40 | height:10rem; |
| h-48 | height:12rem; |
| h-56 | height:14rem; |
| h-64 | height:16rem; |
最小高度（min）
CSS中min-height属性用于设置页面元素的最小高度，Tailwind采用.min-h-{size}工具类的方式设置min-height。
| 工具类 | 描述 |
|---|---|
| min-h-0 | min-height:0; |
| min-h-full | min-height:100%; |
| min-h-screen | min-height:100vh; |
最大高度（max）
CSS中max-height属性用于设置元素的最大高度，Tailwind使用.max-h-{size}来设置max-height属性。
| 工具类 | 描述 |
|---|---|
| max-h-full | max-height:100%; |
| max-h-screen | max-height:100vh; |
扫一扫
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
