【CSS】CSS 常用单位

大小单位

  • 大小单位:px
  • 字体相对单位:emrem;根据 [font-size] 进行计算。
  • 视窗相对单位:vmvhvmaxvmin;根据 [视窗大小] 进行计算。

em、rem

  • em:相对于元素本身的 font-size 值。如果元素本身没有设置 font-size,会继承父元素的 font-size
  • rem:相对于根元素(html 元素)的 font-size 值。

假如一个元素的 font-size 值为 20px,则 1.5em 为 30px。


vw、vh、vmax、vmin

  • vw:视窗宽度的百分比。
  • vh:视窗高度的百分比。
  • vmax:vh 和 vw 中的较大值。
  • vmin:vh 和 vw 中的较小值。

假如一个浏览器的高度是 800px,宽度为 1200px:
那么 1vh 的值就是 8px、 1vw 的值就是 12px、 1vmin 就是 8px,1vmax 就是 12px。



时间单位

  • CSS 中的时间单位有 2 个:sms
  • 1s = 1000ms
  • 时间单位主要用于动画的设置,用于定义持续时间或延迟时间:
div {
    transition-duration: 2.5s;
}



角度单位

  • CSS 中的角度单位有 4 个:deggradradturn
  • 当旋转值为正值时,元素会顺时针旋转;当旋转值为负值时,元素会逆时针旋转。
  • 角度单位一般用于设置元素的旋转,包括 2D 旋转、3D 旋转。也可以用于设置线性渐变的方向:
background: linear-gradient(45deg, #000, #fff);

deg

  • deg (Degress),表示度。
  • 一个圆总共 360 度。
transform: rotate(2deg);

grad

  • grad (Gradient),表示梯度。
  • 一个圆总共 400 梯度。
transform: rotate(2grad);

rad

  • rad (Radians),表示弧度。
  • 一个圆总共 2π 弧度(即 2 * Math.PI 弧度)。
transform: rotate(90rad);

turn

  • turn (Turns),表示圈。
  • 一个圆总共一圈。
transform: rotate(0.5turn);



百分比单位

  • 不同属性使用 % 的效果可能会不一样。

标准盒模型中的百分比

  • width:根据 [包含块] 的 width 进行计算。
  • height:根据 [包含块] 的 height 进行计算。
  • paddingmargin:根据 [包含块] 的 width 进行计算。
  • border 不接受百分比作为单位的。
<div class="parent">
    <div class="son">testdiv>
div>
div.parent {
    width: 1000px;
    height: 500px;
    background-color: #ccc;
    overflow: hidden;
}

div.son {
    width: 10%;
    height: 10%;
    background-color: #999;
    margin: 10%;
    padding: 10%;
}

文本中的百分比

  • font-size:根据父元素的 font-size 进行计算。
  • line-height:根据当前元素的 font-size 进行计算。
  • vertical-align:根据当前元素的 line-height 进行计算。
  • text-indent:如果是水平的,则根据当前元素的 width 进行计算;如果是垂直的,则根据 height 进行计算。

定位中的百分比

rightleft / topbottom 都是根据 [包含块] 的 width / height


变换中的百分比

CSS 中的 transform 属性中的 translatetransform-origin 值也可以设置百分比:

  • translateX() 根据容器的 width 计算。
  • translateY() 根据容器的 height 计算。
  • transform-origin 中横坐标根据容器的 width 计算;纵坐标根据容器的 height 计算。

注意,translate 还有一个控制 z 轴的函数 translateZ()。它是不接受百分比作为单位的。


你可能感兴趣的:(CSS,笔记,css,前端)