一省：HTML
10. b标签和strong标签的区别？
- b标签只是文本加粗，而strong除了加粗还有强调的语义。
- strong标签更有利于SEO。
二省： CSS
10. css单行或多行溢出隐藏如何实现？
- 单行显示省略号
<html lang="en">
<head>
<style>
div {
width: 200px;
}
p.single {
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/* （ 默认 normal 自动换行） */
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
<p class="single">单行溢出隐藏单行溢出隐藏单行溢出隐藏单行溢出隐藏单行溢出隐藏单行溢出隐藏</p>
</div>
</body>
</html>
- 多行实现省略号
<html lang="en">
<head>
<style>
div {
width: 200px;
}
p.more {
/*1. 超出的部分隐藏 */
overflow: hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
<p class="more">多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏多行溢出隐藏</p>
</div>
</body>
</html>
三省：JavaScript
10. 浅谈this？
this是JavaScript的一个关键字，通常会在执行上下文中指向一个对象，在不同执行环境下会指向不同的对象。this的指向与调用的位置有关，与定义的位置无关。
- 全局作用域，普通函数中，this指向window
function foo() {
console.log(this);
}
foo();//window
- 通过对象调用函数，this指向调用对象
//demo1
var obj = {
name: "Jack",
foo: function() {
console.log(this);
}
}
obj.foo();//obj {name: 'Jack', foo: ƒ}
//demo2
function foo() {
console.log(this);
}
var obj1 = {
name: "Mick",
foo: foo
}
obj1.foo()//obj1 {name: 'Mick', foo: ƒ}
- call、apply和bind方法可以指定this的指向
function foo() {
console.log(this);
}
var obj = {
name: "Jack",
foo: function() {
console.log(this);
}
}
var obj1 = {
name: "Mick",
foo: foo
}
foo.call(obj);//obj {name: 'Jack', foo: ƒ}
obj.foo.apply(obj1);//obj1 {name: 'Mick', foo: ƒ}
var foo1 = foo.bind(obj)
foo1();//obj {name: 'Jack', foo: ƒ}
- 箭头函数没有自己的this，this是上层作用域的this
//demo1
var obj2 = {
name: "Siri",
arrFn: () => {
console.log(this);
}
}
obj2.arrFn()//window
//demo2
var obj3 = {
name: "Carry",
foo: function() {
var obj = {
name: "Bobe",
arrFn: () => {
console.log(this);
}
}
obj.arrFn()
}
}
obj3.foo()//obj3 {name: 'Carry', foo: ƒ}
推荐大佬的一篇文章，想要更深入理解this的可以看看: mp.weixin.qq.com/s/hYm0JgBI2…
