一、如何实现左端宽度固定，右端宽度自适应
//DOM公共部分结构
<div class='box'>
<div class='box-left'></div>
<div class='box-right'></div>
</div>
1.利用 float + margin 实现
.box{
height: 200px;
}
.box>div{
height: 100%;
}
.box-left{
width: 200px;
float: left;
background: blue;
}
.box-right{
margin-left: 200px;
background: red;
}
2.利用calc计算宽度
.box{
height: 200px;
}
.box>div{
height: 100%;
}
.box-left{
width: 200px;
float: left;
background: blue;
}
.box-right{
width: calc(100% - 200px);//注意这边写法 ‘-’ 号两边要要空格 不然不识别
float: right;
background: red;
}
3.利用float + overflow实现
.box{
height:200px;
}
.box>div{
height:100%;
}
.box-left{
width:200px;
background:blue;
float:left
}
.box-right{
overflow:hidden;
background:red;
}
3.利用flex-grow实现
.box{
height:200px;
display: flex;
}
.box>div{
height:100%;
}
.box-left{
width:200px;
background:blue;
float:left
}
.box-right{
background: red;
flex-grow: 1;//flex-grow属性都为1，则它们将等分剩余空间
}
二、圣杯布局和双飞翼布局的实现方法和区别
实现效果：圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 两者区别：主要不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中在加一个div来放置内容，给这个新的div设置margin-left和margin-right双飞翼布局实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body{
font-size: 50px;
font-weight: bolder;
margin: 0;
padding: 0;
text-align: center;
}
.header{
height: 60px;
background: rosybrown;
}
.footer{
height: 60px;
background: rosybrown;
}
.context{
overflow: hidden;
}
.context>div{
float: left;
height: 300px;
line-height: 300px;
}
.middle{
width: 100%;
}
.left{
width: 200px;
background: cornflowerblue;
margin-left: -100%;
}
.right{
width: 200px;
background: darkblue;
margin-left: -200px;
}
.center{
background: darkorange;
margin: 0 200px;
}
</style>
<body>
<div class="header">header</div>
<div class="context">
<div class="middle">
<div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
圣杯布局实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body{
font-size: 50px;
font-weight: bolder;
margin: 0;
padding: 0;
text-align: center;
}
.header{
height: 60px;
background: rosybrown;
}
.footer{
height: 60px;
background: rosybrown;
}
.context{
overflow: hidden;
padding: 0 200px;
}
.context>div{
float: left;
height: 300px;
line-height: 300px;
}
.center{
width: 100%;
background: darkorange;
box-sizing: border-box;
}
.left{
width: 200px;
margin-left: -200px;
background: cornflowerblue;
position: relative;
}
.right{
width: 200px;
margin-left: -200px;
background: darkblue;
position: relative;
left: 200px;
}
</style>
<body>
<div class="header">header</div>
<div class="context">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
ps:感觉我不怎么用到这个东西，我都是flex布局来的！
三、如何让一个元素水平垂直居中
这个是一个很常见的问题,在工作中和面试中好像经常会碰到这种问题，我自己就在面试中被问到了好几次。这边也就简单的总结一下 方法一<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.center{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
background: burlywood;
text-align: center;
}
</style>
<body>
<div class="center">center</div>
</body>
</html>
方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.center{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: burlywood;
text-align: center;
}
</style>
<body>
<div class="center">center</div>
</body>
</html>
方法三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.center{
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: burlywood;
text-align: center;
}
</style>
<body>
<div class="center">center</div>
</body>
</html>
还有啥问题我想不大起来了，后面遇到了在补吧。不过现在的flex 布局更方便的 但会遇到一些兼容性问题，比如在ie中和min-height min-width 不能兼容 这个得注意。不过有这个方法之后布局就更简单了。
