如何实现垂直居中对齐
<!DOCTYPE html>
<html>
<head>
<title>居中对齐</title>
<meta charset="utf-8">
<style type="text/css">
.wrap{
border: 1px solid black;
height: 400px;
width: 500px;
}
/*第一种方式：display: flex; align-items: center;
.wrap{
display: flex;
align-items: center;
}*/
/*第二种方式：利用table
.wrap{
display: table;
}
.item{
display: table-cell;
vertical-align: middle;
}*/
/*第三种方式：利用absolute
.wrap{
position: relative;
}
.item{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}*/
</style>
</head>
<body>
<div class="wrap">
<div class="item">
啊速度发送啊速度发上啊手动阀手动阀速度发三的发三的发三大啊手动阀上的啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀士大夫啊手动阀士大夫啊手动阀似懂非懂啊手动阀士大夫啊
</div>
</div>
</body>
</html>
-
简述轮播图实现原理
-
js基本类型
string，bool，number，undefine，null -
对this指针的理解
指向调用函数
function test(){
var a = 2;
console.log(this.a)
}
如何改变this作用域
- 基本类型和引用类型赋值的时候，内存的变化
var a = 2;
b = a;
b = 11;
输出a ，b
var obj1 = {name ： “王小王”};
obj2 = obj1;
obj2.name = "王大王"
输出obj1, obj2 的值
为什么？
看一下基本类型和引用类型在栈、堆中的存储
基本类型存储结构
栈区
a 2
b 11
引用类型存储结构
栈区 堆
obj1 地址1 王大王
obj2 地址2 王大王
- CSS Sticky Footer
<!DOCTYPE html>
<html>
<head>
<title>stick footer</title>
<meta charset="utf-8">
<style type="text/css">
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.wrap{
min-height: 100%;
margin-bottom: -40px;
}
.wrap::after{
content: "";
display: block;
height: 40px;
}
.footer{
height: 40px;
background: orange;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">这里是内容</div>
<div class="content">这里是内容</div>
</div>
<div class="footer">这里是footer</div>
</body>
</html>
-
css3 transform 哪些参数
-
react 生命周期
初始
constructor()
componentWillMount()
render()
componentDidMount()
componentWillUnmount()
更新
componentWillReceiveProps
shouldcomponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
网友评论