继续学习windicss ,因为第一次接触前端,总感觉没有找到核心点,所以问其他的前端同事的一些点。 希望能快点上道
1、元素的大小单位有哪些
-
像素(px):像素是最常用的单位之一,用来指定元素的具体尺寸。
-
百分比(%):百分数是相对于父元素的尺寸而言的,可以用来指定元素的大小。
-
em(em):em是一种相对单位,它是相对于父元素的字体大小而言的,可以用来指定元素的大小。
-
rem(rem):rem是相对于根元素(即html元素)的字体大小而言的,可以用来指定元素的大小。
-
vw和vh:Viewport width(vw)和Viewport height(vh)是相对于视口宽度和高度的,可以用来指定元素的大小。
-
vmin和vmax:Viewport minimum(vmin)和Viewport maximum(vmax)是相对于视口宽度和高度的最小值和最大值的,可以用来指定元素的大小。
除此之外,还有一些相对单位和绝对单位,如cm、mm、in、pt等等,但是在web开发过程中使用并不常见。掌握以上常见单位即可满足大部分需求。
2、怎么控制元素的大小
-
w-{size}
:设置元素的宽度,其中{size}
可以是一个预定义的宽度,如w-12
表示宽度为12rem,或者是自定义的宽度,如w-2/3
表示宽度为父元素宽度的2/3。 -
h-{size}
:设置元素的高度,用法和w-{size}
相同。 -
min-w-{size}
和min-h-{size}
:设置元素的最小宽度和最小高度。 -
max-w-{size}
和max-h-{size}
:设置元素的最大宽度和最大高度。 -
w-auto
和h-auto
:设置元素宽度或高度自动计算,常用于图片等元素。 -
w-full
和h-full
:设置元素的宽度和高度为父元素的100%。 -
object-{size}
:设置元素的宽度和高度,同时保持宽高比。其中{size}
可以是预定义的大小,如object-cover
,表示元素保持宽高比并覆盖容器。也可以是自定义的宽高比,如object-{width}:{height}
。
总之,Windi CSS提供了丰富的Utility类,可以很方便地控制元素的大小。如果需要更为精确的控制,也可以使用CSS属性和选择器来定义样式。