html模板如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS测试</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
1.float实现
此处center并未脱离标准流,故可以撑开父盒子,故不需要清除浮动
*{
margin: 0;
padding: 0;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color:red;
}
.right {
float: right;
width: 200px;
height: 300px;
background-color:red;
}
.center {
margin:0 200px 0;
height: 300px;
background-color: pink;
}
2.position实现
如果宽度采用auto,那么必须指定其参考位置,也就是说对于绝对定位,最好指定left\right\top\bottom的值
*{
margin: 0;
padding: 0;
}
.left {
position: absolute;
left: 0;
width: 200px;
height: 300px;
background-color:red;
}
.right {
position: absolute;
right: 0;
width: 200px;
height: 300px;
background-color:red;
}
.center {
position: absolute;
left: 200px;
right: 200px;
height: 300px;
background-color: pink;
}
.outer {
position: relative;
}
3.flex实现
为什么不容指定子元素的height?因为交叉轴默认是stretch也就是自动填充
为什么不用指定center的width?因为flex:1这个属性让center盒子变得具有了弹性可以自动填充剩余空间(也就是变得有弹性了)
*{
margin: 0;
padding: 0;
}
.left {
width: 200px;
background-color:red;
}
.right {
order: 2;
width: 200px;
background-color:red;
}
.center {
order: 1;
flex: 1;
background-color: pink;
}
.outer {
display: flex;
height: 300px;
}
https://www.jb51.net/css/589861.html,这个博主写的很全
4.双飞翼布局
摘自:CSS浮动-5.4实战案例-三列布局-使用双飞翼布局---不理解为啥??太难了_say hi.的博客-CSDN博客
也是大厂面试中经常考察的知识点。】
第一步:使用float属性让左中右三列浮动
第二步:使用负margin属性让左右两列与中间列处于同一水平线上
第三步:在中间列增加一个div内容元素,设置margin值为左(left)右(right)两列的宽度
最后,别忘了清除浮动,让父元素高度正常显示
双飞翼布局的优点:
1.中间内容列宽度自适应
2.中间内容区域优先加载
(因为,我们把中间列放在了第一个子元素的位置,它的左右都在其下边)
3.使用浮动布局
4.巧妙使用 负margin属性 保持三列水平
(我们设置了center 的 width: 100%; 左右两侧会被挤下去,因为他们三列都是浮动的嘛)
5.方法简单直接
6.浏览器兼容性好
.center {
float: left;
width: 100%;
height: 100px;
background-color: pink;
}
.content {
margin-left: 200px;
margin-right: 200px;
}
.left{
margin-left: -100%;
float: left;
width: 200px;
height: 100px;
background-color: skyblue;
}
.right {
margin-left: -200px;
float: left;
width: 200px;
height: 100px;
background-color: orange;
}
.father {
border: orangered 1px solid;
}
/* 清除浮动 */
.father:after {
display: block;
height: 0;
content: '';
clear: both;
}