序言
长度单位可以总体的分为绝对长度单位和相对长度单位。CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率。本篇文章试图整理在前端开发中用到的CSS单位和其应用场景。
px——像素
px是pixel缩写,是基于像素的单位。在浏览网页过程中,屏幕上的文字、图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10。所以如果在定义字体大小时,使用px作为单位,那一旦用户改变显示器分辨率从800到1024,用户实际看到的文字就要变“小”(自然长度单位),甚至会看不清,影响浏览。
pt——磅
pt就是point,是印刷行业常用单位,等于1/72英寸。pt全称为point,但中文不叫“点”,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸,是一个绝对长度单位。
em——相对父元素
em单位是指其正在使用的字体大小。在一个页面上给定一个父元素的字体大小,这样就可以通过调整一个元素来成比例的改变所有元素大小.它可以*缩放,比如用来制作可伸缩的样式表。
此处有一个关于【继承】的点需要注意:使用em设定宽高行高等属性的元素,其子元素继承的并不是em,而是其计算之后的值,这一点与使用百分号相同。而不添加单位,其子元素则继承的是百分比,子元素会根据其自身的字号计算得出对应属性值。具体看下面例子:
<div style="line-height:1.5em;font-size:16px;background-color:yellow;">父元素内容
<div style="font-size:40px;background-color:red">
Web前端开发
</div>
</div>
当使用em时,最外层父元素的行高是1.5*16px=24px,同时其子元素继承了该line-height,效果图如下:
可以看出由于40px>24px,所以字体“溢出”了。而当不添加单位时:
<div style="line-height:1.5;font-size:16px;background-color:yellow;">父元素内容
<div style="font-size:40px;background-color:red">
Web前端开发
</div>
</div>
效果如下:
其行高会跟随自身字号进行计算,继承的只是“比例"。
rem——相对根元素
html{
font-size: 62.5%; /*10÷16*/
}
h1{
line-height: 24px;
line-height: 2.4rem;
}
IE9+ 和现代浏览器都已经支持了。
rem非常适合做web app的开发,其在web app中的具体应用请参见:
萌の宇 – mobile H5布局大全-rem flexbox详解
Flexbox——快速布局神器_flexbox, CSS3, layout 教程_w3cplus
vw和vh——相对浏览器窗口
vh
等于viewport高度的1/100
。例如,如果浏览器的高是900px
,1vh
求得的值为9px
。同理,如果显示窗口宽度为750px
,1vw
求得的值为7.5px
。当我们想设置跟随视口变化的字体,或是填满整个屏幕的div时,这个单位是非常有用的。
IE10+ 和现代浏览器都支持这两个单位。
vmin 和 vmax
vh
和vm
总是与视口的高度和宽度有关,与之不同的,vmin
和vmax
是与这次宽度和高度的最大值或最小值有关,取决于哪个更大和更小。例如,如果浏览器设置为1100px
宽、700px
高,1vmin
会是7px
,1vmax
为11px
。然而,如果宽度设置为800px
,高度设置为1080px
,1vmin
将会等于8px
而1vmax
将会是10.8px
。
IE10+ 和现代浏览器都已经支持vmin,webkit浏览器之前不支持vmax,现在已经支持,所有现代浏览器已经支持,但是IE全部不支持vmax。
ex 和 ch
ex
和ch的
单位长度,依赖于特殊字符:
-
ch
字符0
的宽度 -
ex
小写字符x
的高度
当font-family
改变的时候这两个单位的值也会变化,不同字体表现的样式不一样。IE9+ 和现代浏览器都已经支持。
CSS长度单位详解的更多相关文章
-
CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
-
css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
-
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
-
带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...
-
此博客使用的CSS样式详解!
此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...
-
CSS中详解hight属性
目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...
-
转:CSS圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...
-
UI自动化测试(二)浏览器操作及对元素的定位方法(xpath定位和css定位详解)
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
-
CSS中详解height属性
目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...
随机推荐
-
修復jquery的tablesorter对加了千分位的数字无法正确排序的bug
找到函数: function getElementText(config, node) { var text = ""; if (!node) return "" ...
-
如何把car中的模块导入adams/view中
在你的adams安装目录下的acar文件夹下找到acar.cfg文件,将里面的 MDI_ACAR_PLUS_AVIEW 后面的no改成yes,在car中的tool下面就可以找到进入view环境的命令了 ...
-
关于python3 OpenCV的安装和配置
开发环境,win7 32bit, Anaconda3.之前尝试pip安装,但是总是不成功.后来,交流群里面废帝大神让我用conda安装,之后按照conda install --channel http ...
-
cocos2d-x 3.2读取xml和json练习
读取和生成xml文件: #include "tinyxml2/tinyxml2.h" using namespace tinyxml2; void HelloWorld::make ...
-
页面动态加载js文件
function loadJS(url, onload) { var domscript = document.createElement('script'); domscript.src = url ...
-
lnmp架构(第一篇)
lnmp 架构 第一篇 nginx 源码安装 nginx的安装包:nginx-1.12.0.tar.gz 建议安装前的修改: 在nginx的解压包中修改文件nginx-1.12.0/src/core/ ...
-
39. Combination Sum(medium, backtrack 的经典应用, 重要)
Given a set of candidate numbers (C) (without duplicates) and a target number (T), find all unique c ...
-
Java开源生鲜电商平台-用户表的设计(源码可下载)
Java开源生鲜电商平台-用户表的设计(源码可下载) 说明:由于该系统属于B2B平台,不设计到B2C的架构. 角色分析:买家与卖家. 由于买家与卖家所填写的资料都不一样,需要建立两站表进行维护,比如: ...
-
导出excel记录
前言: 记录这篇使用记录,是为了方便以后学习查阅和让没有使用过的人了解一下,其中不足还请见谅.不是很全的文章,大神请绕行. 在项目中我们或多或少的会遇到数据导出到excel表格以便线下查看或者记录一些 ...
-
Mybatis配置信息浅析 MyBatis简介(二)
官方文档入门篇中有明确说明 每个基于 MyBatis 的应用都是以一个 SqlSessionFactory 的实例为中心的. SqlSessionFactory 的实例可以通过 SqlSessionF ...