关键词：
因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。
这就意味着有那么些个特别的货，虽然平常都不怎么会用上，但是一旦某个地方需要它们了，他们就真的是特么得合适不过来了呢。
今儿，我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位，类似pixel 和 em 这样的，但是很有可能你之前从来就没听过这些家伙们！就让我们一起来交个朋友吧~
1、rem
我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。
<body> <div class="test">
Test</div></body>
body { font-size: 14px;}div { font-size: 1.2em;
// calculated at 14px
* 1.2, or 16.8px}
你看，这里div这娃的字体大小是1.2em。解释来说，就是他从body爹爹那里继承的字体大小（这里是14px）的1.2倍，结果就是16.8px。
但是，如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢？在下面这一小段代码里我们应用了和上面一样一样的CSS，每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加。
<body> <div> Test
<!-- 14 * 1.2 = 16.8px --> <div>Test
<!-- 16.8 * 1.2 = 20.16px --> <div> Test
<!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div>
</body>
虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛，我们就可以使用 rem 了。 ‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是<html>元素了。
html {
font-size: 14px;}div {
font-size: 1.2rem;}
这样在上面的那三个嵌套的div娃们的字体大小都是 1.2*14px = 16.8px 了。
2、适用于网格布局
Rems 不仅仅只是在设置字体大小上很方便。再炒个栗子，你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位，然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性，
.container { width: 70rem;
// 70 * 14px = 980px}
概念上来说，这个方法的思想就是让你的界面根据你的内容进行缩放。但是，这样做并不是对所有的情况都有意义。
3、vh and vw
响应式Web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？ 这就是 vh 和 vw 单位为我们提供的。
1vh 等于1/100的视口高度。栗子：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度未750， 1vw = 750px/100 = 7.5 px。
可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。
.slide {
height: 100vh;}
假设你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vm，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果，有木有？！
4、vmin and vmax
vh和 vm 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。
如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。
那么问题来了，我们应该在什么场景下使用这两个单位呢？
假设有一个元素，你需要让它始终在屏幕上可见。
只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到了。再来个栗子，可以这样定义一个至少有两个边触摸到屏幕的方形：
.box {
height: 100vmin;
width: 100vmin;}
需要web前端学习资料的同学，加群434623999
javascript之粗浅原型和原型链(代码片段)
目录1、示例代码2、注解1、示例代码functionStudent(params) this.params=params;letstudent=newStudent('159357');console.log(student.__proto__===Student.prototype);//trueconsole.log(student.co 查看详情
javascript之继承（原型链）
JavaScript之继承（原型链） 我们知道继承是oo语言中不可缺少的一部分，对于JavaScript也是如此。一般的继承有两种方式：其一，接口继承，只继承方法的签名；其二，实现继承，继承实际的方法。JavaScript不支持签名，因此只... 查看详情
《javascript闯关记》之原型及原型链
原型链是一种机制，指的是JavaScript每个对象都有一个内置的__proto__属性指向创建它的构造函数的prototype（原型）属性。原型链的作用是为了实现对象的继承，要理解原型链，需要先从函数对象、constructor、new、prototype、__proto__这... 查看详情
javascript之继承（原型链）
我们知道继承是oo语言中不可缺少的一部分，对于JavaScript也是如此。一般的继承有两种方式：其一，接口继承，只继承方法的签名；其二，实现继承，继承实际的方法。JavaScript不支持签名，因此只有实现继承。其中实现继... 查看详情
javascript中的原型与原型链
一直对JavaScript的原型与继承不了解，参考《JavaScript权威指南(第六版)》和《JavaScript高级程序设计(第三版)》对这个点的知识做个整理，方便自己记忆。以下内容大部分摘录自这两本书每一个JavaScript对象都有与之相关的原型... 查看详情
javascript之彻底理解原型与原型链(代码片段)
1.前言原型与原型链知识历来都是面试中考察的重点，说难不算太难，但要完全理解还是得下一定的功夫。先来看一道面试题开开胃口吧：functionUser()User.prototype.sayHello=function()varu1=newUser();varu2=newUser();console.log... 查看详情
javascript之彻底理解原型与原型链(代码片段)
1.前言原型与原型链知识历来都是面试中考察的重点，说难不算太难，但要完全理解还是得下一定的功夫。先来看一道面试题开开胃口吧：functionUser()User.prototype.sayHello=function()varu1=newUser();varu2=newUser();console.log... 查看详情
javascript之彻底理解原型与原型链(代码片段)
1.前言原型与原型链知识历来都是面试中考察的重点，说难不算太难，但要完全理解还是得下一定的功夫。先来看一道面试题开开胃口吧：functionUser()User.prototype.sayHello=function()varu1=newUser();varu2=newUser();console.log... 查看详情
javascript之原型
原型对象：任意一个函数都有prototype属性，这个属性是一个指针，指向该函数对象，prototype属性内部包含了所有实例共享的属性和方法。所有的原型对象都有一个constructor属性，它是一个指针，指向prototype属性所在的函数。原型... 查看详情
javascript深入之从原型到原型链（转载）
构造函数创建对象我们先使用构造函数创建一个对象：functionPerson(){}varperson=newPerson();person.name=‘name‘;console.log(person.name)//name 在这个例子中，Person就是一个构造函数，我们使用new创建了一个实例对象person。很简单吧，接下来... 查看详情
原型和原型链
...对象都会从原型‘继承’属性 //2.__proto__是每一个javascript对象（除null外）都具有的一个属性，他会指向对象的原型（也叫实例原型） //3.实例对象和构造函数都可以指向原型，原型是否有属性指向构 查看详情
javascripte的原型链之基础讲解
一、函数对象与普通对象varo1={};varo2=newObject();varo3=newf1();functionf1(){};varf2=function(){};varf3=newFunction(‘str‘,‘console.log(str)‘);console.log(typeofObject);//functionconsole.log(typeofFunction);//func 查看详情
javascript中的原型和原型链
...prototype对象，用于表示类型之间的关系；原型链指的是在JavaScript中对象之间的继承是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。举例：Student——>Person... 查看详情
javascript原型和原型链
前言在了解原型和原型链之前，我们先了解一部分概念，constructor，prototype，proto。constructor在之前判断数据类型的文章:javaScript常见数据类型检查校验有提到过关于构造函数的属性constructorconstructor的是返回创建实例对象的 查看详情
javascript原型继承原型链(代码片段)
...形成三、例-求以下代码的输出总结前言部分理论参考《JavaScript权威指南》每一个对象都有与之相关的原型(prototype),原型是在实例创建之初就设定好的,作用是继承属性.使用new调用构造函数会自动创建一个新对象,因此构造函数本... 查看详情
javascript扩展原型链浅析
...简单的概念介绍和解析，本文将浅析一些原型链的扩展。javaScript原型和原型链http://lewyon.xyz/prototype.html扩展原型链使用new操作符利用原型是对象的特性，实例化对象的时候，继承多个构造函数的属性和方法兼容性：支持目前 查看详情
javascript面向对象编程高速构建继承关系之整合原型链
前面我们铺垫了非常多细节。是为了让大家更加明晰prototype的使用细节；如今能够将前面的知识整合起来，写一个函数用于高速构建基于原型链的继承关系了：functionextend(Child,Parent){ varF=function(){}; F.prototype=Parent.prototype; Child.proto... 查看详情
javascript之原型
[[Prototype]]JavaScript中的对象（函数也是对象）有一个特殊的[[Prototype]]内置属性，所谓的原型链就是由它“链”起来的。属性查找当引用对象的属性时会触发[[Get]]操作，可以理解为会执行[[Get]]()，其逻辑是先查找当前对象是否存... 查看详情