css常见布局

时间 2019-11-15

标签 css 常见布局栏目 CSS 繁體版

原文原文链接

圣杯布局

对于三栏布局来讲，左右两栏通常放置目录等简要信息，中间一栏是主要信息。页面加载时，用户最但愿第一时间看到的是中间一栏内容，因此根据文档流加载顺序（从上到下），中间一栏必须放在左右两栏的前面。而实际布局须要将中间一栏居中放置，因此在布局的时候就稍有不一样，这是就须要用到圣杯布局。（缘由or背景)css

下面是代码示例：html

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

运行结果：
浏览器

须要注意的地方：布局

在HTML中center是在left和right前面。spa
左右两栏的宽度是固定的，中间一栏宽度是随浏览器宽度变化而变化code
当left负外边距使得left脱离container时，会升上去。（right同理）htm
第三步中left和right升上去后会左右挡住center，因此须要container设置padding，在将left和right定位。blog
固然这里只是简单的举例，为使代码更加简洁清楚，container没有加清浮动，此时他的高度为0.图片

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

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

　　具体代码以下

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

与圣杯运行结果同样。

　　须要注意的是

这里是在center里面套了一个div，再设置margin值。
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;
        }

结果与圣杯布局同样。

　　须要注意的是:

在HTML中left放在center的前面。
主要实现的思路：根据文档流从上到下为：left-center-right。首先将container设置左右padding，在将left和right设置负margin值，使其恰好落在container的padding中。
不管是三栏布局仍是两栏布局，以上方法都适用。

纯浮动布局

左右两栏分别向左右浮动，中间设置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;
        }

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

　　须要注意的点：

浮动的left和right须要放在center前面。浮动前面有非浮动的元素，后面浮动元素只能在其后面。
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年加油吧！！！