一、选择题
1.要动态改变层中的内容可以使用的方法有?
- A:innerHTML
- B:innerText
- C:通过设置层的隐藏和显示来实现
- D:通过设置层的样式属性的display属性
// 答案: A,B,注意动态改变,内容
2. 看下面的代码,给出输出的结果?
for (var i = 1; i <= 3; i++){
setTimeout(function(){
console.log(i);
},0)
}
// 答案: 4 4 4 ,因为setTimeout是异步函数
3. 看下面代码,给出输出结果?
var a = 1;
function foo() {
if(!a){
var a = 2
}
alert(a);
}
foo()
- A:1
- B:2
- C:undefined
- D:报错
答案是:B,
涉及到的知识点有作用域,变量提升。
因为var是函数级作用域,foo函数中出现var a=2 的存在,
就默认在函数内顶端 声明var a;此时这个a没有被赋值所以是undefined;
然后执行
if(!a)
等价于!undefined
肯定是true。然后给a赋值为2.所以打印的是2。
二、问答题
1. 请用css实现水平居中,HTML结构如下
<div class="wrapper">
<div class="content"></div>
</div>
答案:
/*第一种通过定位和位移(未知子模块宽高)或者margin(已知子元素宽高)*/
html,
body,
.wrapper{
width:100%;
height:100%;
}
.content{
width:30%;
height:30%;
position:absolute;
top:50%;
left:50%;
transform:tranlate(-50%,-50%);
}
/*或者*/
.content{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
/*第二种通过flex布局*/
.wrapper{
width:100%;
height:500px;
display:flex;
flex-flow: row nowrap;
/*align-items 定义子元素交叉轴也就是垂直方向的对齐方式*/
align-items:center;
/*justify-content 定义子元素水平方向的对齐方式*/
justify-content:center;