CSS两列以及三列自适应布局方法整理
2019-02-28 本文已影响0人
IvyAutumn
参考：
https://www.cnblogs.com/depsi/p/5097013.html
https://blog.csdn.net/qq_40072782/article/details/82927573
一、两栏布局：左侧定宽，右侧自适应
方法一：利用绝对定位
右侧设置绝对定位，将其从文档流中删除，为其设置100%的宽度和left的值（为左侧定宽留出位置）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.sitebar{
width: 200px;
background-color: green;
}
.content{
position: absolute;
left: 200px;
right: 0;
top: 0;
background-color: red;
}
</style>
</head>
<body>
<div class="content">右侧主体自适应区块</div>
<div class="sitebar">左侧定宽200px区块</div>
</body>
</html>
方法二：浮动法(和后面三列的思路一样)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.sitebar{
float: left;
width: 200px;
background-color: green;
}
.content{
background-color: red;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="sitebar">左侧定宽200px区块</div>
<div class="content">右侧主体自适应区块</div>
</body>
</html>
优点：代码简洁，便于理解
缺点：不利于页面优化，右侧主内容区后加载
方法三：margin负值法
该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。
要求：在middle外部再加一个div。此div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left、right块的margin负值进行配合。看代码吧
方法四：css3新属性flex方法
写一个<div>，在flex中类似于容器，
将left、right、middle全部包进去
并设div的display：flex。
middle块的样式中加上flex：1（或者auto）
三列布局
方法一：利用绝对定位：左右两列固定宽度，使用绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 左右绝对定位absolute</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
.left{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: 0;
left: 0; //注意这里
}
.right{
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 0;
right: 0; //注意这里
}
.middle{
height: 200px;
background: red;
text-align: center;
}
</style>
</head>
<body>
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
方法二：浮动法
浮动法的原理：
对左右块使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素在正常文档流中。
注意：
middle位置要求：middle块一定要放在left和right之后，因为它占据文档流位置，所以一定要放在最后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 左右绝对定位absolute</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
.left{
width: 200px;
height: 200px;
background: yellow;
float: left;
}
.right{
width: 200px;
height: 200px;
background: blue;
float: right;
}
.middle{
height: 200px;
background: red;
text-align: center;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</body>
</html>
方法三：margin负值法
该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。
要求：在middle外部再加一个div。此div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left、right块的margin负值进行配合。看代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
.main{
width: 100%;
height: 200px;
background: blue;
float: left; /*记得是包含middle外层的div设置浮动*/
}
.left{
width: 200px;
height: 200px;
background: yellow;
float: left;
margin-left: -100%; /*-100%是因为相对来说它偏移到下一行去了*/
}
.right{
width: 300px;
height: 200px;
background: blue;
float: left;
margin-left: -300px; /*这里要设置成right宽度的负值*/
}
.middle{
height: 200px;
background: red;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="middle">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
方法四：css3新属性flex方法
写一个<div>，在flex中类似于容器，
将left、right、middle全部包进去
并设div的display：flex。
middle块的样式中加上flex：1（或者auto）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 css3新属性flex方法</title>
<style type="text/css">
#box{
width: 100%;
height: 200px;
display: flex;
}
#left,#right{
width: 200px;
height: 200px;
background: pink;
}
#middle{
flex: auto; /* flex属性是flex-grow（项目放大比例）, flex-shrink（缩小比例） 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选*/
background: skyblue;
}
</style>
</head>
<body>
<!-- 写一个的div包含left、right、middle，设置为display：flex；并将middle设置flex：1； -->
<div id="box">
<div id="left">left</div>
<div id="middle">middle </div>
<div id="right">right</div>
</div>
</body>
</html>
