Tailwind CSS 尺寸控制

Tailwind CSS 尺寸控制学习笔记一、尺寸体系概览Tailwind CSS 的尺寸系统涵盖宽度 (Width)、高度 (Height)、最小/最大尺寸以及任意值提供从固定值到百分比的完整控制能力。二、宽度 (Width)1. 固定宽度类名CSS 属性像素值说明w-0width: 00px零宽度w-pxwidth: 1px1px1像素w-0.5width: 0.125rem2pxw-1width: 0.25rem4pxw-1.5width: 0.375rem6pxw-2width: 0.5rem8pxw-2.5width: 0.625rem10pxw-3width: 0.75rem12pxw-3.5width: 0.875rem14pxw-4width: 1rem16pxw-5width: 1.25rem20pxw-6width: 1.5rem24pxw-7width: 1.75rem28pxw-8width: 2rem32pxw-9width: 2.25rem36pxw-10width: 2.5rem40pxw-11width: 2.75rem44pxw-12width: 3rem48pxw-14width: 3.5rem56pxw-16width: 4rem64pxw-20width: 5rem80pxw-24width: 6rem96pxw-28width: 7rem112pxw-32width: 8rem128pxw-36width: 9rem144pxw-40width: 10rem160pxw-44width: 11rem176pxw-48width: 12rem192pxw-52width: 13rem208pxw-56width: 14rem224pxw-60width: 15rem240pxw-64width: 16rem256pxw-72width: 18rem288pxw-80width: 20rem320pxw-96width: 24rem384px2. 百分比宽度类名CSS 属性说明w-1/2width: 50%一半w-1/3width: 33.333%三分之一w-2/3width: 66.667%三分之二w-1/4width: 25%四分之一w-2/4width: 50%四分之二w-3/4width: 75%四分之三w-1/5width: 20%五分之一w-2/5width: 40%五分之二w-3/5width: 60%五分之三w-4/5width: 80%五分之四w-1/6width: 16.667%六分之一w-2/6width: 33.333%六分之二w-3/6width: 50%六分之三w-4/6width: 66.667%六分之四w-5/6width: 83.333%六分之五w-fullwidth: 100%全宽w-screenwidth: 100vw视口宽度3. 关键字宽度类名CSS 属性说明w-autowidth: auto自动宽度w-minwidth: min-content最小内容宽度w-maxwidth: max-content最大内容宽度w-fitwidth: fit-content适应内容宽度w-svwwidth: 100svw小视口宽度w-lvwwidth: 100lvw大视口宽度w-dvwwidth: 100dvw动态视口宽度三、高度 (Height)1. 固定高度高度类名与宽度使用相同的间距刻度前缀为h-类名CSS 属性像素值说明h-0height: 00px零高度h-pxheight: 1px1px1像素h-1height: 0.25rem4pxh-2height: 0.5rem8pxh-4height: 1rem16pxh-6height: 1.5rem24pxh-8height: 2rem32pxh-10height: 2.5rem40pxh-12height: 3rem48pxh-16height: 4rem64pxh-24height: 6rem96pxh-32height: 8rem128pxh-48height: 12rem192pxh-64height: 16rem256pxh-72height: 18rem288pxh-80height: 20rem320pxh-96height: 24rem384px2. 关键字高度类名CSS 属性说明h-autoheight: auto自动高度h-fullheight: 100%父元素高度h-screenheight: 100vh视口高度h-minheight: min-content最小内容高度h-maxheight: max-content最大内容高度h-fitheight: fit-content适应内容高度h-svhheight: 100svh小视口高度h-lvhheight: 100lvh大视口高度h-dvhheight: 100dvh动态视口高度四、最小/最大尺寸1. 最小宽度 (min-width)类名CSS 属性说明min-w-0min-width: 0最小宽度为 0常用防止 Flex 子元素溢出min-w-fullmin-width: 100%最小宽度 100%min-w-minmin-width: min-content最小内容宽度min-w-maxmin-width: max-content最大内容宽度min-w-fitmin-width: fit-content适应内容宽度2. 最大宽度 (max-width)类名CSS 属性像素值说明max-w-nonemax-width: none—无限制max-w-0max-width: 00pxmax-w-xsmax-width: 20rem320px超小容器max-w-smmax-width: 24rem384px小容器max-w-mdmax-width: 28rem448px中容器max-w-lgmax-width: 32rem512px大容器max-w-xlmax-width: 36rem576px超大容器max-w-2xlmax-width: 42rem672pxmax-w-3xlmax-width: 48rem768pxmax-w-4xlmax-width: 56rem896pxmax-w-5xlmax-width: 64rem1024pxmax-w-6xlmax-width: 72rem1152pxmax-w-7xlmax-width: 80rem1280pxmax-w-fullmax-width: 100%—全宽max-w-prosemax-width: 65ch—阅读最佳宽度max-w-screen-smmax-width: 640px640pxmax-w-screen-mdmax-width: 768px768pxmax-w-screen-lgmax-width: 1024px1024pxmax-w-screen-xlmax-width: 1280px1280pxmax-w-screen-2xlmax-width: 1536px1536px3. 最小高度 (min-height)类名CSS 属性说明min-h-0min-height: 0最小高度为 0min-h-fullmin-height: 100%父元素高度min-h-screenmin-height: 100vh视口高度min-h-minmin-height: min-content最小内容高度min-h-maxmin-height: max-content最大内容高度min-h-fitmin-height: fit-content适应内容高度min-h-svhmin-height: 100svh小视口高度min-h-lvhmin-height: 100lvh大视口高度min-h-dvhmin-height: 100dvh动态视口高度4. 最大高度 (max-height)类名CSS 属性说明max-h-0max-height: 0零高度max-h-pxmax-height: 1px1像素max-h-fullmax-height: 100%父元素高度max-h-screenmax-height: 100vh视口高度max-h-nonemax-height: none无限制max-h-minmax-height: min-content最小内容高度max-h-maxmax-height: max-content最大内容高度max-h-fitmax-height: fit-content适应内容高度五、尺寸逻辑属性 (Logical Properties)用于支持不同书写模式如 RTL、垂直书写的尺寸控制类名CSS 属性说明w-swidth: inline-size逻辑宽度w-ewidth: inline-size逻辑宽度别名h-sheight: block-size逻辑高度h-eheight: block-size逻辑高度别名min-w-smin-width: min-inline-size逻辑最小宽度min-h-smin-height: min-block-size逻辑最小高度max-w-smax-width: max-inline-size逻辑最大宽度max-h-smax-height: max-block-size逻辑最大高度六、任意值 (Arbitrary Values)当预设值不满足需求时可使用方括号语法指定任意值1. 固定值divclassw-[327px] h-[52px]自定义尺寸/divdivclassmax-w-[1200px]自定义最大宽度/divdivclassmin-h-[calc(100vh-64px)]计算最小高度/div2. CSS 变量divclassw-[var(--sidebar-width)]CSS 变量宽度/divdivclassh-[var(--header-height)]CSS 变量高度/div3. 计算值divclassw-[calc(100%-2rem)]计算宽度/divdivclassh-[calc(100vh-3.5rem)]计算高度/div七、尺寸与布局的配合1. Flex 布局中的尺寸控制!-- 固定侧边栏 弹性主内容 --divclassflex h-screenasideclassw-64 shrink-0 bg-gray-100侧边栏/asidemainclassflex-1 min-w-0 p-6主内容/main/div!-- 等宽子元素 --divclassflexdivclassflex-1 w-0项目 1/divdivclassflex-1 w-0项目 2/divdivclassflex-1 w-0项目 3/div/div!-- 防止文本溢出 --divclassflexdivclassmin-w-0 truncate超长文本内容会被截断.../div/div关键技巧min-w-0是 Flex 布局中防止子元素溢出的常用手段因为 Flex 子元素默认min-width: auto不会缩小到内容以下。2. Grid 布局中的尺寸控制!-- 固定列宽 弹性列宽 --divclassgrid grid-cols-[240px_1fr_1fr] gap-4div固定 240px/divdiv弹性 1fr/divdiv弹性 1fr/div/div!-- 自适应列宽 --divclassgrid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4div卡片 1/divdiv卡片 2/divdiv卡片 3/div/div3. 居中容器!-- 经典居中容器 --divclassmax-w-7xl mx-auto px-4 sm:px-6 lg:px-8页面内容/div!-- 阅读排版容器 --articleclassmax-w-prose mx-autop适合阅读的文本宽度约 65 个字符/p/article八、响应式尺寸!-- 移动端全宽桌面端固定宽度 --divclassw-full md:w-96内容/div!-- 移动端全高桌面端自适应 --divclassh-screen md:h-auto内容/div!-- 响应式最大宽度 --divclassmax-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl响应式容器/div!-- 响应式侧边栏 --divclassw-0 md:w-64 overflow-hidden transition-all侧边栏/div九、常见尺寸模式1. 全屏布局divclassh-screen flex flex-colheaderclassh-16 shrink-0导航栏/headermainclassflex-1 overflow-auto主内容/mainfooterclassh-12 shrink-0页脚/footer/div2. 固定宽高比!-- 16:9 视频容器 --divclassw-full aspect-video bg-blackiframesrcvideo.mp4classw-full h-full/iframe/div!-- 1:1 头像 --imgclassw-12 h-12 rounded-full object-coversrcavatar.jpg!-- 4:3 图片卡片 --divclassaspect-[4/3] bg-gray-200imgclassw-full h-full object-coversrcimage.jpg/div3. 滚动区域!-- 固定高度滚动列表 --divclassh-96 overflow-y-autodivclassp-4列表项 1/divdivclassp-4列表项 2/divdivclassp-4列表项 3/div/div!-- 剩余空间滚动 --divclassflex flex-col h-screenheaderclassshrink-0固定头部/headerdivclassflex-1 overflow-y-auto可滚动内容/div/div4. 弹性卡片!-- 等高卡片 --divclassgrid grid-cols-3 gap-4divclassflex flex-coldivclassflex-1 p-4内容自动等高/divdivclassp-4 border-t底部操作/div/divdivclassflex flex-coldivclassflex-1 p-4更多内容自动等高/divdivclassp-4 border-t底部操作/div/div/div十、尺寸控制最佳实践原则说明示例优先使用预设值保持设计一致性w-64而非w-[256px]Flex 用flex-1弹性伸缩优先于固定值flex-1而非w-full防溢出用min-w-0Flex/Grid 子元素防文本溢出min-w-0 truncate容器用max-w-*限制最大宽度提升可读性max-w-7xl mx-auto全屏用h-screen整页布局使用视口高度h-screen flex flex-col响应式尺寸小屏全宽大屏约束w-full md:w-auto md:max-w-md任意值慎用仅在预设值不满足时使用w-[327px]作为最后手段掌握 Tailwind CSS 的尺寸控制系统可以精确控制元素的大小行为构建灵活且一致的页面布局