常用单位"/>
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中的常用单位
发布评论