css常见布局

头像
jango
    阅读 6 分钟
    2

    圣杯布局

    对于三栏布局来说，左右两栏一般放置目录等简要信息，中间一栏是主要信息。页面加载时，用户最希望第一时间看到的是中间一栏内容，所以根据文档流加载顺序（从上到下），中间一栏必须放在左右两栏的前面。而实际布局需要将中间一栏居中放置，所以在布局的时候就稍有不同，这是就需要用到圣杯布局。（原因or背景)

    下面是代码示例：

    <!DOCTYPE html>
<html>
<head>
    <title>圣杯布局</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="center">Center</div>
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>
    body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .container{
            padding-left:150px;
            padding-right:200px;
        }
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-100%;
            position: relative;
            left:-150px;
        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #EF4400;
            width:200px;
            float:left;
            margin-left:-200px;
            position:relative;
            right:-200px;
        }

    运行结果：
    图片描述

    需要注意的地方：

    1. 在HTML中center是在left和right前面。

    2. 左右两栏的宽度是固定的，中间一栏宽度是随浏览器宽度变化而变化

    3. 当left负外边距使得left脱离container时，会升上去。（right同理）

    4. 第三步中left和right升上去后会左右挡住center，所以需要container设置padding，在将left和right定位。

    5. 当然这里只是简单的举例，为使代码更加简洁清楚，container没有加清浮动，此时他的高度为0.

    圣杯布局的进化：双飞翼布局

    双飞翼布局是在圣杯布局上进行改进，当left和right设置负margin，会上升并挡住center，圣杯布局是采用padding+relative定位，而双飞翼布局是采用margin解决。

    　　具体代码如下

    <!DOCTYPE html>
<html>
<head>
    <title>双飞翼布局</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="center">
            <div class="center-inner">Center</div>
        </div>
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>
    body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-100%;

        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .center-inner{
            margin-left: 150px;
            margin-right: 200px;
        }
        .right{
            background: #EF4400;
            width:200px;
            float:left;
            margin-left:-200px;
        }

    与圣杯运行结果一样。

    　　需要注意的是

    1. 这里是在center里面套了一个div，再设置margin值。

    2. left和right没有使用定位。

    圣杯布局的退化

    前面两个布局是考虑到中间一栏先加载，但有些场景并不需要，此时可以很快的得到简单的三栏布局。

    　　代码示例如下：

    <!DOCTYPE html>
<html>
<head>
    <title>圣杯布局退化</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="left">Left</div>
        <div class="center">Center</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>
    body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .container{
            padding-left: 150px;
            padding-right: 200px;
        }
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-150px;

        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #EF4400;
            width:200px;
            float:right;
            margin-right: -200px;
        }

    结果与圣杯布局一样。

    　　需要注意的是:

    1. 在HTML中left放在center的前面。

    2. 主要实现的思路：根据文档流从上到下为：left-center-right。首先将container设置左右padding，在将left和right设置负margin值，使其刚好落在container的padding中。

    3. 无论是三栏布局还是两栏布局，以上方法都适用。

    纯浮动布局

    左右两栏分别向左右浮动，中间设置margin值，宽度自适应。

    代码如下：

    <!DOCTYPE html>
<html>
<head>
    <title>纯浮动</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="center">Center</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>
    body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .left{
            background: #34934D;
            width:150px;
            float:left;

        }
        .center{
            background: #D6D6D6;
            margin-left: 150px;
            margin-right: 200px;

        }
        .right{
            background: #EF4400;
            width:200px;
            float:right;
        }

    运行结果与圣杯布局一样。

    　　需要注意的点：

    1. 浮动的left和right需要放在center前面。浮动前面有非浮动的元素，后面浮动元素只能在其后面。

    2. center的width应为auto。

    绝对定位

    纯浮动是利用浮动将左右两栏定位，这里也可以绝对定位。center依旧设置margin值留出左右空位。

    代码如下：

    <!DOCTYPE html>
<html>
<head>
    <title>绝对定位</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="center">Center</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>
    body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .container{
            position: relative;
        }
        .left{
            background: #34934D;
            width:150px;
            position: absolute;
            top: 0px;
            left: 0px;

        }
        .center{
            background: #D6D6D6;
            margin-left: 150px;
            margin-right: 200px;

        }
        .right{
            background: #EF4400;
            width:200px;
            position: absolute;
            top: 0px;
            right: 0px;
        }

    运行结果与圣杯布局一样。

    需要注意：container需要加position：relative（或其他非static）。

    以上就是几种常见的布局，可根据不同的场景选择相应的布局。如有错误的地方还望指出，有更好的布局欢迎补充。
    新年的第一篇博客完成啦，接下来要将之前所学的知识写成一篇篇博文，2017年加油吧！！！

    css
    jango
    47 声望2 粉丝
    下一篇 »
    视觉格式化模型之BFC

    引用和评论

    推荐阅读
    头像
    CSS之元素居中

    jango赞 1阅读 1.6k

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.6k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.5k

    0 条评论
    得票最新