圣杯布局与双飞翼布局

  • 圣杯布局和双飞翼布局都是为了实现一个两侧宽度固定，两头宽度自适应的三栏布局。(两头先加载渲染)

圣杯布局-Example

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <meta name="referrer" content="origin" />    <meta property="og:description" content="圣杯布局" />    <meta http-equiv="Cache-Control" content="no-transform" />    <meta http-equiv="Cache-Control" content="no-siteapp" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <title>圣杯布局</title></head><style type="text/css">    * {        padding: 0;        margin: 0;    }    html,    body {        padding: 0;        margin: 0;    }    body {        min-width: 550px;    }    * {        margin: 0;        padding: 0;    }    .header,    .footer {        background: gray;        width: 100%;    }    .footer {        clear: both;    }    .main {        height: 200px;        padding: 0 150px 0 200px;        background: greenyellow;        *zoom: 1;    }    .left,    .center,    .right {        float: left;    }    .center {        width: 100%;        height: 200px;        background: red;    }    .left {        width: 200px;        height: 200px;        background: yellow;        margin-left: -100%;        position: relative;        left: -200px;    }    .right {        width: 150px;        height: 200px;        background: gainsboro;        margin-left: -150px;        position: relative;        left: 150px;        }</style><body>    <div class="header">        头部    </div>    <div class="main">        <div class="center">两头两头两头两头两头两头两头后</div>        <div class="left">右边</div>        <div class="right">左边</div>    </div>    <div class="footer">        底部    </div></body></html>

双飞翼布局-Example

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <meta name="referrer" content="origin" />    <meta property="og:description" content="双飞翼布局" />    <meta http-equiv="Cache-Control" content="no-transform" />    <meta http-equiv="Cache-Control" content="no-siteapp" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <title>双飞翼布局</title></head><style type="text/css">    * {        margin: 0;        padding: 0;    }    .main>div {        float: left;    }    .left {        width: 200px;        background: red;        margin-left: -100%;    }    .right {        width: 200px;        background: blue;        margin-left: -200px;    }    .middle {        width: 100%;        background: yellow;    }    .content {        margin-left: 200px;        margin-right: 200px;    }</style><body>    <div class="main">        <div class="middle">            <div class="content">                两头            </div>        </div>        <div class="left">            右边        </div>        <div class="right">            左边        </div>    </div></body></html>

长处

    1. 兼容性好，兼容若有支流浏览器，包含万恶的IE6
    1. 能够实现次要内容的优先加载

额定知识点

  • 其实三列布局的形式还有很多 ，但也有各自的毛病
  • 1.如果左右两列用position: absolute定位布局做外层设计须要有个蕴含块设置（否则是绝对浏览器可视区域）这样会层级，页面管制绝对麻烦
  • 2.用浮动布局的话， 中间层要做到先加载实现不了
  • 3.flex布局低版本浏览器有些还不反对
Thinking in JackDan