4.css度量单位

  在 CSS 长度设置中,我们经常需要使用到度量单位,即以什么样的单位设计我们的字 体或边框长度。而在 CSS 中长度单位又分为绝对长度和相对长度。

  绝对长度指的是现实世界的度量单位,CSS 支持五种绝对长度单位。


绝对长度单位

单位标识符说明
in英寸
cm厘米
mm毫米
pt
pcpica

 


 

  相对长度指的是依托其他类型的单位,也是五种。

相对长度单位

 

单位标识符说明
em与元素字号挂钩
ex与元素字体的“x 高度”挂钩
rem与根元素的字号挂钩
px像素,与分辨率挂钩
%相对另一值的百分比

 


 

  下面我们使用一些常用的单位作为演示,而不做演示的基本用不到了。

  1.em 相对单位

p {
    margin: 0; 
    padding: 0; 
    background: silver; 
    font-size: 15px; 
    height: 2em;
} 

  解释:em 是相对单位,与字号大小挂钩,会根据字体大小改变自己的大小,灵活性很高。


 

  2.px 相对单位,绝对特性

p {
    margin: 0; 
    padding: 0;
    background: silver;
    font-size: 15px; 
    height: 55px;
} 

  解释:虽然 px 也是相对单位,但由于和分辨率挂钩,导致他其实就变成一个绝对单位了,自然灵活性没有 em 高,但是使用难度较低,且大量的开发者习惯性使用它。


  3.%百分比

p {
    margin: 0;
    padding: 0;
    background: silver;
    font-size: 200%; 
    width: 50%;
} 

  解释:长度比较好理解,就是挂钩它所在区块的宽度。而 font-size 则是继承到的原始大小的百分比。

 

转载于:https://www.cnblogs.com/scolia/p/5516030.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值