一，屏幕居中
1，利用auto自动填充剩余空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2,利用transform移动定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
二，双飞翼布局(两边固定宽度，中间自适应)
1，正常的双飞翼布局，用flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
display: flex;
}
.right,.left{
background-color: green;
width: 200px;
}
.middle{
background-color: red;
flex: 1;
}
</style>
<body>
<div class="main">
<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>
</div>
</body>
</html>
2,要求中部先渲染的，用float加上margin负值移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main>div{
float: left;
}
.contain{
width: 100%;
}
.middle{
background-color: red;
margin: 0 200px;
}
.left{
background-color: pink;
width: 200px;
margin-left: -100%;
}
.right{
background-color: yellow;
width: 200px;
margin-left: -200px;
}
</style>
<body>
<div class="main">
<div class="contain">
<div class="middle">中</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html>
先是让三者都左浮动，然后中间元素的子盒子给左右200px的margin.
因为一行不够用，所以现在是被挤到下一行：
再给左边的，让她margin-left移动一个屏幕宽度，右边的移动一个自身宽度，就完成了：
三，清除浮动
1，给父盒子设定高度（高度不会自适应，不推荐）
2，给浮动的同级末尾增加一个块级空盒子，设定样式clear：both
这里的原理是，最后一个盒子不是浮动的，它仍然在文档流中，也就是必须在父元素的边界内，父元素只有增加其高度才能达到此目的。于是，父盒子的高度就被它撑开了。
3，给父盒子增加一个块级伪元素：after
原理和上一个一样
4，给父盒子增加overflow:hidden
这里的原理是，给父盒子增加overflow：hidden就会将父盒子创建成一个BFC,而计算BFC的高度时，浮动元素也参与计算，所以就把父盒子撑开了。