浮动实现三栏布局
让左边的盒子和右边的盒子左右浮动,留出两边盒子的位置(利用margin,我自己试了一下padding也可以)
1.这种布局方式,dom结构必须是先写浮动部分,然后再中间块,否则右浮动块会掉到下一行。
2.浮动布局的优点就是比较简单,兼容性也比较好。但浮动布局是有局限性的, 浮动元素脱离文档流,要做清除浮动, 这个处理不好的话,会带来很多问题,比如父容器高度塌陷等。
3.主要内容无法最先加载,当页面内容较多时会影响用户体验。
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
height: 700px;
}
.left {
float: left;
width: 100px;
background-color: skyblue;
}
.right {
float: right;
width: 200px;
background-color: tomato;
}
.main {
padding-left: 100px;
padding-right: 200px;
background-color: teal;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</body>
</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>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
height: 700px;
}
.left {
position: absolute;
left: 0;
width: 100px;
background-color: skyblue;
}
.right {
position: absolute;
right: 0;
width: 200px;
background-color: tomato;
}
.main {
margin-left: 100px;
margin-right: 200px;
background-color: teal;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</body>
</html>
calc实现三栏布局
calc可以计算像素,动态生成宽度 给中间盒子的宽度设置calc就行了,但是每个元素都要设置浮动
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
height: 700px;
}
.container {
width: 100%;
}
.container>div {
float: left;
}
.left {
width: 200px;
background-color: tomato;
}
.right {
width: 200px;
background-color: teal;
}
.main {
width: calc(100% - 400px);
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
flex实现三栏布局
给父级设置display:flex
优点:简单实用
缺点:需要考虑浏览器的兼容性
<!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>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
height: 700px;
}
.container {
display: flex;
}
.left {
width: 100px;
background-color: skyblue;
}
.right {
width: 200px;
background-color: tomato;
}
.main {
flex: 1;
background-color: teal;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
table实现三栏布局
给父级设置display:table 然后让子元素都是 display: table-cell;
表格布局的兼容性很好,在flex布局不兼容的时候,可以尝试表格布局。
表格布局也是有缺陷的,当其中一个单元格高度超出的时候,两侧的单元格也是会跟着一起变高的
<!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>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
height: 700px;
}
.container {
display: table;
width: 100%;
}
.left {
width: 100px;
display: table-cell;
background-color: skyblue;
}
.right {
width: 200px;
display: table-cell;
background-color: tomato;
}
.main {
display: table-cell;
background-color: teal;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
网格布局(grid布局)实现三栏布局
CSS新标准,创建网格布局最强大和最简单的工具,可以将页面分成具有简单属性的行和列,缺点:有兼容性问题
<!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>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.container {
display: grid;
grid-template-rows: 700px;
grid-template-columns: 100px auto 200px;
}
.left {
background-color: tomato;
}
.right {
background-color: teal;
}
.main {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
圣杯(双飞翼)布局
利用定位实现两侧固定中间自适应
1.父盒子设置左右 padding 值
2.给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处
3.中间盒子自适应 具体 CSS 代
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
height: 700px;
}
.father {
position: relative;
padding: 0 200px;
}
.left,
.right {
width: 200px;
position: absolute;
top: 0;
}
.left {
left: 0;
background-color: tomato;
}
.right {
right: 0;
background-color: teal;
}
.main {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
还有其他实现的方式,请多多指教哦,感谢!