CSS常见布局方式以及其实现方法
1.两栏布局
两栏布局通常为：左边宽度固定，右边宽度自适应。
方案一：float + margin
- 准备一个块级父元素，其中有两个子元素，分别作为左右两栏；
- 左边元素设置浮动，脱离标准流。
- 为防止右边元素被左边元素盖住，需要给右边元素加上稍大于左边元素宽度的外边距。
代码如下：
html
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
css
.left{
float: left;
width: 150px;
height: 200px;
background-color: teal;
}
.right{
margin-left: 160px; /* 左边距稍大于左边元素的宽度即可 */
background-color: tomato;
height: 200px;
}
效果如下：
这种是较为简单的实现方式。
方案二：float + BFC
1、准备一个块级父元素，父元素中有两个子元素，分别作为左右两栏；
2、将左元素设置浮动，这时左元素脱离文档流，右元素位置上移；
3、为防止右元素被左元素挡住，需要给右元素外加一个父元素，并触发该父容器的BFC。
代码如下：
html
<div class="box">
<div class="left">左边</div>
<div class="container">
<div class="right">右边</div>
</div>
</div>
css
.left{
width: 150px;
height: 200px;
background-color:wheat;
float: left;
}
.container{
/* 触发BFC，防止右边的块元素被左边的挡到 */
overflow: hidden;
}
.right{
height: 300px;
background-color: violet;
}
效果如下：
可以看到，右边元素不受左边元素的浮动影响，这就是 BFC 的作用。
方案三：定位 + margin
将父元素设置为相对定位，左元素设置为绝对定位，此时左边元素的位置是相对于父元素的，然后再给右元素设置margin-left值。
html
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
css
.box{
position: relative;
}
.left{
position: absolute;
left: 0;
width: 150px;
height: 200px;
background-color: burlywood;
}
.right{
margin-left: 160px;
height: 200px;
background-color: cadetblue;
}
效果：
这个也比较简单。
方案四：flex 布局
父元素设置display: flex，右元素设置flex: 1
即将右边元素放大到占满右边的所有剩余空间。
html
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
css
.box{
display: flex;
}
.left{
width: 150px;
height: 200px;
background-color: darkgray;
}
.right{
flex: 1;
height: 300px;
background-color: darkolivegreen;
}
效果：
方案五：float + margin 负值
- 将左元素设置左浮动，将右元素也设置左浮动，且宽度设置为100%；
- 由于右元素宽度太大被挤下来，这时将左元素设置
margin-right: -100%，父元素就可以往上移动； - 给右元素的子元素设置背景和
margin-left，并使margin-left稍微大于左元素的宽度。
html
<div class="box">
<div class="left">左边</div>
<div class="right">
<div class="content">右边</div>
</div>
</div>
css
.left{
float: left;
width: 150px;
height: 200px;
background-color: darkolivegreen;
margin-right: -100%;
}
.right{
float: left;
width: 100%;
}
.right .content{
background-color: darksalmon;
margin-left: 160px;
height: 200px;
}
效果：
2.三栏布局
三栏布局一般是左右两栏固定宽度，中间栏宽度自适应。
主要实践包括：圣杯布局、双飞翼布局。
方案一：float + margin
- 左元素设置左浮动，右元素设置右浮动；
- 中间元素设置
margin-left和margin-right。
html
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="center">中间</div>
</div>
css
.left{
float: left;
width: 150px;
height: 200px;
background-color: lightcoral;
}
.right{
float: right;
width: 150px;
height: 200px;
background-color: lightseagreen;
}
.center{
height: 200px;
background-color: mediumpurple;
margin: 0 160px;
}
效果：
但这种方式有一个缺点：
通常来说，中间部分存放着网页中最重要的内容，但这里中间部分被放到最下层了。
方案二：flex
- 将父元素设置
display: flex，左右元素设置固定宽度； - 中间元素设置
flex: 1，即自动占满剩余空间；
html
<div class="container">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
css
.container{
display: flex;
}
.left{
width: 150px;
height: 200px;
background-color: mediumpurple;
}
.center{
flex: 1;
height: 200px;
background-color: plum;
}
.right{
width: 150px;
height: 200px;
background-color: mediumpurple;
}
效果：
下面对两种经典的三列布局的几种实现方式进行介绍。
3.圣杯布局
圣杯布局和双飞翼布局都是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局(中间先加载渲染)。
3.1 利用 float + padding + margin 实现
- 首先要给中间父容器设置左右的
paddding，给左右容器预留出相应的宽度，比如将父容器左右的padding都设置为 200px。 - 然后分别为父容器中的三列子元素 left、content、right 设置宽度和浮动，同时对最下面 footer 清除浮动。
- 将中间 content 宽度设置为100%，即撑满父容器的内容区。
- 然后对左边left的div设置
margin-left:-100%(即向左移动200%，这是整个content自身的宽度)，然后再设置position为 relative，left设置 -200px，即再向左移动 200px，这样 left 容器就到了最左边的位置 - 接着对 right 容器，设置
margin-left:-200px,然后再将position设置为 relative，left设置为 200px。 - 最后记得对 footer 清除浮动。
代码如下：
<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>圣杯布局</title>
<style>
.header,.footer{
width:100%;
background-color: pink;
height:10px
}
.wrap{
padding-left: 200px;
padding-right: 200px;
background-color: rgba(146, 186, 245, 0.5);
}
#content{
background-color: aqua;
width:100%;
height:200px;
float:left;
}
#left{
background-color: blueviolet;
width:200px;
height:200px;
float:left;
position:relative;
margin-left:-100%;
left:-200px;
}
#right{
background-color:coral;
width:200px;
height:200px;
float:left;
position:relative;
margin-left:-200px;
left:200px;
}
.footer{
clear:both
}
</style>
</head>
<body>
<div class="header"></div>
<div class="wrap">
<div id="content"></div>
<div id="left"></div>
<div id ='right'></div>
</div>
<div class="footer"></div>
</body>
效果如下：
…
3.2 利用 flex 布局实现
实际上就是上面采用 flex 实现三列布局的方法。参考上面的介绍即可。
4.双飞翼布局
- 双飞翼布局也都是将 content\left\right 容器设置为浮动，但是它并没有给他们的父容器设置
padding, - 这里，比如 left 容器和 right 容器的
width都为 200px，然后 content 区域的width为 100%。 - 直接先给 left 容器设置
margin-left:-100%，这样 left 容器就覆盖到了content 区域的最左边。 - 然后给 right 容器设置
margin-left:-200px，这样 right 容器就覆盖到了 content 区域的最右边。 - 最后再给 content 容器中套一个 inner 容器，将 inner 容器的左右外边距都设置为 200px。
代码如下：
<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>双飞翼布局</title>
<style>
.header,.footer{
width:100%;
height:10px;
background-color: pink;
}
.footer{
clear:both
}
.item{
float:left;
}
.content{
width:100%;
height:200px;
background-color: blue;
}
.left{
width:200px;
height:200px;
background-color: aqua;
margin-left:-100%;
}
.right{
width:200px;
height:200px;
background-color: brown;
margin-left:-200px;
}
.inner{
margin:0 200px 0 200px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="wrap">
<div class="content item">
<div class="inner">
</div>
</div>
<div class="left item"></div>
<div class ='right item'></div>
</div>
<div class="footer"></div>
</body>
那么，这两种布局方式的区别在哪呢？
5.圣杯布局与双飞翼布局的区别
可以看出，圣杯布局和双飞翼布局的实现效果都一样，他们都给 content\left\right 设置了浮动，而且在HTML中的加载顺序都是中间先渲染，然后是左右再渲染。
不同的地方在于，圣杯布局是先给最外层容器设置了内部边距防止覆盖中间的内容层，然后再调整左右容器的位置。但是双飞翼布局则是通过给中间容器再套一个内容容器，来防止内容被左右容器遮挡。
7956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
