《整理2》

aq82041
281 阅读6分钟

1. 常见的块级元素和行内块元素，以及它们有何不同

  1. 块级元素：可以设置宽高。宽度默认占满一行，高度有它内部文档流元素决定。

  2. 行内元素：不可设置宽高。宽度能包住它内部文档流元素，高度与行高有关。

  3. 行内块元素：可以设置宽高。默认宽度和高度由内部文档流元素决定。

此外，块级元素设置margin padding 在四个方向都会生效；但是行内元素只有左右生效，上下不生效。

常见块级元素：div h1-h6 p ol ul li

常见行内元素；a span input textarea select strong

2. px em rem 的区别

px是像素。em是相对于当前对象内的文本字体尺寸，如果没设置，就使用浏览器的默认字体尺寸。

rem是CSS3新增的一个相对长度单位，表示root em ，相对于根元素字体尺寸。用rem的好处就是，通过它可以做到只修改根元素就能成比例地调整所有字体大小。又可以避免字体大小逐层复合的连锁反应

3. 遇到的浏览器兼容问题

不同浏览器的内核不同，就导致了对网页的解析有所出入，也就是浏览器兼容性问题。Chrome的内核是webkit。浏览器的兼容性可以分为三个方面：html,css兼容，交互兼容（js)，浏览器hack

  1. html,css兼容

    浏览器的初始化样式不同：可以通过reset ，重置css样式。*{margin:0;padding:0} 等。还有ol,ul列表元素的{list-style:none} 等

  2. 交互兼容

    注册事件的API不同。标准浏览器支持addEventListener，IE8以下浏览器支持attachEvent

    //例如给一个button注册click事件
  var el = document.getElementById('button');  //button是一个<button>元素
  var handler = function(e){alert("button clicked.");};
  if(el.addEventLister){
      el.addEventListener("click", handler,false);
  }
  if(el.attachEvent){
      el.attachEvent("onclick", handler);
  }

它们的阻止默认事件和阻止冒泡的API也是不同的

4. v-for 和 v-if 同时使用的问题

Vue告诉我们，永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：

  1. 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

  2. 为了隐藏本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

**因为v-for比v-if的优先级更高。**所以在同一个元素上出现，v-for会先起作用。如果是上边两种场景，就会造成不必要的遍历。每次渲染都要遍历整个列表一次，然后再判断条件。就会非常低效。

场景一，换成遍历计算属性，是有缓存的，如果依赖的原始列表users不变，就不会重新计算。而且遍历的也是经过过滤后的列表，就是只遍历满足条件的，不需要像之前那样遍历所有项。

场景二，把v-if放到外层容器，就可以只检查一次，首先判断是否满足条件，不满足就直接不会v-for遍历。不用像之前那样，对每一项都检查一次。

5. 怎么把数组乱序

把一个数组，随机打乱。

具体思路：遍历整个数组，从最后一个位置开始，把它和一个任意位置的元素交换，这个任意位置是随机生成的，也包括最后一个位置。交换完以后，再交换倒数第二个元素，从包括它的其余元素里随机一个位置。

function shuffle(arr){
	for(let i=arr.length-1;i>=0;i--){
  		var j=Math.floor(Math.random()*(i+1))
  		var temp=arr[j]
  		arr[j]=arr[i]
  		arr[i]=temp
  	}
  	return arr
}

6. css隐藏一个元素的方法

  1. display:none 隐藏一个元素，该元素就不会占用空间了

  2. visibility:hidden 这种方式隐藏，该元素还会继续占用空间。而且不会触发该元素已经绑定的一些事件了。

  3. opacity:0 也会占据空间，通过修改透明度。如果该元素绑定了事件，如click，点击该区域后还是会触发事件

7. 事件冒泡和事件捕获

<div class='爷爷'>
	<div class='爸爸'>
		<div class='儿子'>
        	儿子
		</div>
	</div>
</div>

有这样一个三层的结构，给这三个div都添加事件监听，然后我点击儿子。三个函数都会被调用，那调用顺序如何呢？答案是从里到外/从外到里都可以。

IE支持冒泡，认为调用顺序从里到外，儿子-爸爸-爷爷；

网景支持捕获，认为调用顺序从外到里，爷爷-爸爸-儿子。

那到底该听谁的呢？W3C制定了一个标准，规定浏览器应该同时支持两种调用顺序 而且是先捕获，后冒泡。首先按照 爷爷-爸爸-儿子 的顺序看谁的身上有事件监听，然后按照 儿子-爸爸-爷爷 的顺序看谁的身上有事件监听。有监听函数就调用，没有就跳过。

从外向里找监听函数，这个过程就是事件捕获。从window->document->html->body->具体元素

从里向外找监听函数，这个过程就是事件冒泡。也就是从最具体的那个元素开始，逐级向上传播到window

那同一个事件会被触发两次吗?当然不是。由开发者决定这个函数会在捕获阶段被调用还是在冒泡阶段被调用。这是由addEventListener决定的。这个方法有第三个参数。不传，默认就是false，走冒泡阶段。即浏览器在冒泡阶段才会调用fn。

baba.addEventListener('click',fn)

如果为true，就走捕获。即浏览器在捕获阶段，发现baba身上有监听函数，就调用fn。在冒泡阶段是不会调用的。

baba.addEventListener('click',fn,true)

总结：事件发生，都会先捕获再冒泡。只不过我们可以选择让监听函数fn在捕获阶段被调用还是在冒泡阶段被调用。默认是在冒泡。

8. css设置透明度的两种方法和区别

opacity:0.5 opacity作用于元素本身以及元素内的所有内容

background:rgba(100,100,100,0.5); rgba只作用于元素本身,子元素不会继承透明效果

取值都是0-1

9. 状态码301 302 304

301 永久性重定向 客户端请求的资源已经被永久移动到了新的url，服务器会返回这个新地址，然后浏览器会自动重定向。今后任何新的请求都使用这个新地址代替。

302 临时重定向 只是被临时移动到了其他地方

它们的相同点就是都会从旧地址跳到服务器给的新地址。不同点是，301表示旧地址的资源已经被永久移除了，再也访问不了了。而302表示旧地址的资源还在，还是可以访问的，只是被临时移动了。

304 就是未修改，协商缓存相关

10. CSS伪元素: 和 ::的区别

在CSS3之前，伪元素和伪类都是一个冒号。CSS3规定，伪元素都用 ::，为了和伪类区分开。但是为了兼容过去的写法，在CSS3之前的伪元素用: 和 ::都可以。但是CSS3之后的伪元素只能用 ::

avatar
文章
阅读
粉丝