圣杯布局和双飞翼布局

介绍:

两者都属于三列布局,是一种很常见的页面布局方法,三列一般分别是子列sub、主列main和附加列extra,其中子列一般是居左的导航,且宽度固定;主列是居中的主要内容,宽度自适应;附加列一般是广告等额外信息,局右且宽度固定。

1.圣杯布局:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
    * {
        margin: 0;padding: 0;
    }
        body{
            min-width: 600px;
        }
        .container {
            min-width: 600px;
            padding-left: 210px;padding-right: 190px;
            overflow: hidden;
        }
        .main {
            float: left;width: 100%;height: 300px;background: rgba(255,0,0,.5);

        }
        .sub {
            width: 200px;height: 300px;float: left;margin-left: -100%;background-color: rgba(0,255,0,.5);
            position: relative;left: -210px;
        }
        .extra {
            width: 180px;height: 300px;float: left;margin-left: -180px;background-color: rgba(0,0,255,.5);
            position: relative;right: -190px;
        }
    style>
head>
<body>
    <div class="container">
        <div class="main">div>
        <div class="sub">div>
        <div class="extra">div>
    div>
body>
html>

2.双飞翼布局(淘宝使用的布局方式)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        .main-wrapper {
            float: left;
            width: 100%;
        }
        .main {
            height: 300px;margin-left: 210px;margin-right: 190px;background-color: rgba(255,0,0,.5);
        }
        .sub {
            height: 300px;width: 200px;float: left;margin-left: -100%;background-color: rgba(0,255,0,.5);
        }
        .extra {
            height: 300px;width: 180px;float: left;margin-left: -180px;background-color: rgba(0,0,255,.5);
        }
    style>
head>
<body>
    <div class="main-wrapper">
        <div class="main">div>
    div>
    <div class="sub">div>
    <div class="extra">div>
body>
html>

总结:

  1. 两种布局方式都是把主列放在文档流的最前面,使主列优先加载。
  2. 两种布局方式在实现上也有相同之处,都是让三列浮动,然后通过负外边距形成三列布局。
  3. 两种布局的不同之处在于如何处理中间主列的位置:圣杯布局是利用父容器的左右内边距定位‘双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位

你可能感兴趣的:(前端,css,圣杯布局,双飞翼布局,布局)