css布局使用,圣杯布局小结

等高分栏布局小结

澳门葡京,2016/02/06 · CSS ·
等高分栏

原文出处: 流云诸葛   

上一篇小说《圣杯布局小结》统计了两种常见的分栏布局方法,那个法子都足以完毕多栏页面下,所有栏的惊人可动态变化,某一栏宽度自适应的布局功用,能满意工作中广大布局须求。后来我在搜集更加多关于分栏布局的作品时,发现了一个新的题材,这些标题在头里那篇文章中也有情侣在评价里跟自己提起,就是什么样在完结分栏布局的还要确保每栏的可观一致。我发现那种等高分栏布局的情状,在网站内部其实也很常见,所以本文统计了三种可用的措施来解决那个新的必要。

圣杯布局小结

2016/01/30 · HTML5 · 1
评论 ·
圣杯布局

原稿出处: 流云诸葛   

圣杯布局,很久在此以前就听过,但是平昔都没详细摸底过,近年来因为做了一个项目,借鉴了薪人薪事那几个公司的出品页面,才第二回用到那种布局情势。于是就花了点时间,测了下它完毕广泛分栏布局的代码,每段代码都格外简单,但布局效能很完善,比我原先用的措施好用不少。本文是对它达成形式的局地计算,希望得以把那种技术引进给跟自己事先同一对它比较陌生的开发人员:)

目录

  • 常用居中
    1. 垂直居中
    2. 水平居中
    3. 笔直水平居中
  • 单列布局
  • 双列&三列布局

CSS 布局十八般武艺先生都在那边了

2017/03/25 · CSS ·
布局

原稿出处: 码蜂社   

1. 方法一:万能的flex

跟上篇作品分裂,这一次把flex那种艺术放在了第四位,因为比较起来,它是独具分栏布局方法里面,优点最多的,如果包容性允许的话,很有必不可少在其他时候都优先利用它做到页面布局。如若您打开上篇小说,找到尾数第二局地关于flex完成分栏布局的代码,或者把上篇小说提供的代码下载下来,直接预览flex_layout.html,你会意识上篇小说的那段代码其实已经到位了等高分栏布局,同一段代码,可以完成上篇小说中涉嫌的多种分栏布局,还足以兑现本文提到的等高布局的情况,那种能力别的方法确实不可以比拟。而它之所以能兑现等高布局,跟一个flex的css属性有关系,那个特性是:align-item。它的默许值是:stretch,在flex
item元素比如layout__main或layout__aside的惊人未定义或者为auto的情形下,会拉伸flex
item元素的可观或宽度,铺满flex的交叉轴,详细的法则可以透过上文提供的flex学习资源去领悟,那里只做一个简约的引用表达。

1. 从2个实在的须要说起

本年有2个品类,都是管理体系的系列,这体系型的界面特点基本都是左侧边栏突显菜单,右边呈现网页主体如故是顶部的导航栏突显菜单,导航栏以下突显网页主体,我那多少个档次都是第一种档次:

项目一:

澳门葡京 1

项目二:

澳门葡京 2

在做项目一的时候,选用了在此从前做ERP软件的一些做法,右侧的网页主体区域放置的是一个iframe,用来突显每个菜单点击之后的页面,那样各样菜单点击之后,外部页面都不会刷新,并且滚动也只爆发在iframe里面,外部页面的菜系区域和顶部导航栏的意况一向不会变动,用户操作起来尤其方便。这种界面布局的做法相当简单,只要侧边栏和网页主体区域都采纳一定定位即可:

<div class=”sidebar”></div> <div
class=”page-content”></div> .sidebar { position: absolute;
width: 200px; left: 0; bottom: 0; top: 50px; border-right: 1px solid
#E7E7E7; } .page-content { position: absolute; left: 205px; bottom: 0;
top: 50px; right: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="sidebar"></div>
<div class="page-content"></div>
 
.sidebar {
    position: absolute;
    width: 200px;
    left: 0;
    bottom: 0;
    top: 50px;
    border-right: 1px solid #E7E7E7;
}
 
.page-content {
    position: absolute;
    left: 205px;
    bottom: 0;
    top: 50px;
    right: 0;
}

是因为那几个序列是一个里面项目,所以使用那种界面结构完全是足以承受的,毕竟那只是一个管制连串,可以不那么在乎用户体验怎么着的。方今做项目二的时候,景况就分化了,那个项目是一个铺面级的保管应用,它不再是一个独自的管理种类,而是面向外部用户提供的涉企平台业务的一个巅峰应用,从用户体验的角度来说,项目一那种固定蠢笨的措施不太拿得出手给别人用,不然旁人一定会觉得你的拔取做的很low。相对于项目一的界面,项目二有以下特征:

1)菜单点击之后,界面是共同体刷新,没有iframe了;

2)侧边栏和主旨内容栏的中度都是不固定的;

3)网页滚动的时候,是页面全体滚动,而不是只滚动主体内容。

多少个礼拜前,看到薪人薪事融资的情报,心想那是个什么样公司,怎么从前都没听过,做怎么着业务的,于是就百度了下,注册了账号,进去体验了须臾间它的成品,后来发现它做的实在是一个SAAS应用,界面上看是一个非凡的保管体系的风格,不过总体体验还不易,当时就以为未来可能有参照借鉴的价值。正好前七天临时安排要做项目二,依照项目一提了有些必要,于是就悟出薪人薪事的使用了。只有3天时间,工作除了界面之外,还有4个事情模块的作用要马到成功,为了做到这么些东西,界面布局完全参照了薪人薪事的做法,由于原先没用过这种布局格局,所以觉得很奇特,就特意收集知识学习了一下,才意识这么些形式就是原先听过的圣杯布局。项目二所用的布局方法就是圣杯布局方式中侧边栏固定,主体内容栏自适应的一种做法。

常用居中

CSS布局

布局是CSS中一个生死攸关片段,本文统计了CSS布局中的常用技巧,包蕴常用的水准居中、垂直居中方法,以及单列布局、多列布局的有余贯彻格局(包罗传统的盒模型布局和相比新的flex布局达成),希望能给急需的同伙带来一些扶持。

2. 方法二:使用table或者伪table

上篇文章中还有其余三种布局方法没有介绍,第一种就是此处要说的table布局或者伪table布局。table布局用的就是table
tr
td那么些要素去贯彻,相信绝大多数web开发人员在入门html时,首先接触到的布局方法肯定就是table布局了,那种办法大约高效,用它做此外分栏布局都小意思,只是因为table的嵌套结构太多,html冗杂,又不便利DOM的操作和渲染,用来布局不适合语义,不问可知缺点较多,所以近年来的条件下,用的图景越来越少了。伪table布局其实跟table布局类似,只不过凭借css,可以让我们不直接动用table
tr td那些间接的表格元素,而是经过display: table, display: table-row,
display:
table-cell,改变元素的突显特性,让浏览器把那些因素当成table来渲染,那种渲染的变现跟用真实的table没有何差别,就连那多少个table专用的css属性,比如table-layout,border-collapse和border-spacing,都能暴发功能。table布局的主意已经很少被应用了,本文也就没须要再去介绍,不过伪table布局的章程值得学习一下,经过那二日的学习,发现伪table的艺术比较直接用表格布局,有过多的独到之处,值得运用到办事中去。然则在证实使用伪table布局的方法从前,得先驾驭部分伪table相关的学问:

1)可用以伪table表现的display属性值有:

澳门葡京 3

2)当把一个因素的display属性设置成以上列出的值后,就能够把那几个因素看成与该属性对应的报表元素,比如table-cell对应的就是td;同时,这几个因素会怀有跟表格元素一样的表征,比如display:
table或者inline-table的元素得以拔取table-layout,border-collapse和border-spacing那多少个原本唯有table才能奏效的品质;display:table-cell的元素跟td一样,对步长中度灵活,对margin值无反应,对padding有效。

3)关于table-cell还有一些要表明的就是,它会被其余部分CSS属性破坏,例如float,
position:absolute,所以那一个个特性不可能而且选拔。

4)跟直接使用表格元素不一样的是,在采纳表格元素的时候必要完全遵从表格元素嵌套结构,也就是下边那种:

<table> <thead> <th></th> </thead>
<tbody> <tr> <td></td> </tr>
</tbody> <tfoot> <th></th> </tfoot>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
    <thead>
        <th></th>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <th></th>
    </tfoot>
</table>

而使用伪table的那么些属性时,可以仅单独行使某一个属性,浏览器会在那一个元素的外层包裹缺失的来有限支撑伪table要素框嵌套结构的完整性,这一个框跟常提到的行框一样都是不可知的,网上有的文章里也把这种做法叫做匿名表格。下边的这些代码中,tb-cell元素的外层没有加display:
table-row和display: table的元素:

.tb-cell { display: table-cell; padding: 10px; border: 1px solid #ccc;
} <div class=”tb-cell”>这是第1个display:
table-cell;的元素。</div> <div
class=”tb-cell”>这是第2个display: table-cell;的元素。</div>

1
2
3
4
5
6
7
8
.tb-cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ccc;
}
 
<div class="tb-cell">这是第1个display: table-cell;的元素。</div>
<div class="tb-cell">这是第2个display: table-cell;的元素。</div>

这是第1个display: table-cell;的元素。这是第2个display:
table-cell;的元素。

1
这是第1个display: table-cell;的元素。这是第2个display: table-cell;的元素。

但是看到的功用是(青色背景是它们父层的一个包装元素: width:
800px;margin-left: auto;margin-right: auto):

澳门葡京 4

因为浏览器自动在那八个元素的外围,加了跟可以跟tr和table起相同效果的框,来含有那七个要素形成的框,所以那五个元素看起来就跟实际的表格效果同样。如若浏览器没有做那么些处理,那多少个元素之间是不容许没有空闲的,中间会有一个因为换行符展现出来的空格。那种活动抬高的框都是行内框,不是块级框。

接下去看看哪些通过这么些伪table的习性来完毕上文的分栏布局以及本文必要的等高分栏布局,玩法有众多:(正文相关源码下载)

玩法一:模拟直接用表格布局(对应源码中table_layout1.html)

这种措施的笔触是布局时完全根据表格的嵌套层次来拍卖,把display: table,
display: table-row, display:
table-cell都用上,相当于就是使用总体的table来做,比如说要兑现上文的布局三(3栏布局,2个侧面栏分别固定在左侧和右边,中间是焦点内容栏),就可以那样干:

<div class=”layout”> <div class=”layout__row”> <aside
class=”layout__col layout__aside
layout__aside–left”>右侧边栏宽度固定</aside> <div
class=”layout__col
layout__main”>内容栏宽度自适应<br>中度增加某些,旁边的可观都会自动伸张</div>
<aside class=”layout__col layout__aside
layout__aside–right”>右边边栏宽度固定</aside> </div>
</div>

1
2
3
4
5
6
7
<div class="layout">
    <div class="layout__row">
        <aside class="layout__col layout__aside layout__aside–left">左侧边栏宽度固定</aside>
        <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
        <aside class="layout__col layout__aside layout__aside–right">右侧边栏宽度固定</aside>
    </div>
</div>

<style type=”text/css”> .layout { display: table; width: 100%; }
.layout__row { display: table-row; } .layout__col { text-align:
center; display: table-cell; } .layout__col + .layout__col {
border-left: 10px solid #fff; } .layout__main { background-color:
#4DBCB0; } .layout__aside { width: 200px; background-color: #daf1ef;
} </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    .layout {
        display: table;
        width: 100%;
    }
    .layout__row {
        display: table-row;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
</style>

功效照旧不行效果,而且天生协理等高布局:

澳门葡京 5

其一布局原理跟使用table是全然一样的,所以拔取起来非凡不难(以上提供的是针对性上文布局三的完结,其他多个布局的兑现不会再相继介绍了,源码里面也不会提供,因为相对相比不难)。

那种伪table布局有何样特点吗:

1)相比较直接用表格元素,那种做法不需求考虑语义,表格元素是有语义的,首假如用来呈现网页上列表型的数量内容,纵然可以做到布局,不过布局结构都是没有语义的,所以一贯用表格不合适,而那种伪table布局的风味就是:它从未语义,可是足以像表格那样布局;

2)html的层次结构比较直接用table元素也要不难一些,大家那边只用到了3层,直接用table元素的话也许还有tbody这一层;

3)比较上文提到的那多少个布局方法,如圣杯布局和双飞翼布局,这一个做法在css方面相对不难,在html方面也只多了一层嵌套;

4)缺点是分栏之间的区间不可以用margin和padding来做,要是用margin,那么些特性在display:
table-cell的要素上常有不会卓有功效;假设用padding,这像demo里面各栏的背景象就都会连到一块,做不出间隔的功用,假如在layout__col里面再嵌套一层,在这一层设置背景象的话,又会增添html的层次,也不是很好。我那里是投了个巧,用border处理了一下。

玩法二:去掉display: table-row(对应源码中的table_layout2.html)

前方说过,浏览器会用匿名表格的章程,添加缺失的框,所以玩法一中的代码,把layout-row完全去掉,一点都不影响布局成效:

div class=”layout”> aside class=”layout__col layout__aside
layout__aside–left”>右侧边栏宽度固定aside> div
class=”layout__col
layout__main”>内容栏宽度自适应br>中度增添一些,旁边的惊人都会自动伸张div>
aside class=”layout__col layout__aside
layout__aside–right”>左边边栏宽度固定aside> div>

1
2
3
4
5
div class="layout">
    aside class="layout__col layout__aside layout__aside–left">左侧边栏宽度固定aside>
    div class="layout__col layout__main">内容栏宽度自适应br>高度增加一点,旁边的高度都会自动增加div>
    aside class="layout__col layout__aside layout__aside–right">右侧边栏宽度固定aside>
div>

style type=”text/css”> .layout { display: table; width: 100%; }
.layout__col { text-align: center; display: table-cell; }
.layout__col + .layout__col { border-left: 10px solid #fff; }
.layout__main { background-color: #4DBCB0; } .layout__aside {
width: 200px; background-color: #daf1ef; } style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
style type="text/css">
    .layout {
        display: table;
        width: 100%;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
style>

玩法三:去掉display: table(对应源码中的table_layout3.html)

依照玩法二,可以试想一下是或不是能再把display:
table这几个质量给去掉,反正浏览器还会再添加框来包裹:

<div class=”layout”> <aside class=”layout__col
layout__aside layout__aside–left”>左侧边栏宽度固定</aside>
<div class=”layout__col
layout__main”>内容栏宽度自适应<br>中度扩张某些,旁边的可观都会活动增加</div>
<aside class=”layout__col layout__aside
layout__aside–right”>左侧边栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__col layout__aside layout__aside–left">左侧边栏宽度固定</aside>
    <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
    <aside class="layout__col layout__aside layout__aside–right">右侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout__col { text-align: center;
display: table-cell; } .layout__col + .layout__col { border-left:
10px solid #fff; } .layout__main { background-color: #4DBCB0; }
.layout__aside { width: 200px; min-width: 200px; background-color:
#daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

效果是:

澳门葡京 6

那几个并不曾达到我们的效能,因为我急需重点内容栏可以自适应宽度。暴发那些功效的原由是怎么,就是因为尚未加展现display:
table这一层,浏览器自动加了一个框,然而那些框是行内框,导致重心内容栏突显的宽窄就跟内容的幅度一致了。为了缓解这一个题材,可以那样干,html结构不变,css稍加改动:

.layout__main { width: 3000px; background-color: #4DBCB0; }
.layout__aside { width: 200px; min-width: 200px; background-color:
#daf1ef; }

1
2
3
4
5
6
7
8
9
10
.layout__main {
    width: 3000px;
    background-color: #4DBCB0;
}
 
.layout__aside {
    width: 200px;
    min-width: 200px;
    background-color: #daf1ef;
}

首要的代码就是新民主主义革命新增的那两行,首先给主题内容栏设置一个很长的涨幅,而且不得不用实际的长度设置,无法用百分比,然后给侧边栏设置一个小小宽度,免得主体内容栏把侧边栏的肥瘦给挤掉了。那几个规律就是因为display:
table-cell的功力,导致layout__main跟layout__aside表现出跟td元素一样的特征,td默认的宽窄就是可活动调整的,即使宽度设置的很大,也不会撑破table的肥瘦,那里尽管可怜自动抬高的框看不到,不过这一个框的最大开间也就是浏览器的增幅,layout__main不会打破那几个幅度的,所以可以放心使用。

玩法四:去掉layout这一层包裹元素(对应源码:table_layout4.html)

假如网站相比较不难,去掉layout这一层包裹元素也是足以的:

<header>顶部</header> <aside class=”layout__col
layout__aside layout__aside–left”>左边边栏宽度固定</aside>
<div class=”layout__col
layout__main”>内容栏宽度自适应<br>中度伸张一些,旁边的莫大都会活动扩充</div>
<aside class=”layout__col layout__aside
layout__aside–right”>右边边栏宽度固定</aside>
<footer>底部</footer>

1
2
3
4
5
<header>顶部</header>
<aside class="layout__col layout__aside layout__aside–left">左侧边栏宽度固定</aside>
<div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
<aside class="layout__col layout__aside layout__aside–right">右侧边栏宽度固定</aside>
<footer>底部</footer>

<style type=”text/css”> .layout__col { text-align: center;
display: table-cell; line-height: 50px; } .layout__col +
.layout__col { border-left: 10px solid #fff; } .layout__main {
width: 3000px; background-color: #4DBCB0; } .layout__aside { width:
200px; min-width: 200px; background-color: #daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
        line-height: 50px;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        width: 3000px;
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

以上多种做法都能落到实处我们想要的分栏等高布局,包容性方面,不考虑IE8及以下,别的浏览器大概小难题。

是因为匿名表格的出力,导致选用伪table布局的点子变得十分简短,上文之所以没提到那个做法,是因为完全不通晓有匿名表格那回事,我也是写那篇小说才学习到的,学完未来,发现又找到了一个做分栏布局的好法子,希望眼前的那几个介绍能协助你左右好这么些用法。实际上伪table的那么些属性,越发是table-cell,用途丰裕多,本文没有办法一一介绍,然则能提供一个思路,未来干活中可能有过多别样布局场景,大家都得以考虑用table-cell来拍卖。

2. 圣杯布局的思想意识完结格局

利用圣杯布局的形式,可以轻松达成上边的布局成效:

澳门葡京 7

上边来挨家挨户表达上图中三种布局功效的落到实处方式(正文相关代码下载,本有的的布局方法在代码中对应grail_layout{1,5}.html)。

1)布局一:2栏搭架子,侧边栏固定在左侧,左侧是主体内容栏:

<div class=”layout”> <aside
class=”layout__aside”>侧边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>

1
2
3
4
<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>

<style type=”text/css”> .layout:after { clear: both; content: ” “;
display: table; } .layout__aside, .layout__main { float: left; }
.layout { padding-left: 210px; } .layout__main { width: 100%; }
.layout__aside { width: 200px; margin-left: -210px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding-left: 210px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
        margin-left: -210px;
    }
</style>

效果是:

澳门葡京 8

2)布局二:2栏搭架子,侧边栏固定在右手,右边是重点内容栏:

<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>侧边栏宽度固定</aside> </div>

1
2
3
4
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout:after { clear: both; content: ” “;
display: table; } .layout { padding-right: 210px; } .layout__main {
width: 100%; float: left; } .layout__aside { float: right; width:
200px; margin-right: -210px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout {
        padding-right: 210px;
    }
    .layout__main {
        width: 100%;
        float: left;
    }
    .layout__aside {
        float: right;
        width: 200px;
        margin-right: -210px;
    }
</style>

效果是:

澳门葡京 9

3)布局三:3栏搭架子,2个侧面栏分别固定在左侧和右侧,中间是大旨内容栏:

<div class=”layout”> <aside class=”layout__aside
layout__aside–left”>右侧边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside
layout__aside–right”>左边边栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside–left">左侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout:after { clear: both; content: ” “;
display: table; } .layout__aside, .layout__main { float: left; }
.layout { padding:0 210px; } .layout__main { width: 100%; }
.layout__aside { width: 200px; } .layout__aside–left { margin-left:
-210px; } .layout__aside–right { margin-right: -210px; float: right;
} </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding:0 210px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        margin-left: -210px;
    }
    .layout__aside–right {
        margin-right: -210px;
        float: right;
    }
</style>

效果是:

澳门葡京 10

4)布局四:3栏搭架子,2个侧边栏同时一定在左侧,右侧是主旨内容栏:

<div class=”layout”> <aside class=”layout__aside
layout__css布局使用,圣杯布局小结。aside–first”>第1个侧面栏宽度固定</aside> <aside
class=”layout__aside
layout__aside–second”>第2个侧面栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside–first">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside layout__aside–second">第2个侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>

<style type=”text/css”> .layout:after { clear: both; content: ” “;
display: table; } .layout__aside, .layout__main { float: left; }
.layout { padding-left: 420px; } .layout__main { width: 100%; }
.layout__aside { width: 200px; } .layout__aside–first {
margin-left: -420px; } .layout__aside–second { margin-left: -210px; }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding-left: 420px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–first {
        margin-left: -420px;
    }
    .layout__aside–second {
        margin-left: -210px;
    }
</style>

效果是:

澳门葡京 11

5)布局五:3栏搭架子,2个侧边栏同时一定在左边,左侧是主导内容栏:

<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside
layout__aside–first”>第1个侧面栏宽度固定</aside> <aside
class=”layout__aside
layout__aside–second”>第2个侧面栏宽度固定</aside>
</div>

1
2
3
4
5
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside layout__aside–first">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside layout__aside–second">第2个侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout:after { clear: both; content: ” “;
display: table; } .layout { padding-right: 420px; } .layout__main {
width: 100%; float: left; } .layout__aside { width: 200px; float:
right; } .layout__aside–first { margin-right: -210px; }
.layout__aside–second { margin-right: -420px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout {
        padding-right: 420px;
    }
    .layout__main {
        width: 100%;
        float: left;
    }
    .layout__aside {
        width: 200px;
        float: right;
    }
    .layout__aside–first {
        margin-right: -210px;
    }
    .layout__aside–second {
        margin-right: -420px;
    }
</style>

效果是:

澳门葡京 12

PS:

1)本文提供的这一个布局方法,比网上看出的愈来愈从简一些,首假如因为不考虑包容IE8及以下,不考虑把layout__main这些因素放在最前头,固然经典的做法都务求把layout__main做法放在前方,那样可以让网页主体内容优先渲染,我以为这种考虑是一心多余的,2个因素的渲染顺序不一致,实际上的用户体验差距又有多大啊,为了一个双眼看不到的歧异,而利用更扑朔迷离的做法,不值得;

2)css布局类的命名选用了BEM的命名规则,那些可以扶持您写出结构化,规范化的css,有趣味的可以去探听:

3)在采纳上述办法时,需注意html结构中layout__main与layout__aside的顺序;

笔直居中

单行文本垂直居中

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
   line-height: 200px;
}

图形垂直居中

<div class="parent">
    ![](image.png)
</div>

.parent {
    line-height: 200px;
}
.parent img {
    vertical-align: middle;
}

table方法

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    display: table;
    height: 100px;
}

.child {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

flex方法

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
   display: flex;
   align-items: center;
}

css translate

.parent {
    height: 100px;
    /*不设置高度则要设置如下*/
    /*position:relative;*/
}

.child {
    /*不设置高度则要设置绝对定位*/
    /*position:absolute;*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

目录

  1. 常用居中方法
    • 水平居中
    • 垂直居中
  2. 单列布局
  3. 二列&三列布局
    • float+margin
    • position+margin
    • 圣杯布局(float+负margin)
    • 双飞翼布局(float+负margin)
    • flex布局
  4. 总结

3. 办法三:使用相对化定位

上文没有介绍的其余一种分栏布局方法就是那里要介绍的绝对定位。之所以没介绍那些艺术,是因为上文介绍的都是分栏自适应布局的方法,而相对定位的做法,不可以完全形成大家想要的分栏自适应布局,分栏自适应有四个规范:第一是中央内容栏宽度自适应,那点相对定位是足以成功的;第二点是所有栏的冲天都能动态变化,并且不可能导致父容器中度塌陷,无法在各栏内部出现滚动或溢出的情事,那点相对定位不简单形成适用所有场景。而本文又把这种布局方法拿出来介绍,是因为相对定位做等高布局很不难,所以用绝对定位做等高分栏布局是一种有效的艺术,只是那种格局适用的情景有部分范围,须求基于实际情形考虑是否要使用。

做法一:所有栏都采纳相对定位(对应源码中absolute_layout1.html)

<header>顶部</header> <div class=”layout”> <aside
class=”layout__aside
layout__aside–left”>左边边栏宽度固定</aside> <div
class=”layout__main”>内容栏宽度自适应</div> <aside
class=”layout__aside
layout__aside–right”>右边边栏宽度固定</aside> </div>
<footer>底部</footer>

1
2
3
4
5
6
7
<header>顶部</header>
<div class="layout">
    <aside class="layout__aside layout__aside–left">左侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应</div>
    <aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
</div>
<footer>底部</footer>

<style type=”text/css”> .layout { height: 300px; position:
relative; } .layout__aside, .layout__main { position: absolute; top:
0; bottom: 0; } .layout__main { left: 210px; right: 210px; }
.layout__aside { width: 200px; } .layout__aside–left { left: 0; }
.layout__aside–right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
    .layout {
        height: 300px;
        position: relative;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        left: 0;
    }
    .layout__aside–right {
        right: 0;
    }
</style>

效果:

澳门葡京 13

那种布局方法的特性是:

1)主体内容栏是自适应的;

2)所有栏完全等高,效果跟flex布局和伪table布局的效应等同;

从那两点来看,那种纯属定位的章程依然相比较好用的,不过它有一个格外大的利用范围,就是父元素的莫大没有艺术通过它的其中因素给撑起来,要用的话,必须想方法让父元素有中度,适合做父元素高度可见或者全屏布局。比如以下这一个代码就是全屏布局的一个例证(对应源码中absolute_layout2.html):

header>顶部header> div class=”layout”> aside
class=”layout__aside
layout__aside–left”>左边边栏宽度固定aside> div
class=”layout__main”>内容栏宽度自适应div> aside
class=”layout__aside
layout__aside–right”>左侧边栏宽度固定aside> div>
footer>底部footer>

1
2
3
4
5
6
7
header>顶部header>
div class="layout">
    aside class="layout__aside layout__aside–left">左侧边栏宽度固定aside>
    div class="layout__main">内容栏宽度自适应div>
    aside class="layout__aside layout__aside–right">右侧边栏宽度固定aside>
div>
footer>底部footer>

<style type=”text/css”> html,body { margin: 0; height: 100%; }
footer { position: absolute; bottom: 0; width: 100%; } .layout { width:
100%; position: absolute; top: 50px; bottom: 50px; } .layout__aside,
.layout__main { position: absolute; top: 0; bottom: 0; }
.layout__main { left: 210px; right: 210px; } .layout__aside { width:
200px; } .layout__aside–left { left: 0; } .layout__aside–right {
right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style type="text/css">
    html,body {
        margin: 0;
        height: 100%;
    }
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .layout {
        width: 100%;
        position: absolute;
        top: 50px;
        bottom: 50px;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        left: 0;
    }
    .layout__aside–right {
        right: 0;
    }
</style>

效果:

澳门葡京 14

做法二:侧边栏相对定位,主体内容栏保持流式布局(对应源码中absolute_layout3.html)

<div class=”layout”> <aside class=”layout__aside
layout__aside–left”>右侧边栏宽度固定</aside> <div
class=”layout__main”>内容栏宽度自适应<br>高度增添一些,旁边的惊人都会自行增添</div>
<aside class=”layout__aside
layout__aside–right”>右边边栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside–left">左侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
    <aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout { position: relative; }
.layout__aside { position: absolute; top: 0; bottom: 0; }
.layout__main { margin: 0 210px; } .layout__aside { width: 200px; }
.layout__aside–left { left: 0; } .layout__aside–right { right: 0;
} </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
    .layout {
        position: relative;
    }
    .layout__aside {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        margin: 0 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        left: 0;
    }
    .layout__aside–right {
        right: 0;
    }
</style>

效果:

澳门葡京 15

以此办法的风味是:

1)主体内容栏是大幅度自适应的;

2)所有栏也是一点一滴等高的;

上面的代码中,layout__main通过magin来给侧边栏留出空间,其实也足以在layout元素上添加padding来拍卖,功用是一模一样的。这么些措施相比较前一个措施好一点的是,父元素的冲天可以透过重点内容栏给撑起来,然则经过也推动了一个新题材,就是内容栏高度不够的时候,侧边栏就会油然则生溢出或者滚动,解决这些新题材的艺术有2个:第一,如果侧边栏的内容都是已知的,并且没有折叠展开那种会变动侧边栏内容惊人的意义,那么可以给layout设置一个min-height来处理;第二,若是侧边栏的情节是动态的,除了给layout加min-height之外,还得在每便变更侧边栏内容的时候,主动去调整主体内容栏的可观,即使主体内容栏的冲天小于侧边栏的冲天,就要更新主体内容栏的万丈。不过要是你的内容栏的内容很多,侧边栏内容较少的话,就不要考虑这么些新题材了。

纯属定位的做法就是这般,第一种限制较高;第两种多少强一些,在有些场所下,可能还得凭借JS来处理,所以综合起来不到底一个不行好的法子。唯有你的布局须求恰好知足它的尺度时,可能才会设想动用它,就如上文中本身提议的门类一的急需,就必然要用相对定位的布局来做。

3. 圣杯布局传统已毕格局的一种变体

第2片段介绍的办法,使用门槛是:

1)layout元素按照分栏布局的渴求安装合适的padding,比如布局一,需安顿padding-left;

2)layout__main和layout__aside元素都亟待转移,layout__main需配置float:
left;layout__aside需依照分栏布局必要布置合适的float值,比如布局一,需配置为float:
left;而布局二需配备float: right;

3)layout__main和layout__aside的逐条也很紧要,具体内容可相比较之下前面多样布局的html;

4)layout__aside需根据分栏布局需要,配置合适的margin-left或margin-right,比如布局一,需配备margin-left;布局二需配备margin-right。

即便如此本人不喜欢早晚要滴水穿石把layout__main放在眼前,但是从第2有的那种艺术的笔触,衍生出的此外一种办法,却只得需要始终把layout__main放在最前方,那种变体做法,也被称作双飞翼布局。上边来探望双飞翼布局的达成情势(考虑到篇幅难题,本处仅提供布局三的代码,要想打听种种布局的详实措施,可以由此在第2片段提供的下载链接下载源码去打听,本有的的布局方法在代码中对应wing_layout{1,5}.html)

1)布局三:3栏搭架子,2个侧面栏分别固定在左边和左边,中间是重点内容栏:

<div class=”layout__main-wrapper”> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>
<aside class=”layout__aside
layout__aside–left”>左边边栏宽度固定</aside> <aside
class=”layout__aside
layout__aside–right”>右边边栏宽度固定</aside> <footer
class=”clear”>底部</footer>

1
2
3
4
5
6
<div class="layout__main-wrapper">
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<aside class="layout__aside layout__aside–left">左侧边栏宽度固定</aside>
<aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
<footer class="clear">底部</footer>

<style type=”text/css”> .clear { clear: both; }
.layout__main-wrapper,.layout__aside { float: left; }
.layout__main-wrapper { width: 100%; } .layout__main { margin: 0
210px; } .layout__aside { width: 200px; } .layout__aside–left {
margin-left: -100%; } .layout__aside–right { margin-left: -200px; }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    .clear {
        clear: both;
    }
    .layout__main-wrapper,.layout__aside {
        float: left;
    }
    .layout__main-wrapper {
        width: 100%;
    }
    .layout__main {
        margin: 0 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        margin-left: -100%;
    }
    .layout__aside–right {
        margin-left: -200px;
    }
</style>

那段代码的意义与第2有的布局三的机能一样,那种布局的秘诀是:

1)可以没有layout这一层包裹元素;

2)浮动清除需在外部因素上处理;

3)float和margin属性的设置方向相对统一,基本都是一个倾向即可;

4)布局四和布局五贯彻起来,双飞翼布局还索要借助position:relative才行,相对要复杂一点。

水平居中
<div class="parent">
     <div class="child">child</div>
</div>

行内元素:对父元素设置text-align:center;

定宽块状元素: 设置左右margin值为auto;

不定宽块探花素:
设置子元素为display:inline,然后在父元素上设置text-align:center;

css3 translate

.parent {
position: relative;
}
.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

通用方案: flex布局,对父元素设置display:flex;justify-content:center;

.parent,
.child {
    border: 1px solid red;
}
.child {
     /*display: inline;*/
}
.parent {
     /*text-align: center;*/
    display: flex;
    justify-content: center;
}```
#####水平垂直居中

position: absolute/fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background: red;

position: fixed/absolute;
width: 160px;
height: 160px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: pink;

position: absolute;
width: 80px;
height: 80px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: green;

#### 单列布局
![](http://upload-images.jianshu.io/upload_images/2065390-25c6a8e53ff1f2f9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
特征:**定宽、水平居中**
常见的单列布局有两种:
一种是header、content、footer宽度都相同,其一般不会占满浏览器的最宽宽度,但当浏览器宽度缩小低于其最大宽度时,宽度会自适应。
一种是header、footer宽度为浏览器宽度,但content以及header和footer里的内容却不会占满浏览器宽度。

对于第一种,对header、content、footer统一设置width或max-width,并通过margin:auto实现居中。

<div class=”layout”>
<div id=”header”>头部</div>
<div id=”content”>内容</div>
<div id=”footer”>尾部</div>
</div>

.layout {
    /* width: 960px; */
    /*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
}

对于第二种,header、footer的内容宽度为100%,但header、footer的内容区以及content统一设置width 或 max-width,并通过margin:auto实现居中。

<div id=”header”>
<div class=”layout”>头部</div>
</div>
<div id=”content” class=”layout”>内容</div>
<div id=”footer”>
<div class=”layout”>尾部</div>
</div>

.layout {
    /* width: 960px; */
    /*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
}


#### 二列&三列布局
![](http://upload-images.jianshu.io/upload_images/2065390-06862f5dabd3ef11.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
二列布局的特征是侧栏固定宽度,主栏自适应宽度。三列布局的特征是两侧两列固定宽度,中间列自适应宽度。
之所以将二列布局和三列布局写在一起,是因为二列布局可以看做去掉一个侧栏的三列布局,其布局的思想有异曲同工之妙。对于传统的实现方法,主要讨论上图中前三种布局,经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局,对于flex布局,实现了上图的五种布局。
######a. float+margin
**原理说明**:设置两个侧栏分别向左向右浮动,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据浏览器窗口自适应。

<div id=”content”>
<div class=”sub”>sub</div>
<div class=”extra”>extra</div>
<div class=”main”>main</div>
</div>

**布局步骤**:
对两边侧栏分别设置宽度,并对左侧栏添加左浮动,对右侧栏添加有浮动。
对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。

.sub{ width: 100px; float: left;}
.extra{ width: 200px; float: right;}
.main{ margin-left: 100px; margin-right: 200px;}

**一些说明**:
注意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到)。  
这种布局方式比较简单明了,但缺点是渲染时先渲染了侧边栏,而不是比较重要的主面板。

**二列的实现方法**
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。
######b. position+margin
**原理说明**:通过绝对定位将两个侧栏固定,同样通过外边距给两个侧栏腾出空间,中间列自适应。

<div class=”sub”>left</div>
<div class=”main”>main</div>
<div class=”extra”>right</div>

**布局步骤**:
对两边侧栏分别设置宽度,设置定位方式为绝对定位。
设置两侧栏的top值都为0,设置左侧栏的left值为0, 右侧栏的right值为0。
对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。

.sub, .extra { position: absolute; top: 0; width: 200px;}
.sub { left: 0;}
.extra { right: 0; }
.main { margin: 0 200px;}

**一些说明**:
本方法不限制DOM书写顺序,先写主面板会使主面板部分优先渲染(一般主面板会比侧栏内容重要)。
与上一种方法相比,本种方法是通过定位来实现侧栏的位置固定。
如果中间栏含有最小宽度限制,或是含有宽度的内部元素,则浏览器窗口小到一定程度,主面板与侧栏会发生重叠。

**二列的实现方法**
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。
######c. 圣杯布局(float + 负margin)
**原理说明**:
主面板设置宽度为100%,主面板与两个侧栏都设置浮动,常见为左浮动,这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来,左侧栏的负边距为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容,在外层设置左右padding值为左右侧栏的宽度,给侧栏腾出空间,此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的,两个侧栏并不会像我们理想中的停靠在左右两边,而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局,调整两个侧栏到相应的位置。

<div id=”bd”>
<div class=”main”></div>
<div class=”sub”></div>
<div class=”extra”></div>
</div>

**布局步骤**:
三者都设置向左浮动。
设置main宽度为100%,设置两侧栏的宽度。
设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。
设置main的padding值给左右两个子面板留出空间。
设置两个子面板为相对定位,sub的left值为负的sub宽度,extra的right值为负的extra宽度。

<style>
.main {
float: left;
width: 100%;
}

.sub {
    float: left;
    width: 190px;
    margin-left: -100%;
    position: relative;
    left: -190px;
}

.extra {
    float: left;
    width: 230px;
    margin-left: -230px;
    position: relative;
    right: -230px;
}

#bd {
    padding: 0 230px 0 190px;
}

</style>

**一些说明**
DOM元素的书写顺序不得更改。
主面板部分优先渲染(一般主面板会比侧栏内容重要)。
当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。

**二列的实现方法**
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的padding-right值,其他操作相同。反之亦然。
######d. 双飞翼布局(float + 负margin )
**原理说明**:
双飞翼布局和圣杯布局的思想有些相似,都利用了浮动和负边距,但双飞翼布局在圣杯布局上做了改进,在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言,main的margin值变化便不会影响两个侧栏,因此省掉了对两侧栏设置相对布局的步骤。

<div class=”main-wrap”>
<div class=”main”>#main</div>
</div>
<div class=”sub”></div>
<div class=”extra”></div>

**布局步骤**:
三者都设置向左浮动。
设置main-wrap宽度为100%,设置两个侧栏的宽度。
设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。
设置main的margin值给左右两个子面板留出空间。

<style>
.main-wrap {
float: left;
width: 100%;
}

.sub {
    float: left;
    width: 190px;
    margin-left: -100%;
}

.extra {
    float: left;
    width: 230px;
    margin-left: -230px;
}

.main {
    margin: 0 230px 0 190px;
}

</style>

**一些说明**
主面板部分优先渲染(一般主面板会比侧栏内容重要)。
圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局,以及对应的left和right值。
通过引入相对布局,可以实现三栏布局的各种组合,例如对右侧栏设置position: relative; left: 190px;,可以实现sub+extra+main的布局。

**二列的实现方法**
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置main-wrap的margin-right值,其他操作相同。反之亦然。
######e. flex布局

[Flex 布局教程:语法篇 - 阮一峰的网络日志](http://link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2015/07/flex-grammar.html%3Futm_source%3Dtuicool)
[Flex 布局教程:实例篇 - 阮一峰的网络日志](http://link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2015/07/flex-examples.html)
以下是五种布局的flex布局代码:

<div class=”layout”>
<aside class=”aside”>侧边栏宽度固定</aside>
<div class=”main”>主内容栏宽度自适应</div>
</div>
<div class=”layout”>
<div class=”main”>主内容栏宽度自适应</div>
<aside class=”aside”>侧边栏宽度固定</aside>
</div>
<div class=”layout”>
<aside class=”aside”>右边边栏宽度固定</aside>
<div class=”main”>主内容栏宽度自适应</div>
<aside class=”aside”>右边边栏宽度固定</aside>
</div>
<div class=”layout”>
<aside class=”aside”>第1个侧面栏宽度固定</aside>
<aside class=”aside”>第2个侧面栏宽度固定</aside>
<div class=”main”>主内容栏宽度自适应</div>
</div>
<div class=”layout”>
<div class=”main”>主内容栏宽度自适应</div>
<aside class=”aside”>第1个侧面栏宽度固定</aside>
<aside class=”aside”>第2个侧面栏宽度固定</aside>
</div>

<style>
.layout {
display: flex;
}

.main {
    flex: 1;
}

.aside {
    width: 200px;
}

</style>

1.常用居中艺术

居中在布局中很宽泛,大家假如DOM文档结构如下,子元素要在父元素中居中:

XHTML

<div class=”parent”> <div class=”child”></div>
</div>

1
2
3
<div class="parent">
    <div class="child"></div>
</div>

4. 办法四:借助边框,背景完成假等高

眼前介绍了两种分栏等高布局,有table布局,伪table布局,相对定位布局,flex布局,这多种布局方法在完成等高布局时,属于完全等高的场馆,就是说他们布局出来的页面,各栏的真正中度都是一样的,并且在任意栏的内容动态变化时,其余栏的冲天都能相应地自动调整,若是布局的时候用的是那多少个布局方法,那么等高的题材就不存在了。可是回放一下上文内容的话,上文提到的3种布局格局:圣杯布局,双飞翼布局,float布局,不用JS的话,就不能成功那种完全等高的效能。这两种布局,只好考虑借助边框和背景完结视觉上的等高,也就是假等高的做法。毕竟从效益上的话,如果没有设置背景和边框的话,尽管是全然等高,视觉上也看不出来,所以假等高的做法是值得采纳的。

做法一:利用背景图片

以布局容器宽度固定的左中右三栏布局表明这些做法的步子,首先制作一张高度较小,宽度跟布局容器宽度相同的背景图片,把那张图片作为布局容器的背景图垂直平铺。这张背景图须求跟页面一样也是分栏,而且每栏的涨幅和栏之间的间距都跟页面布局里面的栏位宽度和栏位间隔相同,那样才能担保,背景图片的各种栏位与页面里面的种种栏位重合。因为页面里面的每个栏位底下,都有一个背景图片的栏位跟它对应,所以固然某一栏中度不够,不过视觉上这几个栏位的可观跟布局容器的冲天是一律的,那就是看重背景图来落成视觉等高的原理。这些做法的经文例子就是,它的布局成效是如此的:

澳门葡京 16

看起来那是一个三栏等高布局,分栏是透过float完结的,等高却不是一点一滴等高,而是经过背景图片落成的,它在布局容器上用了下边那张背景图:

澳门葡京 17

澳门葡京 18

它的布局html结构是(德雷斯顿克掉的是header,导航栏,footer,跟分栏布局尚未提到,所以注掉了):

澳门葡京 19

下一场各栏只要都向左浮动,配置好宽度就行:

澳门葡京 20澳门葡京 21澳门葡京 22

前方表明这么些做法的步子包涵举的例子都对准的是布局容器宽度固定的左中右三栏布局,假设是自适应的分栏布局,又该怎么处理?下边以上文圣杯布局的布局三怎么依靠背景图片做到等高效果来说明(为了减小篇幅,其它四种布局不会相继表明,不过那七种布局在源码中都有demo页面可查看,分别对应grail_bg_layout{1,5}.html)。

布局三:3栏搭架子,2个侧面栏分别固定在左边和右手,中间是中央内容栏:

div class=”layout–wrapper”> div class=”layout”> aside
class=”layout__aside
layout__aside–left”>左边边栏宽度固定aside> div
class=”layout__main”>内容栏宽度自适应br>中度增添一些,旁边的惊人看起来都跟内容栏中度一致div>
aside class=”layout__aside
layout__aside–right”>左边边栏宽度固定aside> div> div>

1
2
3
4
5
6
7
div class="layout–wrapper">
    div class="layout">
        aside class="layout__aside layout__aside–left">左侧边栏宽度固定aside>
        div class="layout__main">内容栏宽度自适应br>高度增加一点,旁边的高度看起来都跟内容栏高度一样div>
        aside class="layout__aside layout__aside–right">右侧边栏宽度固定aside>
    div>
div>

<style type=”text/css”> .layout:after { content: ” “; clear: both;
display: table; } .layout__aside, .layout__main { float: left;
height: 100%; } .layout–wrapper { background: url(aside_left.png) left
top repeat-y #4DBCB0; } .layout { background: url(aside_right.png)
right top repeat-y; padding:0 210px; } .layout__main { width: 100%; }
.layout__aside { width: 200px; } .layout__aside–left { margin-left:
-210px; } .layout__aside–right { margin-right: -210px; float: right;
} </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style type="text/css">
    .layout:after {
        content: " ";
        clear: both;
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
        height: 100%;
    }
    .layout–wrapper {
        background: url(aside_left.png) left top repeat-y #4DBCB0;
    }
    .layout {
        background: url(aside_right.png) right top repeat-y;
        padding:0 210px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        margin-left: -210px;
    }
    .layout__aside–right {
        margin-right: -210px;
        float: right;
    }
</style>

效果:

澳门葡京 23

心想事成那个等高效果的关键是:

1)去掉在layout__aside layout__main上设置的背景观;

2)制作2张背景图片,宽度都是210 * 10,分别用来做三个侧边栏的背景:

aside_left.png :
澳门葡京 24

aside_right.png:
澳门葡京 25

3) html结构有些调整下,加一层wrapper

4)layout–wrapper的背景如下设置:

background: url(aside_left.png) left top repeat-y #4DBCB0;

那般右边边栏和内容栏就都有了背景,左边边栏与内容栏之间的间隔效果也出去了。

5)layout的背景如下设置:

background: url(aside_right.png) right top repeat-y;

那般左侧边栏就有了背景,左边边栏与内容栏之间的间距效果也出去了。

如上就是接纳背景图做假等高效果的全体内容,这一个做法对于要用背景来突显等高效果的布局是老大好用的一个艺术,尽管网上都说它的缺点是用到了图片,布局一改,图片就要改,我个人觉得那并不是老毛病,因为这么的必要变动,第一是不能防止,第二是改变地次数不必然很多,第三哪怕变了改起来也是两三分钟的事,即使自己会点PS,那弄起来就更简单了。能解决难题的粗略方法就是最好的法子。

做法二: 利用边框重叠

先是得说那个做法,适合要用边框来显示等高效果的布局,也就是说各栏不能有背景,否则看起来边框是等高了,不过背景没有等高。它的法则要分成两局地来说,若是是2栏布局,做法比较简单,比如左右分栏的布局,给侧边栏加一个入手框,给内容栏加一个右边框,然后给内容栏加上负的margin-left,让2个边框重合,那样无论哪个栏位内容多,边框重叠之后的莫大就跟全体的中度一致了,也就高达了俺们想要的等高效果;假如是多栏布局,那种边框重叠的章程不能成功所有场景下的视觉等高,比如说左中右三栏布局,现在是按边框重叠的艺术落到实处了下等高,当左边栏的情节动态增添很多时,左边侧边栏跟内容栏的边框全体低度,并不会动态扩张,然后就会形成错层的法力,对于那种气象,可以动用相对定位,用额外的空元素模拟栏与栏之间的边框效果。

上面以上文圣杯布局的布局一和布局三怎么借助边框重叠和模仿成功等高效果来注脚(为了减少篇幅,其余布局不会挨个表达,不过那两种布局在源码中都有demo页面可查阅,分别对应grail_border_layout{1,3}.html)。

1)布局一:2栏搭架子,侧边栏固定在左手,左侧是主体内容栏:

<div class=”layout”> <aside
class=”layout__aside”>侧边栏宽度固定</aside> <div
class=”layout__main”>内容栏宽度自适应<br>中度增添某些,旁边的万丈看起来都跟内容栏中度一样</div>
</div>

1
2
3
4
<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度看起来都跟内容栏高度一样</div>
</div>

<style type=”text/css”> .layout:after { content: ” “; clear: both;
display: table; } .layout__aside, .layout__main { float: left; }
.layout { padding-left: 201px; } .layout__main { width: 100%;
margin-left: -1px; border-left: 1px solid #ccc; } .layout__aside {
width: 200px; border-right: 1px solid #ccc; margin-left: -201px; }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    .layout:after {
        content: " ";
        clear: both;
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding-left: 201px;
    }
    .layout__main {
        width: 100%;
        margin-left: -1px;
        border-left: 1px solid #ccc;
    }
    .layout__aside {
        width: 200px;
        border-right: 1px solid #ccc;
        margin-left: -201px;
    }
</style>

要点是:

1)要双重调整layout的padding值,和layout__aside的margin值,栏与栏之间不可以有距离;

2)layout__main设置-1px的margin-left和1px的border-left;layout__aside设置1px的border-right

效果:

澳门葡京 26

布局三:3栏搭架子,2个侧面栏分别固定在左手和右手,中间是主体内容栏:

<div class=”layout”> <aside class=”layout__division
layout__division–left”></aside> <aside
class=”layout__division layout__division–right”></aside>
<aside class=”layout__aside
layout__aside–left”>左边边栏宽度固定<br>再加点东西<br>再加点东西</aside>
<div
class=”layout__main”>内容栏宽度自适应<br>中度伸张一些</div>
<aside class=”layout__aside
layout__aside–right”>左边边栏宽度固定</aside> </div>

1
2
3
4
5
6
7
<div class="layout">
    <aside class="layout__division layout__division–left"></aside>
    <aside class="layout__division layout__division–right"></aside>
    <aside class="layout__aside layout__aside–left">左侧边栏宽度固定<br>再加点东西<br>再加点东西</aside>
    <div class="layout__main">内容栏宽度自适应<br>高度增加一点</div>
    <aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout:after { content: ” “; clear: both;
display: table; } .layout__aside, .layout__main { float: left;
height: 100%; } .layout { padding:0 201px; position: relative; }
.layout__main { width: 100%; } .layout__aside { width: 200px; }
.layout__aside–left { margin-left: -201px; } .layout__aside–right
{ margin-right: -201px; float: right; } .layout__division { position:
absolute; border-left: 1px solid #ccc; height: 100%; }
.layout__division–left { left:200px; } .layout__division–right {
right:200px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style type="text/css">
    .layout:after {
        content: " ";
        clear: both;
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
        height: 100%;
    }
    .layout {
        padding:0 201px;
        position: relative;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        margin-left: -201px;
    }
    .layout__aside–right {
        margin-right: -201px;
        float: right;
    }
    .layout__division {
        position: absolute;
        border-left: 1px solid #ccc;
        height: 100%;
    }
    .layout__division–left {
        left:200px;
    }
    .layout__division–right {
        right:200px;
    }
</style>

效果:

澳门葡京 27

布局三以此做法的法则比真正的边框重叠还要不难些,但是不如那种方式简单,毕竟要扩展并未用的html元素,所以不到底一个好措施。

最终综合相比背景和边框那三种假等高做法,更值得推介的是做法一,边框那种效益,通过背景图也是可以做出来的,而且边框可以落到实处的视觉效果有限,利用边框的多栏等高布局还得扩展冗余的HTML元素,缺陷相比较领会。

4. 圣杯布局的纯浮动已毕

前方两种办法都有2个共同点:

1)layout__main或layout__main-wrapper和layout__aside都会同时浮动;

2)都得仰仗负值属性达成。

实际还存在一种越发简明的做法,不须求浮动layout__main或layout__main-wrapper,也不需求看重负值属性,只要浮动layout__aside,给layout__main加上适量的margin值,就可以运用生成元素的特点,完结想要的分栏布局效率。照旧以布局三为例,表明那种办法,其它格局得以从源码中查看,对应的是float_layout{1,5}.html:

<aside class=”layout__aside
layout__aside–left”>右侧边栏宽度固定</aside> <aside
class=”layout__aside
layout__aside–right”>左边边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> <footer
class=”clear”>底部</footer>

1
2
3
4
<aside class="layout__aside layout__aside–left">左侧边栏宽度固定</aside>
<aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
<footer class="clear">底部</footer>

<style type=”text/css”> .clear { clear: both; } .layout__main {
margin: 0 210px; } .layout__aside–left { width: 200px; float: left; }
.layout__aside–right { width: 200px; float: right; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .clear {
        clear: both;
    }
 
    .layout__main {
        margin: 0 210px;
    }
 
    .layout__aside–left {
        width: 200px;
        float: left;
    }
 
    .layout__aside–right {
        width: 200px;
        float: right;
    }
</style>

那段代码的成效与第2有的搭架子三的功力一样,那种艺术的特征是:

1)清除浮动需依靠外部因素;

2)layout__main下面无法动用clear属性。

水平居中

子元素为行内元素仍旧块探花素,宽度一定仍然幅度未定,选拔的布局方案差距。上面进行解析:

行内元素:对父元素设置text-align:center;
定宽块探花素: 设置左右margin值为auto;
不定宽块状元素:
设置子元素为display:inline,然后在父元素上安装text-align:center;
通用方案:
flex布局,对父元素设置display:flex;justify-content:center;

5. 结束语

正文介绍了4种可以形成完全等高的分栏自适应布局方法,对于上文的两种分栏布局:圣杯布局,双飞翼布局,float布局,也提供了一个简约便捷的法子可以成功视觉上的假等高效果,那个主意都是保障有效的,只要满意自己的干活须要,喜欢用哪一类就用哪一种,毕竟工作的目标是完成工作对象,而不是尝试哪个种类工具好用。但借使集团的制品不考虑这么些陈旧的浏览器的话,我认为所有的布局只须求多个章程:flex,table-cell和position,其余的圣杯布局,双飞翼布局,float布局就让它变成经典,留在自己的博客统计中就好。PS:
就算上文我在举荐圣杯布局,可是自己早就打算把自身的项目二的布局格局换成table-cell来搞了。

正文内容繁多,相信拖延你多多时辰,谢谢阅读,提前祝你新年开心:)

本文相关源码下载

1 赞 5 收藏
评论

澳门葡京 28

5. 圣杯布局的flex已毕

flex布局是一种新的网页布局方式,方今的包容性如下:

澳门葡京 29

要是您还并未询问过flex布局,提议你迅速去上学,尽管它在pc上包容性还不怎么难题,不过在移动端已经完全不成难题了,微信官方推出的weui这么些框架就大批量地利用了那种布局,以下是2个上学那种布局形式的不胜好的资源:

flex布局即将成为网页布局的首选方案,当您看到用flex来兑现圣杯布局的代码有多简单的时候,你就会以为眼前那句话一点都不错。使用flex,可以只用同一段css完毕第2部分涉及的二种布局:

<div class=”layout”> <aside
class=”layout__aside”>侧边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>
<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>侧边栏宽度固定</aside> </div>
<div class=”layout”> <aside
class=”layout__aside”>左侧边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>右侧边栏宽度固定</aside> </div>
<div class=”layout”> <aside
class=”layout__aside”>第1个侧面栏宽度固定</aside> <aside
class=”layout__aside”>第2个侧面栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>
<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>第1个侧面栏宽度固定</aside> <aside
class=”layout__aside”>第2个侧面栏宽度固定</aside>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">左侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout { display: flex; } .layout__main
{ flex: 1; } .layout__aside { width: 200px; } .layout >
.layout__aside:not(:first-child), .layout >
.layout__main:not(:first-child){ margin-left: 10px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
    .layout {
        display: flex;
    }
    .layout__main {
        flex: 1;
    }
    .layout__aside {
        width: 200px;
    }
    .layout > .layout__aside:not(:first-child),
    .layout > .layout__main:not(:first-child){
        margin-left: 10px;
    }
</style>

功效与第2有些每种布局做法的结果一模一样,可是代码收缩了成百上千,而且适用的景观更加多,比如4栏搭架子,5栏布局。

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块探花素运用的方案是分歧的。

父元素一定,子元素为单行内联文本:设置父元素的height等于行高line-height
父元素一定,子元素为多行内联文本:设置父元素的display:table-cellinline-block,再设置vertical-align:middle;
块探花素:设置子元素position:fixed(absolute),然后设置margin:auto;
通用方案:
flex布局,给父元素设置{display:flex; align-items:center;}

7. 结束语

正文提供了4种圣杯布局的不二法门,每种格局在现阶段依然将来的做事中,肯定会有无数气象都要求选取,所以有必不可少完全驾驭这几个办法,内容不多,也不复杂,希望能对您有用,谢谢阅读:)

补充:原本只想介绍圣杯布局这一种艺术,后来以为那样的始末有点粗糙,于是又专门去学习了其余2种分栏布局的章程,补充到了作品里面(也就是第3、4有些),所以文章即使题为圣杯布局,但实质上讲的是分栏布局的常用方法,只有第2部分才能算是标准的圣杯布局的始末。由于本文在公布前后编辑了反复,导致标题跟内容有点脱节,请勿见怪:(

本文相关代码下载

1 赞 21 收藏 1
评论

澳门葡京 30

2.单列搭架子

澳门葡京 31特征:定宽、水平居中

广泛的单列布局有二种:

  • 一种是headercontentfooter增幅都无异,其貌似不会占满浏览器的最宽宽度,但当浏览器宽度压缩低于其最大开间时,宽度会自适应。
  • 一种是headerfooter宽窄为浏览器宽度,但content以及headerfooter里的内容却不会占满浏览器宽度。

对此第一种,对headercontentfooter集合设置widthmax-width,并通过margin:auto完结居中。

DOM文档:

XHTML

<div class=”layout”> <div id=”header”>头部</div>
<div id=”content”>内容</div> <div
id=”footer”>尾部</div> </div>

1
2
3
4
5
<div class="layout">
  <div id="header">头部</div>
  <div id="content">内容</div>
  <div id="footer">尾部</div>
</div>

CSS清单:

CSS

.layout{ /* width: 960px;
*//*安装width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
max-width: 960px; margin: 0 auto; }

1
2
3
4
5
  .layout{
  /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
  }

对于第三种,headerfooter的内容宽度为100%,但headerfooter的内容区以及content集合安装max-width,并通过margin:auto贯彻居中。

DOM文档:

XHTML

<div id=”header”> <div class=”layout”>头部</div>
</div> <div id=”content” class=”layout”>内容</div>
<div id=”footer”> <div class=”layout”>尾部</div>
</div>

1
2
3
4
5
6
7
<div id="header">
  <div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>

CSS清单:

CSS

.layout{ /* width: 960px;
*//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
max-width: 960px; margin: 0 auto; }

1
2
3
4
5
  .layout{
  /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
  }

3. 二列&三列布局

澳门葡京 32

二列布局的特征是侧栏固定宽度,主栏自适应宽度。三列布局的特性是两侧两列固定宽度,中间列自适应宽度。

因此将二列布局和三列布局写在协同,是因为二列布局可以当做去掉一个侧栏的三列布局,其布局的盘算有异曲同工之妙。对于传统的贯彻情势,紧要啄磨上图中前两种布局,经典的涵盖侧栏的二栏布局以及包涵左左侧栏的三栏布局,对于flex布局,完结了上图的二种布局。

a. float+margin

原理表明:设置八个侧栏分别向左向右浮动,中间列通过异地距给三个侧栏腾出空间,中间列的升幅根据浏览器窗口自适应。

DOM文档:

XHTML

<div id=”content”> <div class=”sub”>sub</div> <div
class=”extra”>extra</div> <div
class=”main”>main</div> </div>

1
2
3
4
5
<div id="content">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>

布局步骤:

  1. 对两边侧栏分别安装宽度,并对左边栏添加左浮动,对右边栏添加有浮动。
  2. 对主面板设置左右外边距,margin-left的值为左侧栏的增进率,margin-right的值为左侧栏的增加率。

CSS清单:

CSS

.sub{ width: 100px; float: left; } .extra{ width: 200px; float: right; }
.main{ margin-left: 100px; margin-right: 200px; }

1
2
3
4
5
6
7
8
9
10
11
12
.sub{
    width: 100px;
    float: left;
}
.extra{
    width: 200px;
    float: right;
}
.main{
    margin-left: 100px;
    margin-right: 200px;
}

局地注解:

* 注意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到)。* 那种布局情势对比简单明了,但缺点是渲染时先渲染了侧边栏,而不是相比重大的主面板。

二列的落到实处方式

假定是左手带有侧栏的二栏布局,则去掉右边栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。

b. position+margin

规律表达:通过相对定位将三个侧栏固定,同样通过异地距给七个侧栏腾出空间,中间列自适应。

DOM文档:

XHTML

<div class=”sub”>left</div> <div
class=”main”>main</div> <div
class=”extra”>right</div>

1
2
3
<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

布局步骤:

  1. 对两边侧栏分别设置宽度,设置一定格局为相对定位。
  2. 安装两侧栏的top值都为0,设置左边栏的left值为0, 右边栏的right值为0。
  3. 对主面板设置左右外乡距,margin-left的值为右边栏的小幅,margin-right的值为左侧栏的宽度。

CSS清单:

CSS

.sub, .extra { position: absolute; top: 0; width: 200px; } .sub { left:
0; } .extra { right: 0; } .main { margin: 0 200px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.sub, .extra {
    position: absolute;
    top: 0;
    width: 200px;
}
.sub {
    left: 0;
}
.extra {
    right: 0;
}
.main {
    margin: 0 200px;
}

有的验证:

  • 与上一种方法相比较,本种方法是经过固定来完结侧栏的岗位固定。
  • 如若中间栏含有细小宽度限制,或是含有宽度的内部因素,则浏览器窗口小到自然水平,主面板与侧栏会发出重叠。

二列的落到实处方式

一旦是左手带有侧栏的二栏布局,则去掉左边栏,不要设置主面板的margin-right值,别的操作相同。反之亦然。

c. 圣杯布局(float + 负margin + padding + position)

规律表明

主面板设置宽度为100%,主面板与多个侧栏都设置浮动,常见为左浮动,那时七个侧栏会被主面板挤下去。通过负边距将转移的侧栏拉上来,右侧栏的负边距为100%,刚好是窗口的涨幅,因而会从主面板上边的左手跑到与主面板对齐的左侧,右边栏此时变动在主面板上面的左侧,设置负边距为负的本人宽度刚好浮动到主面板对齐的右侧。为了幸免侧栏遮挡主面板内容,在外围设置左右padding值为左左边栏的幅度,给侧栏腾出空间,此时主面板的肥瘦压缩。由于侧栏的负margin都是争持主面板的,三个侧栏并不会像大家可以中的停靠在左右两边,而是随着减弱的主面板一起向中档靠拢。此时采纳相对布局,调整八个侧栏到对应的地点。

DOM文档:

XHTML

<div id=”bd”> <div class=”main”></div> <div
class=”sub”></div> <div class=”extra”></div>
</div>

1
2
3
4
5
<div id="bd">        
    <div class="main"></div>        
    <div class="sub"></div>        
    <div class="extra"></div>  
</div>

布局步骤:

  1. 三者都安装向左浮动。
  2. 设置main宽度为100%,设置两侧栏的拉长率。
  3. 安装
    负边距,sub设置负左侧距为100%,extra设置负左边距为负的自己宽度。
  4. 设置main的padding值给左右多少个子面板留出空间。
  5. 安装三个子面板为相对固定,sub的left值为负的sub宽度,extra的right值为负的extra宽度。

CSS清单:

CSS

.main { float: left; width: 100%; } .sub { float: left; width: 190px;
margin-left: -100%; position: relative; left: -190px; } .extra { float:
left; width: 230px; margin-left: -230px; position: relative; right:
-230px; } #bd { padding: 0 230px 0 190px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.main {        
    float: left;      
    width: 100%;  
}  
.sub {      
    float: left;        
    width: 190px;        
    margin-left: -100%;              
    position: relative;  
    left: -190px;  
}  
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px;
    position: relative;
    right: -230px;  
}
#bd {        
    padding: 0 230px 0 190px;  
}

局部验证

  • DOM元素的书写顺序不得更改。
  • 当面板的main情节部分比两边的子面板宽度小的时候,布局就会乱掉。可以由此设置mainmin-width特性或选取双飞翼布局防止难题。

二列的落到实处格局

一旦是左手带有侧栏的二栏布局,则去掉左侧栏,不要设置主面板的padding-right值,其余操作相同。反之亦然。

d. 双飞翼布局(float + 负margin + margin)

规律表明

双飞翼布局和圣杯布局的思辨有些相似,都采用了转移和负边距,但双飞翼布局在圣杯布局上做了改进,在main要素上加了一层div,
并设置margin,由于两侧栏的负边距都是周旋于main-wrap而言,main的margin值变化便不会影响五个侧栏,由此节省了对两侧栏设置相对布局的步调。

DOM文档:

XHTML

<div id=”main-wrap” class=”column”> <div
id=”main”>#main</div> </div> <div
class=”sub”></div> <div class=”extra”></div>

1
2
3
4
5
<div id="main-wrap" class="column">
      <div id="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>

布局步骤:

  1. 三者都设置向左浮动。
  2. 安装main-wrap宽度为100%,设置五个侧栏的幅度。
  3. 安装
    负边距,sub设置负右边距为100%,extra设置负左边距为负的本人宽度。
  4. 安装main的margin值给左右八个子面板留出空间。

CSS清单:

CSS

.main-wrap { float: left; width: 100%; } .sub { float: left; width:
190px; margin-left: -100%; } .extra { float: left; width: 230px;
margin-left: -230px; } .main { margin: 0 230px 0 190px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.main-wrap {        
    float: left;      
    width: 100%;  
}  
.sub {      
    float: left;        
    width: 190px;        
    margin-left: -100%;  
}  
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px;
}
.main {    
    margin: 0 230px 0 190px;
}

有的证实

  • 圣杯采取的是padding,而双飞翼选用的margin,解决了圣杯布局main的矮小宽度不可能小于右边栏的短处。
  • 双飞翼布局不用安装相对布局,以及相应的left和right值。
  • 透过引入相对布局,可以兑现三栏布局的各个组合,例如对左边栏设置position: relative; left: 190px;,可以兑现sub+extra+main的布局。

二列的贯彻格局

假即使左侧带有侧栏的二栏布局,则去掉右边栏,不要设置main-wrapmargin-right值,别的操作相同。反之亦然。

e. flex布局

万一你还尚未读书flex布局,阮一峰先生的两篇博文将会很吻合您。

阮一峰的博客——flex语法
阮一峰的博客——flex布局案例

以下是三种布局的flex布局代码:

DOM文档

XHTML

<div class=”layout”> <aside
class=”layout__aside”>侧边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>
<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>侧边栏宽度固定</aside> </div>
<div class=”layout”> <aside
class=”layout__aside”>左边边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>右边边栏宽度固定</aside> </div>
<div class=”layout”> <aside
class=”layout__aside”>第1个侧面栏宽度固定</aside> <aside
class=”layout__aside”>第2个侧面栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>
<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>第1个侧面栏宽度固定</aside> <aside
class=”layout__aside”>第2个侧面栏宽度固定</aside>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">左侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
</div>

CSS清单

CSS

.layout { display: flex; } .layout__main { flex: 1; } .layout__aside
{ width: 200px; }

1
2
3
4
5
6
7
8
9
.layout {
    display: flex;
}
.layout__main {
    flex: 1;
}
.layout__aside {
    width: 200px;
}

与事先所讲的二种观念布局方案相比较,flex布局的代码可谓非凡简洁,而且这些通用,利用简易的三行CSS即完成了广泛的三种布局。

总结

价值观的布局方法基于盒状模型,信赖 display属性 + position属性 +
float性能,逻辑相对复杂,对于完成部分特殊效果,例如垂直居中,尤其复杂繁琐。而flex布局中的flex容器可以按照实际可用空间动态调整子元素的宽高比和顺序,使元素可以尽可能地采纳可用空间,同时也能通过减少来幸免超越。flex布局提供了一套简便、完整、响应式的布局方案。

flex布局将是CSS布局的大势,还未正式成为标准的gird布局也极度吸睛,于是搜狐上诸多刚入门的伴儿
有了孤陋寡闻
二〇一七年,圣杯和双飞翼布局已经淘汰了,真的?,对于此我个人仍然坚贞不屈自己的意见二零一七年,圣杯和双飞翼布局已经淘汰了,真的?
– Shelley Lee 的答复 –
和讯,至少在当下过渡阶段,仍旧持之以恒抓实基础,逐步向前。

本文完。

PS:未来会持续写Flex布局和Grid布局相关作品,欢迎持续关心,也欢迎大家对作品提议提议或意见。

参照链接
CSS垂直居中和档次居中
圣杯布局小结
双飞翼布局介绍-始于天猫UED_慕课猿问
自己熟练的三种三栏网页宽度自适应布局方法 ”
张鑫旭-鑫空间-鑫生活
常见的两种布局统计

1 赞 26 收藏
评论

澳门葡京 33

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website