CSS知识点总结(二)单位
2016-09-25 16:49
225 查看
一、长度单位
绝对长度单位in(英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica),在网页的设计中很少用到。
pt是绝对单位,标准印刷上常用的单位,在文字排版工具(word,abobe)中是非常有用的字体单位。不管显示器的分辨率是多少,打印在纸面上的结果是一样的。
相对长度单位是使用最多的长度单位。包括em、rem、ex、px
px就是通常所说的像素,使网页设计中使用最多的长度单位。将显示器分成非常细小的方格,每个方格就是一个像素。表面上看好像很容易理解,实际上,px的具体大小是受到屏幕的分辨率影响的,也就是和划分屏幕各自的方式有关。例如,同样是100px大小的字体,如果显示器使用800×600像素的分辨率,那么,每个字的宽度是屏幕的1/8。若将显示器的分辨率设置为1024×768像素,那么同样是100px字体的字,其宽度就越为屏幕宽度的1/10。
ex 相对于字符“x”的高度。通常为字体高度的一半。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
EM特点 :em的值并不是固定的;em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
绝对长度单位in(英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica),在网页的设计中很少用到。
pt是绝对单位,标准印刷上常用的单位,在文字排版工具(word,abobe)中是非常有用的字体单位。不管显示器的分辨率是多少,打印在纸面上的结果是一样的。
相对长度单位是使用最多的长度单位。包括em、rem、ex、px
px就是通常所说的像素,使网页设计中使用最多的长度单位。将显示器分成非常细小的方格,每个方格就是一个像素。表面上看好像很容易理解,实际上,px的具体大小是受到屏幕的分辨率影响的,也就是和划分屏幕各自的方式有关。例如,同样是100px大小的字体,如果显示器使用800×600像素的分辨率,那么,每个字的宽度是屏幕的1/8。若将显示器的分辨率设置为1024×768像素,那么同样是100px字体的字,其宽度就越为屏幕宽度的1/10。
ex 相对于字符“x”的高度。通常为字体高度的一半。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
EM特点 :em的值并不是固定的;em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
相关文章推荐
- CSS基础语法和CSS经常用到的知识点总结
- CSS知识点总结
- CSS易混淆知识点总结与分享-定位与布局
- Android知识点总结: setTextSize 与 getTextSize的单位各是什么
- 前端笔试面试中的常用知识点总结(CSS)
- CSS学习总结1:绝对大小与相对大小的单位
- 16、响应式布局和BootStrap 全局CSS样式知识点总结-part3
- CSS知识点小总结
- CSS中Font的一些基本知识点归纳总结
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
- Codecademy上的HTML/CSS课程知识点总结(一)
- CSS基础语法和CSS经常用到的知识点总结
- html+css知识点总结
- CSS对字体单位的总结
- 总结w3c的css知识点
- 网页编程基础第二章知识点总结——HTML&CSS快速入门
- CSS知识点总结
- 史上最全的HTML、CSS知识点总结,浅显易懂。
- html+css2次学习-----常用知识点总结
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2