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;

}

總結

以上是生活随笔為你收集整理的8.23 前端面经总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。