Sizing 大小
使用设置宽和高的辅助功能,您能够轻松的将一个元素的宽度或者高度设置为相对于父级元素一样。
宽度 to do 单位不准没换算 |
高度 to do 单位不准没换算 |
|||
---|---|---|---|---|
Class | Properties | Class | Properties | |
w-0 | width: 0px; | h-0 | height: 0px; | |
w-px | width: 1px; | h-px | height: 1px; | |
w-0.5 | width: 0.125rem; / 2px / | h-0.5 | height: 0.125rem; / 2px / | |
w-1 | width: 0.25rem; / 4px / | h-1 | height: 0.25rem; / 4px / | |
w-1.5 | width: 0.375rem; / 6px / | h-1.5 | height: 0.375rem; / 6px / | |
w-2 | width: 0.5rem; / 8px / | h-2 | height: 0.5rem; / 8px / | |
w-2.5 | width: 0.625rem; / 10px / | h-2.5 | height: 0.625rem; / 10px / | |
w-3 | width: 0.75rem; / 12px / | h-3 | height: 0.75rem; / 12px / | |
w-3.5 | width: 0.875rem; / 14px / | h-3.5 | height: 0.875rem; / 14px / | |
w-4 | width: 1rem; / 16px / | h-4 | height: 1rem; / 16px / | |
w-5 | width: 1.25rem; / 20px / | h-5 | height: 1.25rem; / 20px / | |
w-6 | width: 1.5rem; / 24px / | h-6 | height: 1.5rem; / 24px / | |
w-7 | width: 1.75rem; / 28px / | h-7 | height: 1.75rem; / 28px / | |
w-8 | width: 2rem; / 32px / | h-8 | height: 2rem; / 32px / | |
w-9 | width: 2.25rem; / 36px / | h-9 | height: 2.25rem; / 36px / | |
w-10 | width: 2.5rem; / 40px / | h-10 | height: 2.5rem; / 40px / | |
w-11 | width: 2.75rem; / 44px / | h-11 | height: 2.75rem; / 44px / | |
w-12 | width: 3rem; / 48px / | h-12 | height: 3rem; / 48px / | |
w-14 | width: 3.5rem; / 56px / | h-14 | height: 3.5rem; / 56px / | |
w-16 | width: 4rem; / 64px / | h-16 | height: 4rem; / 64px / | |
w-20 | width: 5rem; / 80px / | h-20 | height: 5rem; / 80px / | |
w-24 | width: 6rem; / 96px / | h-24 | height: 6rem; / 96px / | |
w-28 | width: 7rem; / 112px / | h-28 | height: 7rem; / 112px / | |
w-32 | width: 8rem; / 128px / | h-32 | height: 8rem; / 128px / | |
w-36 | width: 9rem; / 144px / | h-36 | height: 9rem; / 144px / | |
w-40 | width: 10rem; / 160px / | h-40 | height: 10rem; / 160px / | |
w-44 | width: 11rem; / 176px / | h-44 | height: 11rem; / 176px / | |
w-48 | width: 12rem; / 192px / | h-48 | height: 12rem; / 192px / | |
w-52 | width: 13rem; / 208px / | h-52 | height: 13rem; / 208px / | |
w-56 | width: 14rem; / 224px / | h-56 | height: 14rem; / 224px / | |
w-60 | width: 15rem; / 240px / | h-60 | height: 15rem; / 240px / | |
w-64 | width: 16rem; / 256px / | h-64 | height: 16rem; / 256px / | |
w-72 | width: 18rem; / 288px / | h-72 | height: 18rem; / 288px / | |
w-80 | width: 20rem; / 320px / | h-80 | height: 20rem; / 320px / | |
w-96 | width: 24rem; / 384px / | h-96 | height: 24rem; / 384px / | |
w-auto | width: auto; | h-auto | height: auto; | |
w-1/2 | width: 50%; | h-1/2 | height: 50%; | |
w-1/3 | width: 33.333333%; | h-1/3 | height: 33.333333%; | |
w-2/3 | width: 66.666667%; | h-2/3 | height: 66.666667%; | |
w-1/4 | width: 25%; | h-1/4 | height: 25%; | |
w-2/4 | width: 50%; | h-2/4 | height: 50%; | |
w-3/4 | width: 75%; | h-3/4 | height: 75%; | |
w-1/5 | width: 20%; | h-1/5 | height: 20%; | |
w-2/5 | width: 40%; | h-2/5 | height: 40%; | |
w-3/5 | width: 60%; | h-3/5 | height: 60%; | |
w-4/5 | width: 80%; | h-4/5 | height: 80%; | |
w-1/6 | width: 16.666667%; | h-1/6 | height: 16.666667%; | |
w-2/6 | width: 33.333333%; | h-2/6 | height: 33.333333%; | |
w-3/6 | width: 50%; | h-3/6 | height: 50%; | |
w-4/6 | width: 66.666667%; | h-4/6 | height: 66.666667%; | |
w-5/6 | width: 83.333333%; | h-5/6 | height: 83.333333%; | |
w-1/12 | width: 8.333333%; | h-full | height: 100%; | |
w-2/12 | width: 16.666667%; | h-screen | height: 100vh; | |
w-3/12 | width: 25%; | h-min | height: min-content; | |
w-4/12 | width: 33.333333%; | h-max | height: max-content; | |
w-5/12 | width: 41.666667%; | h-fit | height: fit-content; | |
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-min | width: min-content; | |||
w-max | width: max-content; | |||
w-fit | width: fit-content; |