1、浮动布局
注意html代码中三栏的先后顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
height: 200px;
}
.left {
width: 200px;
height: 100%;
background-color: red;
float: left;
}
.main {
height: 100%;
background-color: skyblue;
}
.right {
width: 200px;
height: 100%;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
优点就是: 比较简单,兼容性也比较好
缺点是:
浮动元素脱离文档流,要清除浮动,否则会带来很多问题,例如高度塌陷等
主要内容main在文档后侧,所以直到最后才能渲染主要内容
left和right是浮动在main上面的(可以通过查看元素宽度发现),当主栏高度高于侧栏高度时,main下面的部分内容会和页面同宽(解决办法下面)
=>我们可以通过给内容main添加样式overflow:hidden解决这个问题(BFC的规则中BFC区域不会和float box 重叠),但是要注意这个样式如果main的内容超出范围会隐藏掉。
延伸:
你知道有哪些清除浮动的方案?分别有什么优缺点?
什么是BFC?
2、绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
position: relative;
}
.left {
width: 200px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: red;
}
.main {
width: 100%;
height: 200px;
padding-left: 200px;
padding-right: 200px;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: skyblue;
}
.right {
width: 200px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
优点是方便快捷,不容易出问题,缺点是元素是脱离文档流的,意味着下面的所有子元素也会脱离文档流,这就导致了这种方法的有效性和可使用性是比较差的。
3、圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
padding: 0 200px;
}
.main {
width: 100%;
height: 300px;
background-color: skyblue;
float: left;
}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
height: 200px;
background-color: green;
float: right;
margin-right: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
=> 借用浮动分别把左栏和右栏浮动至主栏的两边,然后用外层容器的内边距将主栏两边推向中间一定宽度,给左右两栏腾出空间,最后借助相对定位 将左栏和右栏定位至合适位置即可。
这样布局的好处是:主栏在文档的前面,所以重要的东西会优先渲染。
缺点是:没那么容易理解,还有就是要注意清除浮动的问题
4、双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.main-wrap {
width: 100%;
padding: 0 200px;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
.main {
height: 300px;
background-color: skyblue;
}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 200px;
background-color: green;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="main-wrap">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
双飞翼布局是对圣杯布局的优化,以增加一个div为代价换取去掉了相对布局。
5、flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
.main {
flex: 1;
height: 300px;
background-color: skyblue;
order: 2;
}
.left {
width: 200px;
height: 200px;
background-color: red;
order: 1;
}
.right {
width: 200px;
height: 200px;
background-color: green;
order: 3;
}
</style>
</head>
<body>
<div class="box">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
felxbox布局是css3里新出的一个,它就是为了解决上述两种方式的不足出现的。 felxbox的缺点就是不能兼容IE8及以下浏览器。
6、table布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 100%;
height: 100px;
display: table;
}
.box>div {
display: table-cell;
}
.main {
background-color: skyblue;
}
.left {
width: 200px;
background-color: red;
}
.right {
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
表格布局可能大家对它存在一些误解,觉得表格布局麻烦,操作繁琐,但是在很多地方,表格布局还是很好用的,比如这个三栏布局。
它的优点是:兼容性好,在flex布局不兼容的时候,可以用表格布局代替。
缺点是:当其中一个单元格高度超出的时候,其他单元格也会一起变高,有时候这不是我们想要的结果。
7、网格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 200px auto 200px;
}
.main {
background-color: skyblue;
}
.left {
background-color: red;
}
.right {
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
网格布局是新出的一种布局方式,但是目前兼容性不太好。