Python私教张大鹏 Vue3整合Tailwindcss之width样式类

基础样式

Class Properties
w-0 width: 0px;
w-px width: 1px;
w-0.5 width: 0.125rem; /* 2px */
w-1 width: 0.25rem; /* 4px */
w-1.5 width: 0.375rem; /* 6px */
w-2 width: 0.5rem; /* 8px */
w-2.5 width: 0.625rem; /* 10px */
w-3 width: 0.75rem; /* 12px */
w-3.5 width: 0.875rem; /* 14px */
w-4 width: 1rem; /* 16px */
w-5 width: 1.25rem; /* 20px */
w-6 width: 1.5rem; /* 24px */
w-7 width: 1.75rem; /* 28px */
w-8 width: 2rem; /* 32px */
w-9 width: 2.25rem; /* 36px */
w-10 width: 2.5rem; /* 40px */
w-11 width: 2.75rem; /* 44px */
w-12 width: 3rem; /* 48px */
w-14 width: 3.5rem; /* 56px */
w-16 width: 4rem; /* 64px */
w-20 width: 5rem; /* 80px */
w-24 width: 6rem; /* 96px */
w-28 width: 7rem; /* 112px */
w-32 width: 8rem; /* 128px */
w-36 width: 9rem; /* 144px */
w-40 width: 10rem; /* 160px */
w-44 width: 11rem; /* 176px */
w-48 width: 12rem; /* 192px */
w-52 width: 13rem; /* 208px */
w-56 width: 14rem; /* 224px */
w-60 width: 15rem; /* 240px */
w-64 width: 16rem; /* 256px */
w-72 width: 18rem; /* 288px */
w-80 width: 20rem; /* 320px */
w-96 width: 24rem; /* 384px */
w-auto width: auto;
w-1/2 width: 50%;
w-1/3 width: 33.333333%;
w-2/3 width: 66.666667%;
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: 80%;
w-1/6 width: 16.666667%;
w-2/6 width: 33.333333%;
w-3/6 width: 50%;
w-4/6 width: 66.666667%;
w-5/6 width: 83.333333%;
w-1/12 width: 8.333333%;
w-2/12 width: 16.666667%;
w-3/12 width: 25%;
w-4/12 width: 33.333333%;
w-5/12 width: 41.666667%;
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-svw width: 100svw;
w-lvw width: 100lvw;
w-dvw width: 100dvw;
w-min width: min-content;
w-max width: max-content;
w-fit width: fit-content;

基础样式总结

常用样式类:

  • w-full:宽度是百分百
  • w-screen:宽度是屏幕宽度

数字:

  • 1到12是连续的
  • 12到64是间隔4

百分比:2,3,4,5,6,12,支持百分比,比如1/3,1/6,1/12等。

案例:不同宽度的盒子

需求:创建一列,包含8个盒子,盒子的宽度从上到下越来越大,选择一种颜色,颜色也越来越深。

vue3示例:

html 复制代码
<script setup>
</script>
<template>
  <div class="flex flex-col bg-indigo-50 p-8 space-y-3">
    <div class="h-12 bg-teal-100 w-12"></div>
    <div class="h-12 bg-teal-200 w-20"></div>
    <div class="h-12 bg-teal-300 w-28"></div>
    <div class="h-12 bg-teal-400 w-36"></div>
    <div class="h-12 bg-teal-500 w-44"></div>
    <div class="h-12 bg-teal-600 w-52"></div>
    <div class="h-12 bg-teal-700 w-60"></div>
    <div class="h-12 bg-teal-800 w-72"></div>
  </div>
</template>

案例:百分比宽度

需求:已知宽度支持2,3,4,5,6,12这六种百分比的形式。编写六行两列的盒子,每一行都使用百分比的形式,让盒子按照百分比的形式占据整行宽度。

vue3示例:

html 复制代码
<script setup>
</script>
<template>
  <div class="flex flex-wrap p-8 bg-indigo-50 space-y-3 space-y-reverse">
    <div class="w-1/2 h-12 bg-teal-300 rounded"></div>
    <div class="w-1/2 h-12 bg-purple-300 rounded"></div>

    <div class="w-1/3 h-12 bg-teal-300 rounded"></div>
    <div class="w-2/3 h-12 bg-purple-300 rounded"></div>

    <div class="w-1/4 h-12 bg-teal-300 rounded"></div>
    <div class="w-3/4 h-12 bg-purple-300 rounded"></div>


    <div class="w-1/5 h-12 bg-teal-300 rounded"></div>
    <div class="w-4/5 h-12 bg-purple-300 rounded"></div>

    <div class="w-1/6 h-12 bg-teal-300 rounded"></div>
    <div class="w-5/6 h-12 bg-purple-300 rounded"></div>


    <div class="w-1/12 h-12 bg-teal-300 rounded"></div>
    <div class="w-11/12 h-12 bg-purple-300 rounded"></div>
  </div>
</template>

案例:屏幕宽高

需求:将整个屏幕可见的区域都设置成一种颜色。

vue3示例:

html 复制代码
<script setup>
</script>
<template>
  <div class="w-screen h-screen bg-teal-300">

  </div>
</template>
相关推荐
贩卖纯净水.33 分钟前
网站部署及CSS剩余模块
前端·css
Justinc.42 分钟前
CSS3_BFC(十二)
前端·css·css3
梅子酱~44 分钟前
Vue 学习随笔系列十七 -- 表格样式修改
javascript·vue.js·学习
刺客-Andy1 小时前
React第四节 组件的三大属性之state
前端·javascript·react.js
黄毛火烧雪下1 小时前
React 表单Form 中的 useWatch
前端·javascript·react.js
爱健身的小刘同学1 小时前
钉钉免登录接口
前端·javascript·钉钉
啵咿傲1 小时前
跨域相关的一些问题 ✅
前端
命运之光1 小时前
生日主题的烟花特效HTML,CSS,JS
前端·javascript·css
Cshaosun2 小时前
js版本之ES5特性简述【String、Function、JSON、其他】(二)
前端·javascript·es
__WanG2 小时前
Flutter将应用打包发布到App Store
前端·flutter·ios