8.23 前端面经总结

1.关于前端书籍推荐
如果有人让你推荐前端技术书，请让他看这个列表
伯乐在线已经在 GitHub 上同步了这个列表：https://github.com/jobbole/awesome-web-dev-books ，欢迎扩散。

2.http://web.jobbole.com/94371/?utm_source=blog.jobbole.com&utm_medium=relatedPosts这个不错
3.
右边宽度固定，左边自适应
第一种：

body{
display: flex;
}
.left{
background-color: rebeccapurple;
height: 200px;
flex: 1;
}
.right{
background-color: red;
height: 200px;
width: 100px;
}

body{
display: flex;
}
.left{
background-color: rebeccapurple;
height: 200px;
flex: 1;
}
.right{
background-color: red;
height: 200px;
width: 100px;
}

第二种

div {
height: 200px;
}
.left {
float: right;
width: 200px;
background-color: rebeccapurple;
}
.right {
margin-right: 200px;
background-color: red;
}

div {
height: 200px;
}
.left {
float: right;
width: 200px;
background-color: rebeccapurple;
}
.right {
margin-right: 200px;
background-color: red;
}

暂时想到了两种。

实现 水平垂直居中
第一种

container{

position:relative;

}

center{

width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);

}

container{

position:relative;

}

center{

width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);

}
第二种

container{

position:relative;

}

center{

width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;

}

container{

position:relative;

}

center{

width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;

}
第三种

container{

position:relative;

}

center{

position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

}

container{

position:relative;

}

center{

position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

}
第四种 flex

container{

display:flex;
justify-content:center;
align-items: center;

}

container{

display:flex;
justify-content:center;
align-items: center;

}