文章目录
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样式中。