网站SEO优化教程|技术分享|源码分享

本博客文章均是作者原创,记录码砖的点点滴滴,不介意搬砖,希望大家转载注明出处,感谢ing……




px、em、rem、%、vw、vh、vm等CSS尺寸单位详解


 2020-09-07 20:36:32  浏览量:(75)   标签: CSS尺寸单位 




1、px就是pixel的缩写,意为像素;px就是设备或者图片最小的一个点,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。

是我们网页设计常用的单位,也是基本单位。通过px可以设置固定的布局或者元素大小,缺点是没有弹性。

2、参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

特点是1. em的值并不是固定的; 2. em会继承父级元素的字体大小。

3、rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个参考值,可以设计HTML为大小为10px,到时设置1.2rem就是12px.以此类推。

优点是,只需要设置根目录的大小就可以把整个页面的成比例的调好。

4、%一般来说就是相对于父元素的,对于普通定位元素就是我们理解的父元素,对于position: absolute;的元素是相对于已定位的父元素 ,对于position: fixed;的元素是相对于ViewPort(可视窗口)。

5、vw

css3新单位,view width的简写,是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px

举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

6、vh

css3新单位,view height的简写,是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px

举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。

7、vm

css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。



如文章内容失效请联系作者更新,感谢ing,如有任何疑问点击网站提问按钮;

本文由【日韩赶SEO】原创,转载请注明出处,违者必究:http://4asport.com/post/98.html

提问 刷新 ^

友情链接:A5源码

Copyright ?2019 【日韩赶SEO】京ICP备25252500号