首页 > Web开发 > 详细

CSS中的长度单位

时间:2019-07-10 19:21:37      阅读:138      评论:0      收藏:0      [点我收藏+]

在CSS中存在众多的长度单位,它们又有什么意思与用途呢?

在CSS中,长度单位分为两种,绝对长度与相对长度

绝对长度:px,cm,in,mm,pt,px,px

相对长度:%,em,rem,vh,vw,vmin,vmax

绝对长度

px:即像素pixel,它是最基础也是最常用的一个长度单位

cm:即厘米,  1cm=37.8px

mm:即毫米,1mm=3.78px

in:即英尺inch, 1in=2.54cm=96px

pt:即点point,1pt=1/72in=1.33px

pc:即派卡,1pc=12pt=16px,派卡是印刷行业的长度单位

相对长度

em:一个字符大小,字符大小在浏览器中默认为16px

rem:相对于根元素HTML的字体大小,我们将HTML字体大小设置为100px,则可以更为方便的计算

%:百分比是一个相对长度单位,相对于包含块(containing block)的高宽或字体大小

关于包含块(containing block)的概念,不能简单地理解成是父元素。
如果是静态定位和相对定位,包含块一般就是其父元素。
如果是绝对定位的元素,包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素,它的包含块是视口(viewport)

vh:视口高度,默认为视口高度的1%

vw:视口宽度,默认为视口宽度的1%

vmin:布局视口高度和宽度之中值较小的那个的 1/100

vmax:布局视口高度和宽度之中值较大的那个的 1/100

关于使用%时,如何确定其相对于谁可参考以下文章:https://www.cnblogs.com/jesse131/p/9079219.html

 

CSS中的长度单位

原文:https://www.cnblogs.com/ffyd-0511/p/11165848.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!