三栏布局了解一下:布局分为左中右三栏,其中左右两栏宽度固定,中间栏宽度自适应
一、float
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.A {
color: #fff;
}
.B {
width: 100px;
height: 50px;
float: left;
background-color: #ffcf53;
}
.C {
width: 200px;
height: 50px;
float: right;
background-color: #00bcd4;
}
.D {
height: 50px;
margin: 0 200px 0 100px;
background-color: #19d896;
}
</style>
</head>
<body>
<div class="A">
<div class="B">left</div>
<div class="C">right</div>
<div class="D">center</div>
</div>
</body>
</html>
效果图(效果图相同的将不再重复)
二、position
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.A {
color: #fff;
position: relative;
}
.B {
position: absolute;
width: 100px;
height: 50px;
left: 0;
background-color: #ffcf53;
}
.C {
position: absolute;
width: 200px;
height: 50px;
right: 0;
background-color: #00bcd4;
}
.D {
height: 50px;
margin: 0 200px 0 100px;
background-color: #19d896;
}
</style>
</head>
<body>
<div class="A">
<div class="B">left</div>
<div class="C">right</div>
<div class="D">center</div>
</div>
</body>
</html>
三、圣杯
为了方便理解,将逐步添加样式,中间栏: width:100%; 左中右栏: float:left;
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.A {
color: #fff;
}
.B {
width: 100px;
height: 50px;
background-color: #ffcf53;
float: left;/*添加*/
}
.C {
width: 200px;
height: 50px;
background-color: #00bcd4;
float: left;/*添加*/
}
.D {
width: 100%;/*添加*/
height: 50px;
background-color: #19d896;
float: left;/*添加*/
}
</style>
</head>
<body>
<div class="A">
<div class="D">center</div>
<div class="B">left</div>
<div class="C">right</div>
</div>
</body>
</html>
效果图如下
左边栏: margin-left: -100%; 右边栏: margin-left: -200px;
.B {
width: 100px;
height: 50px;
background-color: #ffcf53;
float: left;
margin-left: -100%;/*添加*/
}
.C {
width: 200px;
height: 50px;
background-color: #00bcd4;
float: left;
margin-left: -200px;/*添加*/
}
效果图
如上图所示中间栏的文字center被左边栏遮盖,这可不是我们想要的结果
父层添加: padding: 0 200px 0 100px; (为左右栏提供位置)
.A {
color: #fff;
padding: 0 200px 0 100px;/*添加*/
}
窗口宽度调的太小了,左边栏和中间栏都被挡住了
把窗口宽度调大一点,效果图如下
左边栏: position: relative; left: -100px; 右边栏: position: relative; right: -200px;
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.A {
color: #fff;
padding: 0 200px 0 100px;
}
.B {
width: 100px;
height: 50px;
background-color: #ffcf53;
float: left;
margin-left: -100%;
position: relative;/*添加*/
left: -100px;/*添加*/
}
.C {
width: 200px;
height: 50px;
background-color: #00bcd4;
float: left;
margin-left: -200px;
position: relative;/*添加*/
right: -200px;/*添加*/
}
.D {
width: 100%;
height: 50px;
background-color: #19d896;
float: left;
}
</style>
</head>
<body>
<div class="A">
<div class="D">center</div>
<div class="B">left</div>
<div class="C">right</div>
</div>
</body>
</html>
最终效果图
四、双飞翼
双飞翼布局和圣杯布局类似,不同点在于处理让中间栏不被左右栏覆盖的方法不同
让我们回到最初的起点。。。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.A {
color: #fff;
}
.B {
width: 100px;
height: 50px;
background-color: #ffcf53;
float: left;
margin-left: -100%;
}
.C {
width: 200px;
height: 50px;
background-color: #00bcd4;
float: left;
margin-left: -200px;
}
.D {
width: 100%;
height: 50px;
background-color: #19d896;
float: left;
}
</style>
</head>
<body>
<div class="A">
<div class="D">center</div>
<div class="B">left</div>
<div class="C">right</div>
</div>
</body>
</html>
效果图
为了不让中间栏被左右栏挡住,于是乎给中间栏再加一层div
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.A {
color: #fff;
}
.B {
width: 100px;
height: 50px;
background-color: #ffcf53;
float: left;
margin-left: -100%;
}
.C {
width: 200px;
height: 50px;
background-color: #00bcd4;
float: left;
margin-left: -200px;
}
.D {
width: 100%;
height: 50px;
background-color: #19d896;
float: left;
}
.E {
margin-left: 100px;/*添加*/
margin-right: 200px;/*添加*/
}
</style>
</head>
<body>
<div class="A">
<div class="D">
<div class="E">center</div><!--添加-->
</div>
<div class="B">left</div>
<div class="C">right</div>
</div>
</body>
</html>
最终效果图和圣杯布局一样
五、table
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.A {
color: #fff;
display: table;
width: 100%;
}
.B {
width: 100px;
height: 50px;
background-color: #ffcf53;
display: table-cell;
}
.C {
width: 200px;
height: 50px;
background-color: #00bcd4;
display: table-cell;
}
.D {
height: 50px;
background-color: #19d896;
display: table-cell;
}
</style>
</head>
<body>
<div class="A">
<div class="B">left</div>
<div class="D">center</div>
<div class="C">right</div>
</div>
</body>
</html>
六、flex
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.A {
color: #fff;
display: flex;
}
.B {
width: 100px;
height: 50px;
background-color: #ffcf53;
flex-shrink: 0;
/*flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
* 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
* 如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。*/
}
.C {
width: 200px;
height: 50px;
background-color: #00bcd4;
flex-shrink: 0;
}
.D {
width: 100%;
height: 50px;
background-color: #19d896;
}
</style>
</head>
<body>
<div class="A">
<div class="B">left</div>
<div class="D">center</div>
<div class="C">right</div>
</div>
</body>
</html>
七、grid
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.A {
color: #fff;
display: grid;
grid-template-rows: 50px;/*设置每一行的行高*/
grid-template-columns: 100px auto 200px;/*设置每一列的列宽*/
}
.B {
background-color: #ffcf53;
}
.C {
background-color: #00bcd4;
}
.D {
background-color: #19d896;
}
</style>
</head>
<body>
<div class="A">
<div class="B">left</div>
<div class="D">center</div>
<div class="C">right</div>
</div>
</body>
</html>