企业官网建设流程全解析

用dw制作网站模板下载,红色系网站设计,沈阳网站制作,信息网查询在 Tailwind CSS 中#xff0c;设定元素的宽度#xff08;width#xff09;和高度#xff08;height#xff09;有多种方式#xff0c;涵盖固定值、相对值、响应式调整等。以下是完整的方法分类及示例#xff1a;一、固定宽度 / 高度类以 4px (0.25rem) 为单位递增…在 Tailwind CSS 中设定元素的宽度width和高度height有多种方式涵盖固定值、相对值、响应式调整等。以下是完整的方法分类及示例一、固定宽度 / 高度类以4px (0.25rem)为单位递增适用于精确控制!-- 宽度类 -- w-0 /* 宽度: 0 */ w-px /* 宽度: 1px */ w-1 /* 宽度: 0.25rem (4px) */ w-2 /* 宽度: 0.5rem (8px) */ w-3 /* 宽度: 0.75rem (12px) */ w-4 /* 宽度: 1rem (16px) */ w-5 /* 宽度: 1.25rem (20px) */ w-6 /* 宽度: 1.5rem (24px) */ w-8 /* 宽度: 2rem (32px) */ w-10 /* 宽度: 2.5rem (40px) */ w-12 /* 宽度: 3rem (48px) */ w-16 /* 宽度: 4rem (64px) */ w-20 /* 宽度: 5rem (80px) */ w-24 /* 宽度: 6rem (96px) */ w-32 /* 宽度: 8rem (128px) */ w-40 /* 宽度: 10rem (160px) */ w-48 /* 宽度: 12rem (192px) */ w-56 /* 宽度: 14rem (224px) */ w-64 /* 宽度: 16rem (256px) */ w-72 /* 宽度: 18rem (288px) */ w-80 /* 宽度: 20rem (320px) */ w-96 /* 宽度: 24rem (384px) */ !-- 高度类 -- h-0 /* 高度: 0 */ h-px /* 高度: 1px */ h-1 /* 高度: 0.25rem (4px) */ h-2 /* 高度: 0.5rem (8px) */ h-3 /* 高度: 0.75rem (12px) */ h-4 /* 高度: 1rem (16px) */ h-5 /* 高度: 1.25rem (20px) */ h-6 /* 高度: 1.5rem (24px) */ h-8 /* 高度: 2rem (32px) */ h-10 /* 高度: 2.5rem (40px) */ h-12 /* 高度: 3rem (48px) */ h-16 /* 高度: 4rem (64px) */ h-20 /* 高度: 5rem (80px) */ h-24 /* 高度: 6rem (96px) */ h-32 /* 高度: 8rem (128px) */ h-40 /* 高度: 10rem (160px) */ h-48 /* 高度: 12rem (192px) */ h-56 /* 高度: 14rem (224px) */ h-64 /* 高度: 16rem (256px) */ h-72 /* 高度: 18rem (288px) */ h-80 /* 高度: 20rem (320px) */ h-96 /* 高度: 24rem (384px) */二、相对宽度 / 高度类基于视口viewport、父元素或内容的百分比!-- 宽度类 -- w-auto /* 宽度由内容决定 */ w-full /* 100% 父元素宽度 */ w-screen /* 100% 视口宽度 */ w-min /* 最小内容宽度 */ w-max /* 最大内容宽度 */ w-fit /* 适应内容宽度 */ !-- 高度类 -- h-auto /* 高度由内容决定 */ h-full /* 100% 父元素高度 */ h-screen /* 100% 视口高度 */ h-min /* 最小内容高度 */ h-max /* 最大内容高度 */ h-fit /* 适应内容高度 */三、自定义宽度 / 高度使用方括号支持任意数值或单位!-- 自定义宽度 -- w-[120px] /* 宽度: 120px */ w-[50%] /* 宽度: 50% 父元素 */ w-[3.5rem] /* 宽度: 3.5rem (56px) */ w-[calc(100%-80px)] /* 父元素宽度减去80px */ !-- 自定义高度 -- h-[120px] /* 高度: 120px */ h-[50%] /* 高度: 50% 父元素 */ h-[3.5rem] /* 高度: 3.5rem (56px) */ h-[calc(100vh-80px)] /* 视口高度减去80px */四、最小 / 最大宽度 / 高度类限制元素的最小或最大尺寸!-- 最小宽度 -- min-w-0 /* 最小宽度: 0 */ min-w-full /* 最小宽度: 100% 父元素 */ min-w-[200px] /* 最小宽度: 200px */ !-- 最大宽度 -- max-w-0 /* 最大宽度: 0 */ max-w-none /* 无最大宽度限制 */ max-w-xs /* 最大宽度: 20rem (320px) */ max-w-sm /* 最大宽度: 24rem (384px) */ max-w-md /* 最大宽度: 28rem (448px) */ max-w-lg /* 最大宽度: 32rem (512px) */ max-w-xl /* 最大宽度: 36rem (576px) */ max-w-2xl /* 最大宽度: 42rem (672px) */ max-w-3xl /* 最大宽度: 48rem (768px) */ max-w-4xl /* 最大宽度: 56rem (896px) */ max-w-5xl /* 最大宽度: 64rem (1024px) */ max-w-6xl /* 最大宽度: 72rem (1152px) */ max-w-7xl /* 最大宽度: 80rem (1280px) */ max-w-full /* 最大宽度: 100% 父元素 */ max-w-prose /* 最大宽度: 65ch (适合阅读的宽度) */ max-w-[300px] /* 最大宽度: 300px */ !-- 最小高度 -- min-h-0 /* 最小高度: 0 */ min-h-full /* 最小高度: 100% 父元素 */ min-h-screen /* 最小高度: 100% 视口 */ min-h-[200px] /* 最小高度: 200px */ !-- 最大高度 -- max-h-0 /* 最大高度: 0 */ max-h-full /* 最大高度: 100% 父元素 */ max-h-screen /* 最大高度: 100% 视口 */ max-h-[300px] /* 最大高度: 300px */ max-h-min /* 最大高度为内容最小高度 */ max-h-max /* 最大高度为内容最大高度 */ max-h-fit /* 最大高度适应内容 */五、响应式变体通过前缀如md:w-32在特定屏幕尺寸应用宽度 / 高度类div classw-16 md:w-32 lg:w-48 !-- 在小屏幕宽度为64px中屏幕为128px大屏幕为192px -- /div div classh-16 md:h-32 lg:h-auto !-- 在小屏幕高度为64px中屏幕为128px大屏幕自适应内容 -- /div六、交互状态变体结合hover:,focus:,active:等前缀实现动态尺寸变化div classw-16 hover:w-20 transition-all !-- 悬停时宽度从64px变为80px -- /div button classh-10 focus:h-12 !-- 聚焦时高度从40px变为48px -- /button七、常见组合示例!-- 固定尺寸卡片 -- div classw-64 h-40 bg-blue-100固定宽高/div !-- 响应式布局 -- div classw-full md:w-1/2 lg:w-1/3 !-- 在小屏幕占满宽度中屏幕占1/2大屏幕占1/3 -- /div !-- 自适应高度容器最大为视口一半 -- div classmin-h-[100px] max-h-[50vh] overflow-auto内容区/div !-- 图片容器保持宽高比 -- div classw-48 h-32 aspect-video bg-gray-200 !-- 宽高比为16:9的容器 -- /div八、注意事项默认配置Tailwind 提供的尺寸类基于默认主题配置可通过tailwind.config.js自定义。与 Flex/Grid 结合使用w-full/h-full可让子元素填满父容器的宽 / 高。性能提示优先使用预定义类如w-32而非自定义值如w-[128px]以利用 CSS 类复用。宽高比使用aspect-*类如aspect-video可轻松设置元素的宽高比。通过组合这些类可以灵活控制元素在不同场景下的尺寸表现。