- ex 相对于小写字母x的高度
- ch 相对于数字 0 的宽度
利用宽度 ch 刚好是一个字母的宽度实现 打字效果(宽度等比增长)demo
- vw 相对于视窗的 宽度:视窗宽度100vw「window.innerWidth」
- vh 相对于视窗的 高度:视窗高度是 100vh「window.innerHeight」
实用的实体单位
& emsp; 相当于 em 的宽度
& ensp; 相当于 1/2 em 的宽度
使用场景
当我们需要给文字增加间隙的时候,可能会使用 last-letter
,但是他会使最后一个字符后面也有间距
所以可以使用
string.split('').join(' ')
利用 & emsp; 实现的对齐效果 一个 Demo
padding 百分比
padding-top、padding-bottom 如果设置为百分比,是相对于父元素的宽度来计算的 实现一个图片按比例缩放demo
height:100% 和 height:inherit 的异同
如果 height:inherit 是继承父元素的高度,那么和 height:100% 不是没有什么区别么?
一般情况他们二者没有区别,区别在于元素为「绝对定位」时
绝对定位元素的 height:inherit 是相对于父元素计算;而 height:100% 相对于定位基准元素计算