三栏自适应布局：左右宽度300px，中间宽度自适应，整体高度自适应
1）绝对定位法
左右两边使用absolute定位，绝对定位会使其脱离正常文档流，中间部分会自然流动到他们上面，因此需要使用margin属性，留出左右元素的宽度，这样就使得中间元素可以自适应屏幕宽度；
该布局的优点：三个div顺序可以任意改变，不足是因为绝对定位，如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，如果不对样式进行初始化，则两边和中间的值可能会对不齐；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.left,.right{
position: absolute;
width: 300px;
top:0;
}
.left{
left:0;
background: red;
}
.center{
margin: 0 300px;
background: pink;
}
.right{
right: 0;
background: blue;
}
</style>
</head>
<body>
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</body>
</html>
2）圣杯布局：
原理是margin负值法，使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其成为一个BFC，并且其宽度要和left块的margin负值进行配合；布局中间部分一定要放在前面，左右顺序不限制，对于left块的margin负值一定要等于wrap的宽度；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap{
float: left;
width: 100%;
}
.left,.right{
float: left;
width: 300px;
}
.left{
margin-left: -100%;
background: red;
}
.center{
margin: 0 300px;
background: pink;
}
.right{
margin-left: -300px;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
</html>
3）自身浮动法：
对左右使用float:left和float:right使左右两个元素脱离文档流，中间元素在正常文档流中，使用margin指定左右外边距对其进行一个定位，该布局的好处是受外界影响小，但是不足的是三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系，当浏览器很小的时候，右边元素会被击到下一行；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.left,.right{
width: 300px;
}
.left{
float: left;
background: red;
}
.right{
float: right;
background: blue;
}
.center{
margin: 0 300px;
background: pink;
}
</style>
</head>
<body>
<div class="left">左边</div>
<div class="right">右边</div>
<div class="center">中间</div>
</body>
</html>
5）flex法：
在外层包裹一层div，设置为display:flex;中间设置flex:1;但是盒模型默认紧紧挨着，可以使用margin控制外边距，center一定要放到中间；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
}
.left,.right {
width: 300px;
background: red;
}
.right {
background: green;
}
.center {
flex: 1;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
</body>
</html>
三栏布局
两栏自适应布局：
1）绝对定位法：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
position: absolute;
left: 0;
width: 300px;
background: red;
top: 0;
}
.right {
background: green;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
</html>
2）圣杯布局：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
float: left;
}
.left {
float: left;
margin-left: -100%;
width: 300px;
background: red;
}
.right {
background: green;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="right">右边</div>
</div>
<div class="left">左边</div>
</body>
</html>
3）自身浮动法：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
background: red;
}
.right {
background: green;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
</html>
4）flex方法；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
}
.left {
width: 300px;
background: red;
}
.right {
flex: 1;
background: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
两栏布局
网友评论