码迷,mamicode.com
首页 > Web开发 > 详细

CSS3几种新的长度单位

时间:2017-02-03 11:00:31      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:最大值   内容   产生   范围   不能   相等   可见   dom   字体大小   

参考文章:http://www.webhek.com/7-new-css-units

标记说明:

数字上标为有疑惑的地方

尽量做到在专有名字后面给出英文翻译,因为官方的文档基本上是英文的,经过各个读者的翻译后可能有所区别而产生歧义。

 

概述:

em:相对于当前对象内文本的字体大小。相对于父节点的字体大小

rem:相对于根元素<html>的字体大小。应用场景:以文字内容决定布局的。

vh和vv:1vh等于1/100的视口高度,1vw等于1/100的视口宽度。

vmin和vmax:关于视口高度和宽度的最小值或最大值,vmin等于1/100的视口宽高中的最小值。应用场景:让一个元素始终在屏幕中可见。

ch:数字0的宽度

ex:当前字体的小写x字母的的高度或者1/2的1em。应用场景:上实上标和下标

 

提取到的信息:

1、font-size:若没有声明则会继承父节点的属性

 

引申:

①window, document,body宽高:

body高度是body元素的高度(包括边框滚动条等),四周默认带有8px的margin

若没给html设置颜色,给body设置了颜色,则body的颜色填充整个背景

视口viewport指的是浏览器可视范围,除去边框,滚动条,工具栏的文档显示区域

②0.5em怎么可能和1ex相等?

实际测试后发现设置0.5em与1ex的表现略有区别。毕竟小写x字母不一等是字体大小font-size的一半。当然不能排除有种字体刚好满足这个条件

relative:会在应有的位置上进行偏移。dom的原位置保留

CSS3几种新的长度单位

标签:最大值   内容   产生   范围   不能   相等   可见   dom   字体大小   

原文地址:http://www.cnblogs.com/cack/p/6250196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!