CSS单位

本文最后更新于:2019年12月12日 下午

Css单位

一. px - 像素

1.像素单位 pixel的缩写;
2.通过px可以设置固定的布局或者元素大小,缺点是没有弹性;
3.相对于屏幕分辨率。px就是设备或者图片最小的一个点,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点;

二. % - 百分比

1.百分比单位是想对于父元素的定义;
2.其中又分为各种不同的比较对象:相对于父级容器的宽和高;相对于自己的宽和高;相对于父级font-size的大小;相对于自己的font-size大小;相对于行高的比较;
🌰:transform: translate()--自身的宽高百分比

三. em - 相比父元素大小

相对父元素的font-size,em是根据父元素设置的字体大小来设置,具有继承的特点。可在body中设置{font-size: xxpx}
🌰:子元素字体大小的em是相对于父元素字体大小;元素的width/height/padding/margin用em的话是相对于该元素的font-size

四. rem - 相比根元素(html)大小

CSS3新增的一个相对单位,但相对的只是根元素-html。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。我们通常设置html的fontsize为100px , 这时 1rem = 100px , 更为方便计算;默认 1rem = 16px。

五.vw/vh - 可视大小,视窗单位

首先需要主要的是vw宽度会宽于html,body的宽度,vw包括了右侧浏览器滚动条的的宽度。相对于视口的高度和宽度, 1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度 比如:浏览器宽度为375px 高度667px, 1vw = 375px/100 = 3.75 px,1 vh = 667px/100 = 6.67 px, 很容易实现与同屏幕等高的框。

vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,
但是设置height:100vh,该元素会被撑开屏幕高度一致。