北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京web前端培训 web前端的各种长度单位

时间: 来源:火星人

今天我们来了解一下长度单位

我们平时一般使用的长度单位有px,em不常用的有pt,pc,ex,in,cm,mm等

长度单位的主要分为两个种类是,绝对长度和相对长度。

绝对长度的长度数值是固定的,比较死板。而相对长度的数值是随动的,比较灵活

先来介绍一下绝对长度:


px:像素 这是我们最常用的长度单位,提到绝对单位基本上就是它了。这是相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的。要理解这个属性要懂得一些关于显示器的知识。显示器显示的所有图像都是由像素点组成的,我们可以吧图片用PS打开然后放大到最大就会证明这一点。所以这里的px单位例如12px含义就是长度是十二个像素点。但是我们在电脑(pc端)和移动端使用的显示器像素的密集度是不一样的,换句话说,手机屏幕比电脑屏幕在相同面积有着更多的像素点,这也就造成了pc端与移动端的显示差异
pt:点/磅 主要用于需要打印的项目,等于1/72英寸。每pt约等于四分之三px,即4px=3pt
pc:派卡 相当于我国新四号铅字的尺寸,应该也是用于打印的属性。基本上没人用,连知道的人也不多

in:英寸/mm:毫米/cm:厘米 这三个属性都是各国常用的长度单位,用的也很少


然后是相对单位,这个比较少,但每个都很有用


em:字号 这个单位在国外很常见,是相对于对象自身字体大小的单位,即每1em等于一个字体大小。如果你设置font-size为14px,那么1em就等于14px,如果你没设置字体大小,他将继承父元素的字体大小。

ex:半字号 与em类似,也是根据字体大小计算,它的长度等于所用字体绘制出的 x 的高度

rem:基于html的字号 在长度计算上与em相同,但他是完全基于html的字号大小计算的,对象本身的字号大小不会影响他。如果你没有给html设置字号大小,那么他应该是14px,这根据不同浏览器的渲染可能会有所差异。这种单位在移动端很常见,因为它的计算方式对于响应式布局很有利,但是由于这是一个css3属性,ie8及以下的浏览器并不支持它

最后我认为%也能算是一种单位,这个单位很好理解,就是相对与父元素的百分比,要注意的是使用这个属性的时候最好要设置父元素的宽。高,否则可能会无效或混乱


关于长度单位的介绍大概就是这样了,以后我可能还会介绍基于rem的布局方式,这种布局方式最大化利用了rem的计算优势,能快速设置不同分辨率下的字体与页面尺寸

关键词:北京web前端培训,北京web前端,CSS学习,css前端,css培训

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号