windicss 布局技巧

316 阅读2分钟

继续学习windicss ,因为第一次接触前端,总感觉没有找到核心点,所以问其他的前端同事的一些点。 希望能快点上道

1、元素的大小单位有哪些

  1. 像素(px):像素是最常用的单位之一,用来指定元素的具体尺寸。

  2. 百分比(%):百分数是相对于父元素的尺寸而言的,可以用来指定元素的大小。

  3. em(em):em是一种相对单位,它是相对于父元素的字体大小而言的,可以用来指定元素的大小。

  4. rem(rem):rem是相对于根元素(即html元素)的字体大小而言的,可以用来指定元素的大小。

  5. vw和vh:Viewport width(vw)和Viewport height(vh)是相对于视口宽度和高度的,可以用来指定元素的大小。

  6. vmin和vmax:Viewport minimum(vmin)和Viewport maximum(vmax)是相对于视口宽度和高度的最小值和最大值的,可以用来指定元素的大小。

除此之外,还有一些相对单位和绝对单位,如cm、mm、in、pt等等,但是在web开发过程中使用并不常见。掌握以上常见单位即可满足大部分需求。

2、怎么控制元素的大小

  1. w-{size}:设置元素的宽度,其中{size}可以是一个预定义的宽度,如w-12表示宽度为12rem,或者是自定义的宽度,如w-2/3表示宽度为父元素宽度的2/3。

  2. h-{size}:设置元素的高度,用法和w-{size}相同。

  3. min-w-{size}min-h-{size}:设置元素的最小宽度和最小高度。

  4. max-w-{size}max-h-{size}:设置元素的最大宽度和最大高度。

  5. w-autoh-auto:设置元素宽度或高度自动计算,常用于图片等元素。

  6. w-fullh-full:设置元素的宽度和高度为父元素的100%。

  7. object-{size}:设置元素的宽度和高度,同时保持宽高比。其中{size}可以是预定义的大小,如object-cover,表示元素保持宽高比并覆盖容器。也可以是自定义的宽高比,如object-{width}:{height}

总之,Windi CSS提供了丰富的Utility类,可以很方便地控制元素的大小。如果需要更为精确的控制,也可以使用CSS属性和选择器来定义样式。