网站前端制作之css长度单位
- 长度单位分绝对长度单位和相对长度单位。
- 绝对长度单位是一个固定的值,它反应一个真实的物理尺寸,绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。
- 而相对长度单位,你看相对二字就可以看出其长度单位他会有一个参考值,会随着它的参考值变化,是一种动态的长度单位,更适合适配不同场景应用。
- 常用的相对长度单位
- px(像素)
像素为影视显示的基本单位,译自英文 pixel,pix 是英文单词 picture 的常用缩写,加上英语单词 element 元素,就得到 pixel,故像素表示 “画像元素” 之意,有时又被称为 pel (picture element)。
通常说的显示分辨率,其实是桌面设定的分辨率(桌面分辨率)而不是显示屏最大可支持的分辨率(物理分辨率)。
列如有一个宽为 100px 的 div标签,在800x600分辨率下占显示面积的1/8,而在1980x1080分辨率下则占据1/19,这也是为什么说它是动态的主要原因。
简单来说,px会随着桌面分辨率的变大变小和改变,参考点就是桌面分辨率,在不同桌面分辨率下会显示出不同的效果。目前而已比较流行的还是1920x1080桌面分辨率。
- em(相对于父亲)
基于当前元素的 font-size 大小,如果没设置就是继承父元素的 font-size。
如果作用于 font-size 时,1em 就等于父元素的 font-size。
em 单位具有级联关系。
em 会随着 font-size 的大小改变而改变。
- rem (相对根元素)
默认情况下:1rem=16px,这是因为浏览器的默认字体大小为 16px,且标签的的字体大小不会被轻易修改。
- %(百分比)
- vw(viewpoint width ⇨ 视窗宽度)
一个单位是指视图宽度的 1%。
- vh(viewpoint height ⇨ 视窗高度)

以上就是速优网络和大家分享的"网站前端制作之css长度单位",非常感谢您有耐心的读完这篇文章,我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供:企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务,本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作,请扫码咨询,我们将诚挚为您服务。
TAG标签: