4.css度量单位
在 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度量单位的更多相关文章
- CSS(1)基础语法、常见属性
CSS CSS:层叠样式表.主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS语法:CSS实例由选择器,以及一条 ...
- 转载:Chrome调试折腾记_(1)调试控制中心快捷键详解!!!
转载:http://blog.csdn.net/crper/article/details/48098625 大多浏览器的调试功能的启用快捷键都一致…按下F12;还是熟悉的味道; 或者直接 Ctrl ...
- Chrome调试折腾记_(1)调试控制中心快捷键详解!!!
转载:http://blog.csdn.net/crper/article/details/48098625 大多浏览器的调试功能的启用快捷键都一致-按下F12;还是熟悉的味道; 或者直接 Ctrl ...
- CSS3:元素的边框、背景和大小
边框 和边框相关的属性例如以下. border-width 用于设置边框的宽度,可选择包含: 1)<长度值>:将边框宽度设为以CSS度量单位(如em.px.cm)表达的长度值. 2)< ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 第 14 章 CSS 颜色与度量单位
学习要点: 1.颜色表方案 2.度量单位 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等. 一.颜色表方案 颜色的表现形式主要有 ...
- 第七十一,CSS颜色与度量单位
CSS颜色与度量单位 学习要点: 1.颜色表方案 2.度量单位 本章主要探讨HTML5中CSS颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等. 一.颜色表方案 1 颜色的表现形式主 ...
- CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax
本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...
- css 中的度量单位
px 相对长度单位.像素(Pixel). 像素是相对于显示器屏幕分辨率而言的.譬如,WONDOWS的用户所使用的分辨率一般是96像素/英寸.而MAC的用户所使用的分辨率一般是72像素/英寸. em 相 ...
随机推荐
- RDD缓存策略
Spark支持将数据集放置在集群的缓存中,以便于数据重用. Spark缓存策略对应的类: class StorageLevel private( private var useDisk_ : Bool ...
- 简洁之美 -约瑟夫环的python 解法
问题描述: 约瑟夫环问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到k的那个人出列:他的下一个人又从1开始报数,数到k的那个人又出列:依此规律重复下 ...
- android 自定义组合控件 顶部导航栏
在软件开发过程中,经常见到,就是APP 的标题栏样式几乎都是一样的,只是文字不同而已,两边图标不同.为了减少重复代码,提高效率, 方便大家使用,我们把标题栏通过组合的方式定义成一个控件. 例下图: 点 ...
- 基于Web的企业网和互联网的信息和应用( 1194.22 )
基于Web的企业网和互联网的信息和应用( 1194.22 ) 原文更新日期: 2001年6月21日原文地址: http://www.access-board.gov/sec508/guide/1194 ...
- opencv_协方差矩阵与协方差讲解
统计学的基本概念 学过概率统计的孩子都知道,统计里最基本的概念就是样本的均值,方差,或者再加个标准差.首先我们给你一个含有n个样本的集合,依次给出这些概念的公式描述,这些高中学过数学的孩子都应该知道吧 ...
- 恶心的Oracle的if else if...
出处:http://blog.sina.com.cn/s/blog_407d47e60100d8ig.html 前段时间写Oracle存储过程就遇到问题.原来写成这样if 1=2 then null ...
- extjs gride 显示序号
在使用Extjs框架时,有时为了在信息列表中显示数据项的序号,这就要构造一些方法来显示序号,其方法有两种,具体如下: 1.方法一 对 Ext.grid.PageRowNumberer 进行扩展,详细代 ...
- 洛谷P1472 奶牛家谱 Cow Pedigrees
P1472 奶牛家谱 Cow Pedigrees 102通过 193提交 题目提供者该用户不存在 标签USACO 难度普及+/提高 提交 讨论 题解 最新讨论 暂时没有讨论 题目描述 农民约翰准备 ...
- Linq把一个DataTable根据一列去除重复数据
DataTable dt_temp = dt.AsEnumerable().Cast<DataRow>().GroupBy(p => p.Field<string>(&q ...
- codevs 1049 棋盘染色
题目描述 Description 有一个5×5的棋盘,上面有一些格子被染成了黑色,其他的格子都是白色,你的任务的对棋盘一些格子进行染色,使得所有的黑色格子能连成一块,并且你染色的格子数目要最少.读入一 ...