文章目录
1. display：none和visibility：hidden的区别
display:none,与visibility:hidden的作用是不通的
display：none隐藏元素后不占位置，它的高宽都将消失，本质上定义元素显示的类型，
visibility:hidden 定义元素是否显示，其实这个元素是否透明，宽高仍然有效，依然占位置。
2.null和undefined的区别
null表示空对象，不等于任何值也不等于它本身，表示一个变量不在指向任何地址。
undefined 表示空值。声明了没赋值的变量，值为 undefined。
3. CSS的引用方式有哪些？它们的区别？
css引用；行内样式，内联样式，外部样式；
行内样式顾名思义写在标签里面，这样不容易维护。
<div v-if='temporary_1 ' style="color:red">{{temp_1}}</div>
内联样式写在head标签中，适合一些较小的页面
*{
padding: 0;
margin: 0;
}
外部样式 通过link标签 或者import 引入
引入路径可以是在线的可以是本地的
link标签引入
link标签 除了引入css样式还可以引入别的
<link rel='stylesheet' type="text/css" href='../css/index.css'>
@import引入，只能引入css,且写 style样式中
<style>
*{
padding: 0;
margin: 0;
}
@import url("../css/index.css");
</style>
4.iframe的优缺点
iframe的优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
iframe的缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发
5.eval
eval是把字符串解析成js代码并运行，返回执行结果
可以把json支付串转换为json对象。
6.浏览器如何实现不同标签页的通信？
需要将数据在不同标签页之间更新，先将数据临时保存起来，
分为本地储存和服务器储存，
服务器储存用数据库，通过不同标签页的网络请求，获取存储在服务器的数据。
设置保存的键值对 ，若存在相同的·key则更新值
localStorage.setItem('list',this.list);
获取本地保存值得键，
localStorage.getItem('list')
删除本地保存的值，输入对应的键名
localStorage.removeItem('list')
根据索引获取存入的键
localStorage.key(index);
移除全部的键值
loaclStorage.clear()
简单应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本地储存</title>
<style>
.app .inp{
width: 20rem;
height:3rem;
font-size:2rem;
}
</style>
<script src='../js/vue.js'></script>
</head>
<body>
<div id='app' class='app'>
<input class='inp' name='name' placeholer='输入保存的数据' v-model='temp'>
<button @click='fun()'>保存</button>
<div v-for='item in list'>{{item}}</div>
</div>
<script>
let list=localStorage.getItem('list');
list=list.split(',');
console.log(list);
const vue=new Vue({
el:'#app',
data:{
list:list,
temp:''
},
methods:{
fun:function(){
if(this.temp){
console.log(this.list)
this.list.push(this.temp);
localStorage.setItem('list',this.list);
this.temp='';
}
},
}
})
</script>
</body>
</html>
效果
本地保存之后，我们在不同的页面打开，仍然有效，
7.CSS选择器的优先级排序，怎么计算权值？
行内样式的权值为1000
id选择器的权值为100
类选择器和伪类选择器的，属性选择器的全权值为10,
标签选择器权值为1
通配符选择器权值为0
当权值相同时遵循就近原则。
如何计算权值，将样式的选择器权重相加
#box p b{
color:blue;
}
权值 100+1+1=102
#box b{
color:red;
}
权值 100+1=101
<div id='box'>]
<p><b>妙团团</b></p>
</div>
显示字体颜色为蓝色
同权重情况下样，以式定义最近的为准
important j绝对优先级 大于行内样式
8.css有哪些选择器？可继承的属性有哪些？css3新增的伪元素有哪些？css优先级的计算
css选择器
1.* 通配符选择器 权重值为零，
2.标签选择器 权重值为1（ div,p,b）
3.伪类选择器，权重值为10（:hover）
4.类选择器，权重值为10 （.app）
5.属性选择器权重值为10 （type=’[text]’）
6.id选择器 权重值为100（#app）
7.相邻选择器（div + p）是给div后的p标签设置样式
8.后代选择器 （div p） div下的p标签
9.子选择 （div>p）div下的儿子级标签
可继承样式
1.font-size
2.font-family
3.color
4.text-indent
css3新增伪类选择器
p:first-of-type：选择属于其父元素的首个p元素的每个p元素。
p:last-of-type：选择属于其父元素的最后p元素的每个p元素。
p:only-of-type：选择属于其父元素唯一的p元素的每个p元素。
p:only-child：选择属于其父元素的唯一子元素的每个p元素。（even偶数行 ,odd奇行）
p:nth-child(2)：选择属于其父元素的第二个子元素的每个p元素。
:enabled： disabled 控制表单控件的禁用状态。
:checked： 单选框或复选框被选中。
css权重计算上面第七题
9.CSS的继承选择器，.one. two和.one > .two的区别？两个同级类选择器连着一起写有什么
继承选择器。.one .two匹配 .one下所有包含 .two的标签，包括子孙元素
css
.one .two{
color:red;
}
html
<li class='one'>妙团团
<ol>
<li class='two'>子孙元素</li>
</ol>
</li>
效果
.one>.two 匹配one下包含two的子标签。
css
.one>.two{
color:red;
}
html
<li class='one'>妙团团
<p class='two'>子元素</p>
<ol>
<li class='two'>孙元素</li>
</ol>
</li>
效果，只有子元素生效
两个同类选择器连在一起，权重值相加，匹配既包含one又包含two的标签
css
.one.two{
color:red;
}
<li class='one'>妙团团</li>
<li class='two'>妙团团</li>
<li class='two one'>妙团团</li>
html
效果
10.link和@import的区别
都是引入css样式
本质区别，link属于html标签，@import是css提供的一种样式。@import是css2.1提出的，老版本浏览器不支持，需要IE5以上才支持。link除了引入css样式，定义RSS,定义rel链接属性，可以可以通过js脚本改变，link的引入样式。js脚本无法操作@import引入的样式。
引入顺序不同，link标签是在页面加载时就引入，加载到head标签中，遇到link标签，会先加载完link标签引入的样式，加载完才继续加载。@import会在页面加载完之后才会加载。@import,需要写在style样式中。
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
