● 两栏布局
左侧固定宽度,右侧自适应宽度
5种方式布局
● float + margin 布局
● 定位 + margin 布局
● flex 布局
● calc()布局
● table 布局
html部分:
<div class="wrapper">
<aside></aside>
<div class="content"></div>
</div>
方法一:float + margin
将左边元素固定宽度,并设置为浮动,使其脱离文档流。右边元素的左margin设置为左侧元素的宽度值。
<style>
*{
margin: 0;
padding:0;
}
aside {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
.content {
margin-left: 200px;
height: 100px;
background-color: yellow;
}
</style>
方法二:定位 + margin
与第一种相似:注意将父盒子设置为相对定位
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
position: relative;
}
aside {
position: absolute;
width: 200px;
height: 100px;
background-color: red;
}
.content {
margin-left: 200px;
height: 100px;
background-color: yellow;
}
</style>
方法三:flex
父盒子设置 display: flex
<style>
*{
padding:0;
margin:0;
}
.wrapper {
display: flex;
}
aside {
/* grow / shrink / basis */
flex: 0 0 200px;
background-color:red;
}
.content {
/* aside的grow为0,content grow为1,content独享剩下的空间 */
flex : 1;
height: 100px;
background-color: yellow;
}
</style>
方法四:calc()
左右盒子:一个左浮,一个右浮
calc()计算的宽度:减去的宽度为左侧固定的宽度
<style>
*{
padding:0;
margin: 0;
}
aside {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
.content {
float: right;
width:calc( 100% - 200px );
height: 100px;
background-color: yellow;
}
</style>
方法五:table
父盒子设置为display: table;
子盒子设置为display: table-cell;
table 中的display属性:
table : 指定对象作为块级元素的表格
inline-table:指定对象为内联元素级的表格
table-caption: 指定对象作为表格的标题
table-cell: 指定对象作为表格单元格
table-row-group:指定对象作为表格行组
table-header-group: 指定对象作为表格的标题组
table-footer-group: 指定对象作为表格脚注组
<style>
*{
padding:0;
margin: 0;
}
.wrapper {
display: table;
width: 100%;
}
aside {
display: table-cell;
width: 200px;
height: 100px;
background-color: red;
}
.content {
display: table-cell;
height: 100px;
background-color: yellow;
}
</style>
● 三栏布局
7种方式布局
● float + margin 布局
● 定位 + margin 布局
● flex 布局
● table 布局
● 圣杯布局
● 双飞翼布局
● margin负值布局
方法一: float + margin
左右盒子浮动,中间盒子加左右margin值,值分别为左右盒子的宽度
注意:这三个div的顺序必须是将主体盒子放在最后面,左右盒子的顺序任意。
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
<style>
*{
padding: 0;
margin: 0;
}
body {
width: 100%;
}
.left {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
.main {
margin-left: 200px;
margin-right: 200px;
background-color: blue;
height: 100px;
}
.right {
float: right;
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
方法二:定位 + margin
与float差不多
<style>
*{
padding: 0;
margin:0;
}
.left {
position: absolute;
top:0;
left: 0;
width: 200px;
height: 100px;
background-color: red;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background-color: yellow;
}
.main {
margin:0 200px;
height: 100px;
background-color: blue;
}
</style>
方法三:flex()
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
<style>
*{
padding: 0;
margin: 0;
}
body {
width: 100%;
display: flex;
}
.left {
flex: 0 1 200px;
height: 100px;
background-color: red;
}
.right {
flex: 0 1 200px;
height: 100px;
background-color: blue;
}
.main {
flex: 1;
height: 100px;
background-color: yellow;
}
</style>
方法四:table
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
<style>
*{
padding: 0;
margin: 0;
}
body {
display: table;
width: 100%;
}
.left,
.right
{
display: table-cell;
width: 200px;
height: 100px;
background-color: red;
}
.main {
display: table-cell;
height: 100px;
background-color: blue;
}
</style>
方法五:圣杯
1:HTML部分一定先写main中间盒子,必须先渲染。
2:三个盒子设置float: left
3:中间盒子宽度width: 100%独占一行
4:使用margin-left属性将左右两边的盒子拉回与中间盒子同一行
.left{ margin-left: -100%};向左走一个父盒子的宽度
.right{ margin-left: 负的自身宽度}
5: 父盒子设置padding给两边盒子留出位置(设置box-sizing)
6:左右盒子使用相对定位占据padding部分,都需要左移自身宽度,避免遮挡中间盒子的内容。
<body>
<div class="parent">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
<style>
*{
padding: 0;
margin: 0;
}
.parent{
/* 父盒子设置padding为左右两个盒子空出位置,以免遮挡中间盒子的内容 */
padding: 0 200px;
box-sizing: border-box;
}
.left {
width: 200px;
height: 200px;
background-color: blue;
float: left;
/* 使其去上一行 */
margin-left: -100%;
/* 定位到正确的位置 */
position: relative;
left: -200px;
}
.main {
width:100%;
height: 200px;
float: left;
background-color: red;
}
.right {
width:200px;
float: left;
height: 200px;
background-color: yellow;
/* 使其去上一行 */
margin-left: -200px;
/* 定位到正确的位置 */
position: relative;
left: 200px;
}
</style>
方法六:双飞翼
与圣杯模式相似,只是中间盒子增加一个内容盒子,用内容盒子设置左右margin,留给左右盒子,避免内容被遮挡。(不需要定位了)
1:中间盒子宽度width:100%;独占一行
2:三个盒子设置float: left;
3:使用margin-left属性将左右两边的盒子拉回与中间盒子同一行
.left{ margin-left: -100%};向左走一个父盒子的宽度
.right{ margin-left: 负的自身宽度}
4: 中间主盒子里面的内容盒子设置左右margin,避免被遮挡内容
<body>
<div class="main">
<div class="content">nei</div>
</div>
<div class="left">内容</div>
<div class="right">内容</div>
</body>
<style>
*{
padding: 0;
margin: 0;
}
body {
width: 100%;
}
.main,
.left,
.right
{
height: 100px;
float: left;
}
.main {
width: 100%;
background-color: blue;
}
.main .content {
margin: 0 200px;
}
.left {
width: 200px;
background-color: red;
margin-left: -100%;
}
.right {
width: 200px;
background-color: yellow;
margin-left: -200px;
}
</style>
方法七:margin负值
在圣杯与双飞翼的基础上适当改变。
直接设置中间盒子width: 100%独占一行,设置左右padding为左右盒子留出位置,并且设置box-sizing:border-box;使其变为ie盒模型。
<style>
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
/* padding: 0 200px; */
}
.left,
.main,
.right {
/* position: relative; */
float: left;
height: 100px;
}
.main {
width: 100%;
background-color: blue;
/*
设置padding防止内容被遮挡
设置box-sizing保证宽度不变
*/
padding: 0 200px;
box-sizing: border-box;
}
.left {
width: 200px;
/* left: -200px; */
background-color: red;
/* 调整浮动的位置到中间列的左侧 */
margin-left: -100%;
}
.right {
width: 200px;
background-color: yellow;
margin-left: -200px;
}
</style>
<body>
<div class="main">nei</div>
<div class="left">内容</div>
<div class="right">内容</div>
</body>
小结:后三种都是一样的思路,只是在避免内容遮挡这一块有所不同,个人觉得最后一种更好,既不用设置相对定位,也不用添加一个内容盒子。