前端基础进级,前端程序猿面试题汇总

2019-10-11 22:23栏目:真实赌钱游戏网站
TAG:

聊聊 CSS3 中的 object-fit 和 object-position

2016/11/22 · CSS · CSS3

正文我: 伯乐在线 - TGCode 。未经作者许可,防止转发!
迎接插足伯乐在线 专栏撰稿人。

眼前径直忙于将JavaScript学习的笔记整理成都电子通信工程大学子书,也没怎么空闲时间写新的作品。趁着明日有一些空闲,决定再来折腾一下CSS3中的七个特性:object-fitobject-position

那多个奇葩的质量是做怎么样的吗?其实它们是为了管理替换元素(replaced elements)的自适应难题,一言以蔽之,就是管理替换来分的变形(这里指长度宽度比例变形)难题。

等等,好像多了三个名词,啥叫替换元素?替换到分其实是:

  • 其剧情不受CSS视觉格式化模型调整的因素,比如image,嵌入的文书档案(iframe之类)大概applet,叫做替换来分。比:img成分的原委通常会被其src属性钦命的图像替换掉。替换来分经常有其原始的尺码:一个原始的幅度,一个原始的万丈和二个村生泊长的比值。例如一幅位图有固有用相对单位钦点的增长幅度和惊人,进而也可以有固有的宽高比率。另一方面,其余文档也说不定没有原来的尺寸,举个例子贰个空荡荡的html文书档案。
  • CSS渲染模型不思量替换到分内容的渲染。这几个替换来分的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在一些特定情景下为替换来分。使用CSS的content属性插入的靶子是无名替换元素。

以此当然不是本人脑子沙暴来的,而是援引别人的表达:引用

广大的更迭成分有<video>、<object>、<img>、<input type=”image”>、<svg>、<svg:image>和<svg:video>等。

要是看的稀里纷纭扬扬的也没涉及,接着往下看,笔者深信您会领悟!

1、object-fit

语法:

object-fit: fill | contian | cover | none | scale-down;

1
object-fit: fill | contian | cover | none | scale-down;
  • fill : 暗许值。填充,可替换来分填满整个内容区域,只怕会改动长度宽度比,导致拉伸。
  • contain : 包涵,保持原本的尺寸比例,有限扶持可替换来分完整展现,宽度或可观至稀少三个和内容区域的上升的幅度或高度一致,部分剧情会空白。
  • cover : 覆盖,保持原本的尺码比例,保障内容区域被填满。因而,可替换到分可能会被切掉一部分,进而不能够完好显示。
  • none : 保持可替换来分原尺寸和比例。
  • scale-down : 等比缩短。就就像依次安装了none或contain, 最后表现的是尺寸相当的小的特别。

倒霉意思,小编又要摆妹子来吸引你们了,看效果图:

真实赌钱游戏平台网站 1

地点的三个例证的代码:

<style> .box{ position:relative; float:left; margin:0 10px 40px 10px; width:150px; height:150px; } .box>img{ width:100%; height:100%; background-color:#000; } .fill{ object-fit:fill; } .contain{ object-fit:contain; } .cover{ object-fit:cover; } .none{ object-fit:none; } .scale{ object-fit:scale-down; } </style> <div class="box"> <img src="example-girl.jpg" class="fill" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="contain" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="cover" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="none" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="scale" alt=""> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style>
.box{  
  position:relative;  
  float:left;  
  margin:0 10px 40px 10px;  
  width:150px;  
  height:150px;  
}  
.box>img{  
  width:100%;  
  height:100%;  
  background-color:#000;  
}  
.fill{  
  object-fit:fill;  
}  
.contain{  
  object-fit:contain;  
}  
.cover{    
  object-fit:cover;  
}  
.none{  
  object-fit:none;  
}  
.scale{  
  object-fit:scale-down;  
}  
</style>
 
<div class="box">  
  <img src="example-girl.jpg" class="fill" alt="">  
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="contain" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="cover" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="none" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="scale" alt="">
</div>

拜望这个功能,笔者想同志们最关切的的应当是宽容性,点这里点这里

2、object-position

前端基础进级,前端程序猿面试题汇总。object-position品质决定了它的盒子里面替换来分的对齐格局。

语法:

object-position: <position>

1
object-position: <position>

私下认可值是50% 50%,也正是居中效果,其取值和CSS中background-position属性取值同样。(要是面生background-position,可以瞄瞄这里《CSS3 Background》)

譬喻说:替换来分位于内容区域的左上角

img{ object-fit: contain; object-position: 0 0; }

1
2
3
4
img{
  object-fit: contain;
  object-position: 0 0;
}

效果图:

真实赌钱游戏平台网站 2

比如:替换元素相对于左下角10px 10px地点一定

img{   object-fit: contain;   object-position: bottom 10px left 10px; }

1
2
3
4
img{
  object-fit: contain;
  object-position: bottom 10px left 10px;
}

效果图:

真实赌钱游戏平台网站 3

道理当然是那样的,你也能够运用calc()来恒定:

img{   object-fit: contain;   object-position: calc(100% - 10px) calc(100% - 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: calc(100% - 10px) calc(100% - 10px);
}

效果图:

真实赌钱游戏平台网站 4

它还协助负数:

img{   object-fit: contain;   object-position: -10px calc(100% - 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: -10px calc(100% - 10px);
}

效果图:

真实赌钱游戏平台网站 5

总之,object-position的特色表现与backgound-position如出一辙同样的。

兼容性:点这里

到那边,那五个属性算是说完了,正是如此简单。

打赏帮忙小编写出越多好小说,感谢!

打赏笔者

三、构造函数

在JavaScript中,new关键字能够让一个函数变得特别。通过上面包车型大巴例子,大家来一探new关键字的美妙之处。

function demo() { console.log(this); } demo(); // window new demo(); // demo

1
2
3
4
5
6
function demo() {
    console.log(this);
}
 
demo();  // window
new demo();  // demo

为了能够直观的感受他们分裂,提出我们入手实施观看一下。很刚烈,使用new之后,函数内部发生了有的变动,让this指向退换。那么new关键字到底做了如何职业呢。嗯,其实自个儿事先在篇章里用文字差相当少表明了一下new到底干了怎么样,可是部分同学好奇心很足,总希望用代码落成一下,作者就大致以自己的精晓来发挥一下啊。

// 先一本正经的创办二个构造函数,其实该函数与日常函数并无异 var Person = function(name, age) { this.name = name; this.age = age; this.getName = function() { return this.name; } } // 将构造函数以参数情势传播 function New(func) { // 声美素佳儿个中级对象,该指标为最后回到的实例 var res = {}; if (func.prototype !== null) { // 将实例的原型指向构造函数的原型 res.__proto__ = func.prototype; } // ret为构造函数推行的结果,这里透过apply,将构造函数内部的this指向修改为指向res,即为实例对象 var ret = func.apply(res, Array.prototype.slice.call(arguments, 1)); // 当大家在构造函数中显著钦赐了回来对象时,那么new的实践结果正是该重临对象 if ((typeof ret === "object" || typeof ret === "function") && ret !== null) { return ret; } // 若无显明钦点再次回到对象,则暗许重回res,这么些res正是实例对象 return res; } // 通过new申明创制实例,这里的p1,实际收到的难为new中回到的res var p1 = New(Person, 'tom', 20); console.log(p1.getName()); // 当然,这里也足以推断出实例的类型了 console.log(p1 instanceof Person); // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 先一本正经的创建一个构造函数,其实该函数与普通函数并无区别
var Person = function(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        return this.name;
    }
}
 
// 将构造函数以参数形式传入
function New(func) {
 
    // 声明一个中间对象,该对象为最终返回的实例
    var res = {};
    if (func.prototype !== null) {
 
        // 将实例的原型指向构造函数的原型
        res.__proto__ = func.prototype;
    }
 
    // ret为构造函数执行的结果,这里通过apply,将构造函数内部的this指向修改为指向res,即为实例对象
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
 
    // 当我们在构造函数中明确指定了返回对象时,那么new的执行结果就是该返回对象
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    }
 
    // 如果没有明确指定返回对象,则默认返回res,这个res就是实例对象
    return res;
}
 
// 通过new声明创建实例,这里的p1,实际接收的正是new中返回的res
var p1 = New(Person, 'tom', 20);
console.log(p1.getName());
 
// 当然,这里也可以判断出实例的类型了
console.log(p1 instanceof Person); // true

JavaScript内部再通过别的的有的卓殊管理,将var p1 = New(Person, 'tom', 20); 等效于var p1 = new Person('tom', 20);。正是我们认识的new关键字了。具体怎么管理的,我也不明了,别刨根问底了,平素回答下去太难 – -!

老实讲,你恐怕很难在另各地方看看有诸有此类斐然的告诉您new关键字到底对构造函数干了怎么样的篇章了。掌握了这段代码,你对JavaScript的精通又比别人深远了一分,所以,一本正经卑鄙龌龊求个赞可好?

理所必然,相当多情侣由于对于这两天几篇文章的学问明白相当不够到位,会对new的贯彻表示特别纳闷。不过老实讲,若是您读了自笔者的眼下几篇著作,一定会对这里new的兑现存似曾相识的痛感。而且作者这里早就全心全意做了详细的笺注,剩下的只可以靠你本身了。

而是只要您花点时间,精通了她的规律,那么麻烦了过多人的构造函数中this到底指向哪个人就变得特简单了。

据此,为了能够看清实例与目的的关系,大家就使用构造函数来化解。

var Person = function(name, age) { this.name = name; this.age = age; this.getName = function() { return this.name; } } var p1 = new Person('Ness', 20); console.log(p1.getName()); // Ness console.log(p1 instanceof Person); // true

1
2
3
4
5
6
7
8
9
10
11
12
var Person = function(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        return this.name;
    }
}
 
var p1 = new Person('Ness', 20);
console.log(p1.getName());  // Ness
 
console.log(p1 instanceof Person); // true

关于构造函数,如若你一时半刻不能够领略new的切切实实落到实处,就先记住上面那几个结论吧。

  • 与普通函数相比,构造函数并未另外非常的地点,首字母大写只是大家约定的小规定,用于区分普通函数;
  • new关键字让构造函数具备了与经常函数差别的大队人马风味,而new的经过中,执行了之类进程:
    1. 声称六在那之中级对象;
    2. 将该中间对象的原型指向构造函数的原型;
    3. 将构造函数的this,指向该中间对象;
    4. 回去该中间对象,即重回实例对象。

目录

  1. HTML部分
  2. CSS部分
  3. JavaScript部分
  4. 别的主题素材
一、基础概念回想

函数在被调用实践时,会创立二个脚下函数的施行上下文。在该实施上下文的创制阶段,变量对象、功效域链、闭包、this指向会分别被分明。而二个JavaScript程序中貌似的话会有三个函数,JavaScript引擎使用函数调用栈来管理那一个函数的调用顺序。函数调用栈的调用顺序与栈数据结构一致。

JS宗旨种类:浅谈 原型对象和原型链

2016/03/01 · JavaScript · 2 评论 · 原型对象, 原型链

最早的作品出处: 一像素   

在Javascript中,万物皆对象,但指标也是有分别,差不离能够分成两类,即:普通对象(Object)和函数对象(Function)。

貌似来讲,通过new Function产生的靶子是函数对象,别的对象都是惯常对象。

譬如表明:

function f1(){ //todo } var f2 = function(){ //todo }; var f3 = new Function('x','console.log(x)'); var o1 = {}; var o2 = new Object(); var o3 = new f1(); console.log( typeof f1,//function typeof f2,//function typeof f3,//function typeof o1,//object typeof o2,//object typeof o3 //object ); >> function function function object object object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function f1(){
    //todo
}
var f2 = function(){
    //todo
};
var f3 = new Function('x','console.log(x)');
 
var o1 = {};
var o2 = new Object();
var o3 = new f1();
 
console.log(
    typeof f1,//function
    typeof f2,//function
    typeof f3,//function
    typeof o1,//object
    typeof o2,//object
    typeof o3 //object
);
>> function function function object object object

f1属于函数的宣示,最普遍的函数定义情势,f2实际上是二个佚名函数,把那几个佚名函数赋值给了f2,属于函数表明式,f3不普遍,但也是一种函数对象。

Function是JS自带的靶子,f1,f2在创造的时候,JS会自动通过new Function()的章程来创设这么些指标,因而,那多个指标都是因此new Function()创制的。

在Javascript中创造对象有二种格局:对象字面量和运用new表达式,o1和o2的创办恰好对应了那三种办法,保护讲一下o3, 假若用Java和C#的思绪来领悟的话,o3是f1的实例对象,o3和f1是均等档期的顺序,最少自己在此之前这么感到,其实不然…

那正是说怎么精通吧? 很简短,看o3是还是不是经过new Function发生的, 明显不是,既然不是函数对象,那便是惯常对象 。

经过对函数对象和日常性对象的简要领悟之后,大家再来通晓一下Javascript中的原型和原型链:

在JS中,每当创制一个函数对象f1 时,该对象中都会停放一些性质,个中囊括prototype和__proto__,  prototype即原型对象,它记录着f1的部分性子和措施。

必要注意的是,prototype 对f1是不可以见到的,也便是说,f1不会招来prototype中的属性和章程。

function f(){} f.prototype.foo = "abc"; console.log(f.foo); //undefined

1
2
3
function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined

那么,prototype有怎样用吧? 其实prototype的首要性功能即是延续。 通俗一点讲,prototype中定义的属性和章程皆以留下本人的“后代”用的,由此,子类完全能够访问prototype中的属性和格局。

想要知道f1是什么把prototype留给“后代”,大家必要通晓一下JS中的原型链,此时,JS中的 __proto__ 登场了,那男生长的很离奇,遮盖的也很深,以至于你日常见不到它,但它在平凡对象和函数对象中都存在, 它的效果与利益正是保存父类的prototype对象,JS在经过new 表达式成立贰个对象的时候,日常会把父类的prototype赋值给新目的的__proto__本性,那样,就变成了一代代传承…

function f(){} f.prototype.foo = "abc"; var obj = new f(); console.log(obj.foo); //abc

1
2
3
4
function f(){}
f.prototype.foo = "abc";
var obj = new f();
console.log(obj.foo); //abc

今日我们清楚,obj中__proto__保存的是f的prototype, 那么f的prototype中的__proto__中保留的是何等啊? 看下图:

真实赌钱游戏平台网站 6

如图所示,f.prototype的__proto__中保留的是Object.prototype,Object.prototype对象中也可能有__proto__,而从输出结果看,Object.prototype.__proto__ 是null,表示obj对象原型链的截至。如下图所示:

真实赌钱游戏平台网站 7

obj对象具有那样一个原型链未来,当obj.foo实施时,obj会先找找本人是不是有该属性,但不会寻觅本人的prototype,当找不到foo时,obj就本着原型链依次去查找…

在上头的例子中,大家在f的prototype上定义了foo属性,那时obj就能够在原型链上找到那个性格并实施。

 

终极,用几句话总括一下本文中提到到的首要:

  1. 原型链的多变真就是靠__proto__ 而非prototype,当JS引擎推行对象的不二等秘书诀时,先物色对象自己是或不是存在该方式,如若不设有,会在原型链上查找,但不会找出自个儿的prototype。
  2. 二个指标的__proto__笔录着本身的原型链,决定了本身的数据类型,改造__proto__就极其改动目的的数据类型。
  3. 函数的prototype不属于本身的原型链,它是子类创设的着力,决定了子类的数据类型,是三翻五次子类原型链的大桥。
  4. 在原型对象上定义方法和品质的指标是为了被子类传承和利用。

 

2 赞 17 收藏 2 评论

真实赌钱游戏平台网站 8

打赏援救自个儿写出愈来愈多好小说,谢谢!

任选一种支付格局

真实赌钱游戏平台网站 9 真实赌钱游戏平台网站 10

1 赞 收藏 评论

真实赌钱游戏平台网站

六、总结

关于面向对象的基础知识大致就是这一个了。作者从最简便易行的始建三个对象最先,解释了怎么我们要求构造函数与原型,精通了这几个中的细节,有援助大家在实际开支中灵活的团协会本身的靶子。因为我们并非享有的情状都会利用构造函数只怕原型来创立对象,或然大家必要的靶子并不会注解多个实例,也许不用区分对象的品种,那么我们就足以接纳更简约的章程。

咱们还索要关切构造函数与原型的各自特点,有辅助我们在创设对象时准确的剖断大家的品质与情势到底是身处构造函数中照旧放在原型中。若无通晓精通,这会给大家在其实支出中产生比十分大的郁闷。

末段接下去的几篇文章,我会挑多少个面向对象的事例,继续匡助咱们精晓面向对象的实在应用。

2 赞 4 收藏 1 评论

真实赌钱游戏平台网站 11

文书档案推荐

  1. jQuery 基本原理
  2. JavaScript 秘密花园
  3. CSS参谋手册
  4. JavaScript 标准参照教程
  5. ECMAScript 6入门
二、认知断点调节和测验工具

在尽量新本子的chrome浏览器中(不分明你用的老版本与我的一致),调出chrome浏览器的开垦者工具。

浏览器右上角竖着的三点 -> 越来越多工具 -> 开采者工具 -> Sources

1
浏览器右上角竖着的三点 -> 更多工具 -> 开发者工具 -> Sources

分界面如图。

真实赌钱游戏平台网站 12

断点调试分界面

在本人的demo中,小编把代码放在app.js中,在index.html中引进。大家有时只须要关爱截图中革命箭头的地方。在最左侧上方,有一排Logo。大家可以透过利用他们来调控函数的进行种种。从左到右他们相继是:

  • resume/pause script execution
    卷土而来/暂停脚本施行
  • step over next function call
    跨过,实际表现是不际遇函数时,施行下一步。境遇函数时,不进去函数直接实践下一步。
  • step into next function call
    跨入,实际表现是不蒙受函数时,试行下一步。境遇到函数时,步入函数推行上下文。
  • step out of current function
    跳出当前函数
  • deactivate breakpoints
    停用断点
  • don‘t pause on exceptions
    不停顿非常捕获

其间跨过,跨入,跳出是本人动用最多的八个操作。

上航海用教室右侧第一个革命箭头指向的是函数调用栈(call Stack),这里交易会示代码实施进度中,调用栈的变化。

侧边第五个玉石白箭头指向的是效果域链(Scope),这里交易会示当前函数的机能域链。当中Local表示近些日子的部分变量对象,Closure表示近期效率域链中的闭包。依据此处的功效域链体现,大家可以很直观的论断出贰个事例中,到底何人是闭包,对于闭包的深深摸底全数特别主要的推搡意义。

版权声明:本文由20个试玩平台发布于真实赌钱游戏网站,转载请注明出处:前端基础进级,前端程序猿面试题汇总