前言
css布局很多时候偏向喜欢在页面一边调试一边看效果，只要最后是自己想要的效果就结了，不了了之，这种面向调试写样式，总是会事倍功半。今日总结下多栏布局，争取做到不多写一行css。保证每行代码是有灵魂的，多些几次就可以做到胸有成足，刻意训练n次，这样以后写css。就再也不会面向调试编程了。加油~
假设高度已知，请写出三栏布局，其中左，右宽各300px,中间自适应。
1.浮动布局
css：
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.float .left {
float: left;
width: 300px;
background-color: chartreuse;
}
.float .right {
float: right;
width: 300px;
background-color: cadetblue;
}
.float .center {
width: auto;
background-color: tomato;
}
</style>
html：
<section class="layout float">
<h1>浮动布局</h1>
<article>
<div class="left">左边</div>
<div class="right">
</div>
<div class="center">
<div>
优点：兼容性较好;
<br>
缺点：使用浮动以后，元素脱离文档流，如果处理不好会带来很多问题，这是该方法本身的局限性。
</div>
</div>
</article>
</section>
如图：
当中间内容过于多的时候，内容就会溢出。思考：如何让中间内容不延伸出去，依然垂直方向排列。解答：运用BFC原理即可。给中间盒子加一句overflow:hidden;让其形成BFC。这样盒子内部的元素就不会影响外部盒子。
添加css代码如下：
.float .center {
width: auto;
background-color: tomato;
/* add */
overflow: hidden;
}
如图添加效果图：
2.绝对定位布局
css代码：
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.absolute {
overflow: hidden;
}
.absolute article div {
min-height: 100px;
position: absolute;
}
.absolute .left {
left: 0px;
width: 300px;
background-color: green;
}
.absolute .right {
right: 0;
width: 300px;
background-color: greenyellow;
}
.absolute .center {
left: 300px;
right: 300px;
background-color:tomato;
}
</style>
html：
<!-- 绝对定位 -->
<section class="layout absolute">
<h1>绝对定位</h1>
<article>
<div class="left">左边</div>
<div class="center">
<div>
优点：快捷
<br>
缺点：由于布局已经脱离文档流，意味着下面所有子元素也必须脱离文档流，导致了该方案的可使用性较差。
</div>
<h1></h1>
</div>
<div class="right">右边</div>
</article>
</section>
如图：
总结：如果中间内容超出宽度会怎么样？
如图：
3.flexbox布局
css代码：
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.flex article {
display: flex;
}
.flex .left {
background-color: blue;
width: 300px;
}
.flex .right {
background-color: green;
width: 300px;
}
.flex .center {
flex: 1;
background-color: orchid;
}
</style>
html代码：
<section class="layout flex">
<h1>flex布局</h1>
<article>
<div class="left">左边</div>
<div class="center">
<div>flex布局是在浮动布局和绝对定位布局之后，在CSS3中新出现的一种布局方式，flex布局就是为解决前面两种方式的缺点而出现的，是一种比较完美的解决方案</div>
</div>
<div class="right">右边</div>
</article>
</section>
效果图：
总结：中间内容过多的话，会出现什么效果？解答：左右两栏的高度会被撑起来。这个效果是开发的时候期望的样子。完美！
效果图：
teble布局：
css代码：
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.table .left-center-right {
width: 100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: red;
}
.layout.table .center {
background: yellow;
}
.layout.table .right {
width: 300px;
background: blue;
}
</style>
html代码：
<!-- table佈局 -->
<section class="layout table">
<h1>table布局</h1>
<article class="left-center-right">
<div class="left">左边</div>
<div class="center">
</div>
<div class="right">右边</div>
</article>
</section>
效果图：
总结：如果中间内容超出最低高会怎么样？左右两栏会跟着中间的高度保持一致。
效果图：
5.grid布局
css代码：
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.grid article {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.grid .left {
background-color: slateblue;
}
.grid .center {
background-color: red;
}
.grid .right {
background-color: yellow;
}
</style>
html代码：
<!-- grid布局 -->
<section class="layout grid">
<h1>grid布局</h1>
<article>
<div class="left">左边</div>
<div class="center">
</div>
<div class="right">右边</div>
</article>
</section>
效果图：
总结：中间内容过多会发生什么呢？
效果图：
三栏布局，上下固定，中间自适应
1.flexbox布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body, .layout{
height: 100%;
}
</style>
</head>
<body >
<!-- flexBox定位 -->
<section class="layout twoLayout">
<style>
.twoLayout {
display: flex;
flex-direction: column;
}
.twoLayout .top{
height: 50px;
background-color: yellowgreen;
}
.twoLayout .center{
background-color: red;
flex:1
}
.twoLayout .bottom{
background-color: rosybrown;
height: 50px;
}
</style>
<div class="top">title</div>
<div class="center">
<h1>flexbox布局</h1>
</div>
<div class="bottom">bottom</div>
</section>
</body>
</html>
效果图：
2.绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
.layout {
height: 100%;
}
</style>
</head>
<body>
<!-- absolute定位 -->
<section class="layout" >
<style>
section div{
width: 100%;
}
.top{
position: absolute;
top:0;
height: 100px;
background: rosybrown;
}
.bottom{
position: absolute;
bottom:0;
height: 100px;
background: royalblue;
}
.center{
position:absolute;
top:100px;
bottom: 100px;
background-color: salmon;
}
</style>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</section>
</body>
</html>
效果图：
3.table布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
.layout {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<!-- table定位 -->
<section class="layout">
<style>
.layout {
display: table;
width: 100%;
}
.layout div {
display: table-row;
}
.top {
height: 100px;
background-color: sandybrown;
}
.center {
background-color: seagreen;
}
.bottom {
background-color: sienna;
height: 100px;
}
</style>
<div class="top">
<div>中间一定要内容，不然页面出不来东西</div>
</div>
<div class="center">
因为display:table-row;相当于把<div class="center"></div>转成《tr》而《tr》标签里面一定要有内容
</div>
<div class="bottom">
一定要有内容
</div>
</section>
</body>
</html>
效果图：
4.grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
.layout {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<!-- grid定位 -->
<section class="layout">
<style>
.layout{
display: grid;
/* 行高：row-height;列宽：columns-width; */
grid-template-rows: 100px auto 100px;
grid-template-columns: 100%;
}
.top{
height: 100px;
background-color: sienna;
}
.center{
background-color: springgreen;
height: auto;
}
.bottom{
height: 100px;
background-color: skyblue;
}
</style>
<div class="top">
</div>
<div class="center">
</div>
<div class="bottom">
</div>
</section>
</body>
</html>
效果图：
总的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
</style>
</head>
<body>
<!-- 浮动布局 -->
<section class="layout float">
<h1>浮动布局</h1>
<style>
.float .left {
float: left;
width: 300px;
background-color: chartreuse;
}
.float .right {
float: right;
width: 300px;
background-color: cadetblue;
}
.float .center {
width: auto;
background-color: brown;
}
</style>
<article>
<div class="left">左边</div>
<div class="right">
</div>
<div class="center">
<div>
优点：兼容性较好;
<br>
缺点：使用浮动以后，元素脱离文档流，如果处理不好会带来很多问题，这是该方法本身的局限性。
</div>
</div>
</article>
</section>
<!-- 绝对定位 -->
<section class="layout absolute">
<h1>绝对定位</h1>
<style>
.absolute {
overflow: hidden;
}
.absolute article div {
min-height: 100px;
position: absolute;
}
.absolute .left {
left: 0px;
width: 300px;
background-color: green;
}
.absolute .right {
right: 0;
width: 300px;
background-color: greenyellow;
}
.absolute .center {
left: 300px;
right: 300px;
background-color: red;
}
</style>
<article>
<div class="left">左边</div>
<div class="center">
<div>
优点：快捷，配合js使用不容易出问题
<br>
缺点：由于布局已经脱离文档流，意味着下面所有子元素也必须脱离文档流，导致了该方案的可使用性较差。
</div>
</div>
<div class="right">右边</div>
</article>
</section>
<!-- flex布局 -->
<section class="layout flex">
<h1>flex布局</h1>
<style>
.flex {
margin-top: 110px;
}
.flex article {
display: flex;
}
.flex .left {
background-color: blue;
width: 300px;
}
.flex .right {
background-color: green;
width: 300px;
}
.flex .center {
flex: 1;
background-color: red;
}
</style>
<article>
<div class="left">左边</div>
<div class="center">
<div>flex布局是在浮动布局和绝对定位布局之后，在CSS3中新出现的一种布局方式，flex布局就是为解决前面两种方式的缺点而出现的，是一种比较完美的解决方案</div>
</div>
<div class="right">右边</div>
</article>
</section>
<!-- table佈局 -->
<section class="layout table">
<h1>table布局</h1>
<style>
.layout.table .left-center-right {
width: 100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: red;
}
.layout.table .center {
background: yellow;
}
.layout.table .right {
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left">左边</div>
<div class="center">
</div>
<div class="right">右边</div>
</article>
</section>
<!-- grid布局 -->
<section class="layout grid">
<h1>grid布局</h1>
<style>
.grid article {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.grid .left {
background-color: slateblue;
}
.grid .center {
background-color: red;
}
.grid .right {
background-color: yellow;
}
</style>
<article>
<div class="left">左边</div>
<div class="center">
</div>
<div class="right">右边</div>
</article>
</section>
</body>
</html>
效果图：
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
