详解CSS display:inline-block的应用

2015/11/03 · CSS ·
display

澳门微尼斯人手机版,初藳出处:
小灰狼的底部   

本文详细描述了display:inline-block的基础知识,暴发的主题素材和平解决决方式以致其广阔的使用场景,加深了对inline-block应用的更加的掌握。

什么促成五个 LazyMan?

2016/12/24 · JavaScript
· 9 评论 ·
Javascript,
异步

正文小编: 伯乐在线 –
Natumsol
。未经作者许可,制止转发!
应接插手伯乐在线 专栏撰稿人。

二月份找实习的时候,微信面试官给了自家一套笔试题,明日整治时不识不知中翻了出来,个中有一道题挺风趣:

落实一个LazyMan,能够依据以下格局调用:
LazyMan(“Hank”)输出:
Hi! This is Hank!

LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~

LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出
Hi This is Hank!
Eat dinner~
Eat supper~

LazyMan(“Hank”).sleepFirst(5).eat(“supper”)输出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper

依此类推。

那是名列三甲的JavaScript流程序调控制,难点的重大是如何实现任务的相继实施。在Express有一个像样的东西叫中间件,这个中间件和大家这里的就餐、睡觉等职务很左近,每四个中间件实践到位后会调用next()函数,这些函数用来调用下三个中间件。

对于这几个主题素材,大家也能够选拔日常的思绪来消除,首先成立贰个任务队列,然后选取next()函数来调节职务的逐一奉行:

JavaScript

function _LazyMan(name) { this.tasks = []; var self = this; var fn
=(function(n){ var name = n; return function(){ console.log(“Hi! This is
” + name + “!”); self.next(); } })(name); this.tasks.push(fn);
set提姆eout(function(){ self.next(); }, 0); // 在下一个事变循环运转职务 }
/* 事件调节函数 */ _LazyMan.prototype.next = function() { var fn =
this.tasks.shift(); fn && fn(); } _LazyMan.prototype.eat =
function(name) { var self = this; var fn =(function(name){ return
function(){ console.log(“Eat ” + name + “~”); self.next() } })(name);
this.tasks.push(fn); return this; // 实现链式调用 }
_LazyMan.prototype.sleep = function(time) { var self = this; var fn =
(function(time){ return function() { setTimeout(function(){
console.log(“Wake up after ” + time + “s!”); self.next(); }, time *
1000); } })(time); this.tasks.push(fn); return this; }
_LazyMan.prototype.sleepFirst = function(time) { var self = this; var
fn = (function(time) { return function() { setTimeout(function() {
console.log(“Wake up after ” + time + “s!”); self.next(); }, time *
1000); } })(time); this.tasks.unshift(fn); return this; } /* 封装 */
function LazyMan(name){ return new _LazyMan(name); }

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
function _LazyMan(name) {
    this.tasks = [];  
    var self = this;
    var fn =(function(n){
        var name = n;
        return function(){
            console.log("Hi! This is " + name + "!");
            self.next();
        }
    })(name);
    this.tasks.push(fn);
    setTimeout(function(){
        self.next();
    }, 0); // 在下一个事件循环启动任务
}
/* 事件调度函数 */
_LazyMan.prototype.next = function() {
    var fn = this.tasks.shift();
    fn && fn();
}
_LazyMan.prototype.eat = function(name) {
    var self = this;
    var fn =(function(name){
        return function(){
            console.log("Eat " + name + "~");
            self.next()
        }
    })(name);
    this.tasks.push(fn);
    return this; // 实现链式调用
}
_LazyMan.prototype.sleep = function(time) {
    var self = this;
    var fn = (function(time){
        return function() {
            setTimeout(function(){
                console.log("Wake up after " + time + "s!");
                self.next();
            }, time * 1000);
        }
    })(time);
    this.tasks.push(fn);
   return this;
}
_LazyMan.prototype.sleepFirst = function(time) {
    var self = this;
    var fn = (function(time) {
        return function() {
            setTimeout(function() {
                console.log("Wake up after " + time + "s!");
                self.next();
            }, time * 1000);
        }
    })(time);
    this.tasks.unshift(fn);
    return this;
}
/* 封装 */
function LazyMan(name){
    return new _LazyMan(name);
}

打赏帮助笔者写出更加多好小说,感激!

打赏我

别天真了,第三方 CSS 并不安全

2018/03/07 · CSS ·
安全

原稿出处:
Jake   译文出处:[众成翻译

  • KING]()   

最近一段时间,关于 经过 CSS 创制“keylogger”(键盘记录器)
的座谈相当多。

有一些人呼吁浏览器商家去“修复”它。某个人则深入切磋,表示它仅能影响通过类
React 框架塑造的网站,并责备React。而实在的标题却在于以为第三方内容是“安全”的。

基础知识

display:inline-block是什么样啊?相信大家对那天性子并不不熟悉,遵照名字inline-block我们就足以大约猜出它是组成了inline和block两个的表征于寥寥,简单来说:设置了inline-block属性的因素既有着了block成分能够安装width和height的特征,又保证了inline成分不换行的特点。

举个例子表达:以前大家做横向菜单列表的时候,大家得以由此li和float:left两个来兑现,今后能够通过li和display:inline-block。

HTML代码:

XHTML

<ul> <li>首页</li> <li>关于</li>
<li>火爆</li> <li>联系大家</li> </ul>

1
2
3
4
5
6
<ul>
    <li>首页</li>
    <li>关于</li>
    <li>热点</li>
    <li>联系我们</li>
</ul>

CSS代码

CSS

ul, li { padding: 0; margin: 0; list-style-type: none; } li { display:
inline-block; border: 1px solid #000; }

1
2
3
4
5
6
7
8
9
ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
li {
    display: inline-block;
    border: 1px solid #000;
}

效果图

澳门微尼斯人手机版 1

inline-block基本职能

能够看看li元素能够横向排列,并且能够设置width属性,大家能够复制代码本人查看效果或查看Demo

打赏扶持本人写出越多好小说,谢谢!

任选一种支付格局

澳门微尼斯人手机版 2
澳门微尼斯人手机版 3

2 赞 11 收藏 9
评论

其三方图片

<img src=”;

1
<img src="https://example.com/kitten.jpg">

一旦本身将上述代码引进笔者的文本中,即表示信赖
example.com。对方可能会删除能源,给本人一个404,导致网址不完全,进而破坏这种信任关系。大概,他们或许会用别的非预期的数据来取代猫咪图片的数量。

然而,图片的熏陶只限于成分本人的原委区域。作者能够向客户解释并愿意客商相信,“此处的剧情来自
example.com,若是它有误,则是原站点的难题,而不是本站造成的”。但以此主题素材料定不会影响到密码输入框等剧情。

inline-block的问题

考查地点的事例,留意的校友分明会开掘,各个li之间有三个小空子,而小编辈的代码中并从未设置margin等连锁属性,那是干什么吗?

关于笔者:Natumsol

澳门微尼斯人手机版 4

Alibaba 前端程序猿
个人主页 ·
作者的稿子 ·
5 ·
   

澳门微尼斯人手机版 5

其三方脚本

JavaScript

<script src=”;

1
<script src="https://example.com/script.js"></script>

与图片比较,第三方脚本则有越来越多的调整权。若是自身将上述代码引进小编的文件中,则意味本人赋予了
example.com 完全调整本身的网址的权杖。该脚本能:

  • 读取/修改页面内容。
  • 监听客户的有着交互。
  • 运作成本大量总结能源的代码(如 cryptocoin 挖矿程序)。
  • 因此向本站发央浼,这样能附带客户的
    cookie,转载响应。(译注:盗取用户的 cookie 及其他数据)
  • 读取/修改本地存款和储蓄。
  • ……能够做其他对方想做的事务。

“当地存款和储蓄”特别首要。假设脚本通过 IndexedDB 或缓存 API
发起攻击,则就是在剔除脚本后,攻击仍可能在全数站点内继续存在。

若是您引进了其他站点的剧本,则必需断然相信对方及对方的防备才具。

举个例子你遇到恶意脚本的抨击,则可设置 Clear-Site-Data
header(清空站点数据响应头)
清除站点全体数据。

默认的inline元素

先是,大家入眼一下暗许的inline成分的展现:

HTML代码

XHTML

<a>首页</a> <a>热点</a>

1
2
<a>首页</a>
<a>热点</a>

CSS代码

CSS

a { margin: 0; padding: 0; border: 1px solid #000; }

1
2
3
4
5
a {
    margin: 0;
    padding: 0;
    border: 1px solid #000;
}

效果图

澳门微尼斯人手机版 6

inline暗中认可景况

私下认可情状下,inline成分之间就有空子出现,所以结合了inline和block属性的inline-block属性自然也可能有那个性子。
那这一个空隙是如何吧,它们是空白符!

第三方CSS

JavaScript

<link rel=”stylesheet” href=”;

1
<link rel="stylesheet" href="https://example.com/style.css">

对待图片,CSS 在力量上更临近脚本。像脚本一样,它适用于任何页面。它能够:

  • 删除/增加/修改页面内容。
  • 据说页面内容提倡呼吁。
  • 可响应多样客户交互。

虽说 CSS 不可能修改本地存款和储蓄,也不可能透过 CSS 运维 cryptocoin
挖矿程序(只怕是唯恐的,只是自个儿不领悟而已),但恶意 CSS
代码仍旧能招致不小的损失。

发表评论

电子邮件地址不会被公开。 必填项已用*标注