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

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


绝对长度单位

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

 


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

相对长度单位

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

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

  1.em 相对单位

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

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


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

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

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


  3.%百分比

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

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

4.css度量单位的更多相关文章

  1. CSS(1)基础语法、常见属性

    CSS CSS:层叠样式表.主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS语法:CSS实例由选择器,以及一条 ...

  2. 转载:Chrome调试折腾记_(1)调试控制中心快捷键详解!!!

    转载:http://blog.csdn.net/crper/article/details/48098625 大多浏览器的调试功能的启用快捷键都一致…按下F12;还是熟悉的味道;  或者直接 Ctrl ...

  3. Chrome调试折腾记_(1)调试控制中心快捷键详解!!!

    转载:http://blog.csdn.net/crper/article/details/48098625 大多浏览器的调试功能的启用快捷键都一致-按下F12;还是熟悉的味道;  或者直接 Ctrl ...

  4. CSS3:元素的边框、背景和大小

    边框 和边框相关的属性例如以下. border-width 用于设置边框的宽度,可选择包含: 1)<长度值>:将边框宽度设为以CSS度量单位(如em.px.cm)表达的长度值. 2)< ...

  5. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  6. 第 14 章 CSS 颜色与度量单位

    学习要点: 1.颜色表方案 2.度量单位 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等. 一.颜色表方案 颜色的表现形式主要有 ...

  7. 第七十一,CSS颜色与度量单位

    CSS颜色与度量单位 学习要点: 1.颜色表方案 2.度量单位 本章主要探讨HTML5中CSS颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等.   一.颜色表方案 1 颜色的表现形式主 ...

  8. CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax

    本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...

  9. css 中的度量单位

    px 相对长度单位.像素(Pixel). 像素是相对于显示器屏幕分辨率而言的.譬如,WONDOWS的用户所使用的分辨率一般是96像素/英寸.而MAC的用户所使用的分辨率一般是72像素/英寸. em 相 ...

随机推荐

  1. RDD缓存策略

    Spark支持将数据集放置在集群的缓存中,以便于数据重用. Spark缓存策略对应的类: class StorageLevel private( private var useDisk_ : Bool ...

  2. 简洁之美 -约瑟夫环的python 解法

    问题描述: 约瑟夫环问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到k的那个人出列:他的下一个人又从1开始报数,数到k的那个人又出列:依此规律重复下 ...

  3. android 自定义组合控件 顶部导航栏

    在软件开发过程中,经常见到,就是APP 的标题栏样式几乎都是一样的,只是文字不同而已,两边图标不同.为了减少重复代码,提高效率, 方便大家使用,我们把标题栏通过组合的方式定义成一个控件. 例下图: 点 ...

  4. 基于Web的企业网和互联网的信息和应用( 1194.22 )

    基于Web的企业网和互联网的信息和应用( 1194.22 ) 原文更新日期: 2001年6月21日原文地址: http://www.access-board.gov/sec508/guide/1194 ...

  5. opencv_协方差矩阵与协方差讲解

    统计学的基本概念 学过概率统计的孩子都知道,统计里最基本的概念就是样本的均值,方差,或者再加个标准差.首先我们给你一个含有n个样本的集合,依次给出这些概念的公式描述,这些高中学过数学的孩子都应该知道吧 ...

  6. 恶心的Oracle的if else if...

    出处:http://blog.sina.com.cn/s/blog_407d47e60100d8ig.html 前段时间写Oracle存储过程就遇到问题.原来写成这样if 1=2 then  null ...

  7. extjs gride 显示序号

    在使用Extjs框架时,有时为了在信息列表中显示数据项的序号,这就要构造一些方法来显示序号,其方法有两种,具体如下: 1.方法一 对 Ext.grid.PageRowNumberer 进行扩展,详细代 ...

  8. 洛谷P1472 奶牛家谱 Cow Pedigrees

    P1472 奶牛家谱 Cow Pedigrees 102通过 193提交 题目提供者该用户不存在 标签USACO 难度普及+/提高 提交  讨论  题解 最新讨论 暂时没有讨论 题目描述 农民约翰准备 ...

  9. Linq把一个DataTable根据一列去除重复数据

    DataTable dt_temp = dt.AsEnumerable().Cast<DataRow>().GroupBy(p => p.Field<string>(&q ...

  10. codevs 1049 棋盘染色

    题目描述 Description 有一个5×5的棋盘,上面有一些格子被染成了黑色,其他的格子都是白色,你的任务的对棋盘一些格子进行染色,使得所有的黑色格子能连成一块,并且你染色的格子数目要最少.读入一 ...