css-15. css单位

桌面浏览器

浏览器窗口、视口等相关概念

视口：包括滚动条

html根元素：视口可以看成html元素的父容器，默认情况下，html的宽度等于视口的宽度

CSS单位

• %：相当于父容器宽高的百分比
• px：像素单位
• in：英寸单位
• cm
• mm
• pt
• pc
• em：取决于容器的字体大小，1em=容器.font-size
• rem：取决于根元素html的字体大小，1rem=html.font-size
• ex：取决于x字母的高度，1ex=x-height
• vw：取决于视口宽度，1vw=视口宽度的1%
• vh：取决于视口高度，1vh=视口高度的1%
• vmin：取vw和vh的较小值
• vmax：取vw和vh的较大值

百分比

• width：正常文档流和设置浮动情况下，相对于父级元素content-box的宽度。绝对定位情况下，相对于父级元素padding-box的宽度
• height：
• margin、padding：正常文档流和设置浮动情况下，相对于父级元素content-box的宽度。绝对定位情况下，相对于父级元素的padding-box的宽度（水平方向和垂直方向都是相对于宽度）
• 定位元素的left/right/top/bottom：相对于包含块的padding-box的宽度计算（水平方向和垂直方向都是相对于宽度）

参考