HTML+CSS入门 CSS圣杯布局详解-职坐标

HTML+CSS入门 CSS圣杯布局详解

沉沙 2018-09-20 来源：阅读 2052 评论 0

摘要：本篇教程介绍了HTML+CSS入门 CSS圣杯布局详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 CSS圣杯布局详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<

圣杯布局

圣杯布局很完美（兼容所有浏览器，包括IE6），但是使用了相对定位，布局有局限性，宽度控制要改的地方也多。

第一种方法公用部分：

.lgyz, .lzrg, .lrzcg, .lcgrz, .lzcrg {margin:10px 0; min-width:400px;text-align: center;color:#ffffff; }
    .left {background-color: #4DBCB0; padding:20px 0;}
    .aside, .center, .right {background-color: #E35881;padding:20px 0; }

第二种方法都不考虑兼容IE8及以下。
左侧栏固定宽度，右侧自适应：

第一种写法：

<div class="lgyz">
        <div class="left">主内容栏自适应宽度</div>
        <div class="aside">侧边栏固定宽度</div>
    </div>

.lgyz{zoom:1;overflow:hidden;padding-left:210px;}
.lgyz .aside{float:left;width:200px;margin-left:-100%;position:relative;left:-210px;_left:0;}
.lgyz .left{float:left;width:100%;}

第二种写法：

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

.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;}

右侧栏固定宽度，左侧自适应：

第一种写法：

<div class="lzrg">
　　<div class="left">主内容栏自适应宽度</div>
   <div class="aside">侧边栏固定宽度</div>
</div>

.lzrg{zoom:1;overflow:hidden;padding-right:210px;}
.lzrg .aside{float:left;width:200px;margin-left:-200px;position:relative;right:-210px;}
.lzrg .left{float:left;width:100%;}

第二种写法：

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

.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;}

左右固定   中间自适应

第一种：

<div class="lrzcg">
        <div class="left">主内容栏自适应宽度</div>
        <div class="center">侧边栏1固定宽度</div>
        <div class="right">侧边栏2固定宽度</div>
    </div>

.lrzcg{zoom:1;overflow:hidden;padding-left:210px;padding-right:210px;}
.lrzcg .left{float:left;width:100%;}
.lrzcg .center{float:left;width:200px;margin-left:-100%;position:relative;left:-210px;_left:210px;}
.lrzcg .right{float:left;width:200px;margin-left:-200px;position:relative;right:-210px;}

第二种：

<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>

.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;}

第三种：

<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>

.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;}

都在左边，右侧自适应

第一种：

<div class="lcgrz">
        <div class="left">主内容栏自适应宽度</div>
        <div class="center">侧边栏1固定宽度</div>
        <div class="right">侧边栏2固定宽度</div>
    </div>

.lcgrz{zoom:1;overflow:hidden;padding-left:420px;}
   .lcgrz .left{float:left;width:100%;}
   .lcgrz .center{float:left;width:200px;margin-left:-100%;position:relative;left:-420px;_left:0px;}
   .lcgrz .right{float:left;width:200px;margin-left:-100%;position:relative;left:-210px;_left:210px;}

第二种：

<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>

.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;}

都在右边，左侧自适应

第一种：

<div class="lzcrg">
        <div class="left">主内容栏自适应宽度</div>
        <div class="center">侧边栏1固定宽度</div>
        <div class="right">侧边栏2固定宽度</div>
    </div>

.lzcrg{zoom:1;overflow:hidden;padding-right:420px;}
   .lzcrg .left{float:left;width:100%;}
   .lzcrg .center{float:left;width:200px;margin-left:-200px;position:relative;right:-210px;}
   .lzcrg .right{float:left;width:200px;margin-left:-200px;position:relative;right:-420px;}

第二种：

<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>

.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;}

使用flex方法圣杯布局，每种布局做法的结果同上面一模一样，但是代码减少了很多，而且适用的场景更多

<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>

.layout {margin:10px 0; min-width:400px;text-align: center;color:#ffffff; }
.layout__main {background-color: #4DBCB0; padding:20px 0;}
    .layout__aside {background-color: #E35881;padding:20px 0; }

    .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;}