一,屏幕居中
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的高度时,浮动元素也参与计算,所以就把父盒子撑开了。