HTML中的常用单位

单位分为绝对单位和相对单位

  • 绝对单位 是固定值 不可变
    绝对单位有: px、 cm、 mm、in
    px:是像素单位 也是常用单位
    cm:厘米
    mm:毫米
    in:英寸 ;(1英寸 = 2.54厘米)
  • 相对单位 可实现响应式布局,会随着屏幕尺寸变大或缩小(都是子元素相对父元素进行的)
    相对单位:%、rem、vw、vh、em、vnim、vaxm、clac()
    %:百分比在HTML中经常使用
    rem:相对于根元素字体的大小(HTML标签)经常用于移动端
    vw:视图窗口宽度1%
    vh:视图窗口高度1%
    em:相对父元素的字体大小,不过已经很少使用
    vnim:视口高度和宽度中较小的那个的1%
    vmax:视口高度和宽度中较大的那个的1%
    calc():用于动态计算长度的值,例如:width: calc(100% - 10px);

单位的换算

  • 相同点:
    都是长度单位
  • 异同点:
    px:(像素)的值是固定的,指定是多少就是多少,计算比较容易。
    em:值不是固定的(弹性布局),并且em会继承父级元素的字体大小。
    rem: 与em相同都是相对单位,只是他的相对仅仅针对html而言。
  • 各单位换算:
    em计算方法:1 ÷ 父元素的font-size × 需要转换的像素值 = em值
  • rem:
    换算方法与em相同
    与em的区别是它相对的只是HTML根元素;既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层 复合的连锁反应

你可能感兴趣的:(HTML中的常用单位)