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;
}