HTML中的常用单位

常用单位"/>

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根元素；既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层 复合的连锁反应