首页>前端教程>CSS教程

web的经典布局方案介绍

布局是网页的框架,灵活的布局可以让页面信息得以合理的摆放,强健的布局方案可以适应不同分辨率下页面的显示。

1、上中下三栏式

2、左右两栏式

3、左右加页眉页脚

4、左中右三栏式

       浮动布局

       双飞翼布局

       圣杯布局

       弹性布局

一、上中下三栏式

1、等宽布局

这种布局方案是上中下等宽,目前比较少见了。

See the Pen  等宽三栏布局by zhaolanzhen (@mrszhao)  on CodePen.

2、上下百分比,中间版心固定宽

这种“工”字型的上中下三栏布局是目前比较主流的方式,比如站酷等就是这样的布局。

这种布局需要注意的是,上下百分比的布局需要设置最小宽度为版心的宽度。

See the Pen  百分比三栏布局by zhaolanzhen (@mrszhao)  on CodePen.

二、左右两栏式

1、混合浮动+普通流

左栏浮动,右栏不浮动,自适应。关键是父级设置为百分比。

See the Pen  左右两栏式1by zhaolanzhen (@mrszhao)  on CodePen.

2、纯浮动式

左右两栏都浮动,但是必须要设置两栏的宽度,因为浮动后的div宽度由内容撑开。但是设置固定值就失去了自适应的效果,可以利用calc()的方法,当然需要牺牲兼容性。

如果为右栏设置了最小宽度,则当父容器宽度不够的时候,右栏会被挤下去。所以也需要为父容器设置最小宽度。


<div class="wrap">
    <aside id="left"></aside>
    <section id="right"></section>
</div>
.wrap{
    width:80%;
    /* 保证最小宽度为左栏+右栏最小宽度 */
    min-width:500px;
    margin:0 auto;
    overflow: hidden;
}
#left{
    width:200px;
    height:500px;
    background: #666;
    float: left;
}
#right{
    /* 计算出右栏的宽度,实现自适应 */
    width:calc(100% - 200px);
    height:500px;
    background: #eee;
    float: left;
    min-width:300px;
}

3、定位式

父容器相对定位,左右两栏绝对定位,也必须设置宽度,如果用了calc()自适应,为右栏设置了最小宽度时,如果父容器的宽度不够,则右栏会压在左栏上方。所以父容器也要设置最小宽度。

.wrap{
    width:80%;
    min-width: 500px;
    margin:0 auto;
    position: relative;
}
#left{
    width:200px;
    height:500px;
    background: #666;
    position: absolute;
    top:0;
    left:0;
}
#right{
    width:calc(100% - 200px);
    min-width: 300px;
    height:500px;
    background: #ddd;
    position: absolute;
    top:0;
    right:0;
}

三、左右加页眉页脚

中间如果有多栏的模块,先看成一个栏,再划分成多个栏。

See the Pen  左右加页眉页脚 by zhaolanzhen (@mrszhao)  on CodePen.

当然可以结合上面的方法做成自适应的效果。

四、左中右三栏式

1、浮动式

左右两栏浮动,中间栏不浮动,父元素设置百分比宽度,可以让中间栏实现宽度自适应。

但是html结构需要把中间栏放在最下面。设置好最小宽度避免布局崩掉。

这种方式简单,但是因为把最主要的中间栏放在了html结构的下方,不利于浏览器渲染。

<div class="wrap">
    <aside id="left"></aside>  
    <aside id="right"></aside>
    <!-- 主体结构放最下面 -->
    <section id="main"></section>  
</div>
.wrap{
    margin:0 auto;
    width:80%;
    min-width:720px;
}
#left{
    width: 200px;
    height:500px;
    background: #666;
    float: left;
}
#right{
    width: 200px;
    height:500px;
    background: #666;
    float: right;
}
#main{
    /* 因为没有浮动,所以宽度和父容器保持一致,可以实现自适应。 */
    min-width:300px;
    height:500px;
    background: #ccc;
    margin:0 210px;
}

2、双飞翼布局

为了让主体div的内容最先渲染,所以要改变布局。

双飞翼布局的关键点是,在主体div外面再加一个盒子做浮动,主体div不浮动,左右外边距用来放置浮动后利用负外边距回来的左右两栏。

<div class="wrap">
    <!-- 需要在主体div外面再加一个盒子做浮动。主体div两边加两个外边距,用来放置左右两栏。 -->
    <section id="main">
    <div class="content">#content</div>
    </section>
    <aside id="left">#left</aside>
    <aside id="right">#right</aside>
</div>
.wrap{
    margin:0 auto;
    width:80%;
}
#main{
    width:100%;
    /* 主体div外面的盒子做浮动 */
    float: left;
    background: #ccc;
}
#left{
    width:200px;
    float: left;
    height:500px;
    background: #666;
    /* 左栏利用左负外边距回到上个浮动div的最左边。此时的100%就是父容器的宽度。 */
    margin-left: -100%;
}
#right{
    width:200px;
    float: left;
    height:500px;
    background: #999;
    /* 右栏利用左负外边距回到上个浮动div的最右边,该边距的值和自己的宽度一致。 */
    margin-left:-200px;
}
/* 主体div不浮动,只需要设置好两边的外边距和左右两栏宽度一致即可 */
.content{
    height:500px;
    margin:0 200px;
}

See the Pen  双飞翼布局 by zhaolanzhen (@mrszhao)  on CodePen.

3、圣杯布局

圣杯布局和双飞翼布局都是经典的三栏布局方案,比起浮动布局的好处就是把主体内容移上去先渲染,不过圣杯布局的html结构更简单,但是样式要稍微复杂一点点。

main,left,right都左浮动,但是利用main的padding来为左右两个容器腾出空间。因为利用负外边距只能让left回到父容器里面的最左边,所以还需要让left容器的position定位改成relative,再利用right值翻出去。right容器利用margin-right的负值翻出去。

注意点是必须为父容器设置最小宽度,因为left是通过定位翻出去的,所以当right的容器碰到left容器原始位置的时候,就会把自个儿挤下去。所以父容器的最小宽度为:left容器宽度的两倍+right容器的宽度。

<div id="container">
    <div id="center" class="column"></div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
</div>
div{
    box-sizing:border-box;
}
.column{
    float: left;
}
#container{
    width:80%;
    /* 最小宽度为left容器宽度的两倍+right容器的宽度 */
    min-width:550px;
    margin: 0 auto;
    background-color: #ddd;
    height: 600px;
    /* 左右的内边距就是腾出左右两栏的空间 */
    padding: 0 150px 0 200px;
}
#center{
    width:100%;
    height: 500px;
    background-color: #f5c298;
}
#left{
    width:200px;
    height: 400px;
    background-color: #f9a4bd;
    /* 先回到父容器可用空间的最左边 */
    margin-left:-100%;
    position: relative;
    /* 再利用定位翻出去,也可以用left:-200px */
    right:200px;
}
#right{
    width:150px;
    height: 500px;
    background-color:#7ac8f5;
    /* 可以用定位,也可以直接用margin-right的负值 */
    margin-right:-150px;
}

双飞翼布局和圣杯布局的特性:

  • 都是三栏布局,左右两栏固定宽度,中间栏自适应。

  • html结构都提前渲染主体。

  • 双飞翼主体结构多一个父容器。

  • 双飞翼利用的是主体结构的父容器和左右两栏浮动,主体内容不浮动,利用主体内容的左右外边距腾出空间。再为左右两栏设置负外边距回到指定位置。

  • 圣杯布局结构简单点,三栏都浮动,利用主体结构的内边距实现腾出空间,但是左栏除了负外边距外,还需要额外的定位才能实现。而且父容器必须指定最小宽度。

4、弹性布局

这估计是现代浏览器最好的布局方式了。也是最简单的布局方式。

可以让center扩展和收缩,左右两栏固定宽度,但是可以收缩。改变left的排序到最前面。而且因为可以收缩,不设置最小宽度,布局都不会乱。

<div id="container">
    <div id="center"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>
#container{
    width:80%;
    margin: 0 auto;
    height: 500px;
    background-color: #ddd;
    /* 弹性布局 */
    display: flex;
}
#center{
    /* 让center可以扩展,收缩 */
    flex: 1;
    background-color: #eee;
}
#left{
    width:200px;
    background-color: #ccc;
    /* 把left的排序放在最前面 */
    order: -1;
}
#right{
    width: 150px;
    background-color: #aaa;
}

See the Pen  flex实现三栏布局 by zhaolanzhen (@mrszhao)  on CodePen.

点赞


1
保存到:

相关文章

Top