重学前端-CSS篇3-常用布局(两栏布局,圣杯布局,双飞翼布局)

1、绝对定位两栏布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>绝对定位两栏布局</title>
        <style type="text/css">
            html, 
            body {
                height: 100%;
                margin: 0;
                overflow-y: hidden;
            }
            .left {
                position: absolute;
                left: 0;
                right: 0;
                width: 300px;
                height: 100%;
                background-color: green;
            }
            .right {
                height: 100%;
                margin-left: 300px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="left">left</div>
        <div class="right">right</div>
    </body>
</html>

效果图:

2、圣杯布局-三栏布局

要解决的问题:两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
原理:

  • 利用浮动搭建完整的布局框架
  • margin 为负值,调整旁边两列的位置(使三列布局到一行上)
  • 使用相对定位,调整旁边两列的位置(使两列位置调整到两头)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>圣杯布局</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                min-width: 600px;
            }

            .header,.footer{
                width: 100%;
                height: 30px;
                text-align: center;
                background: gray;
            }
            .container{
                overflow: hidden;
                padding: 0 200px;
            }

            .middle, .left, .right{
                padding-bottom: 10000px;
                margin-bottom: -10000px;
                float: left;
            }
            .middle{
                width: 100%;
                background: pink;
            }
            .left{
                position: relative;
                left: -200px;
                margin-left: -100%;
                width: 200px;
                background: yellow;
            }
            .right{
                position: relative;
                right: -200px;
                margin-left: -200px;
                width: 200px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="header">header</div>
        <div class="container">
            <div class="middle">
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div class="footer">footer</div>
    </body>
</html>

效果图:

3、双飞翼布局

要解决的问题:两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
原理:

  • 利用浮动搭建完整的布局框架
  • margin 为负值,调整旁边两列的位置(使三列布局到一行上)
  • 把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>双飞翼布局</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                min-width: 600px;
            }

            /*头部 脚部样式*/
            .header,.footer{
                width: 100%;
                height: 30px;
                text-align: center;
                background: green;
            }

            /*三列的伪等高布局*/
            .middle, .left, .right{
                padding-bottom:10000px ;
                margin-bottom: -10000px;
                /* height: 50px;
                line-height: 50px; */
                float: left;
            }

            /*双飞翼布局*/
            .container{
                overflow: hidden;
            }
            .middle{
                width: 100%;
                background: deeppink;
            }
            .middle .middle-content{
                padding: 0 200px;
            }
            .left, 
            .right {
                background: pink;
                width: 200px;
                text-align: center;
            }
            .left{
                margin-left: -100%;
            }
            .right{
                margin-left: -200px;
            }
        </style>
    </head>
    <body>
        <div class="header">header</div>
        <div class="container">
            <div class="middle">
                <div class="middle-content">
                    <h4>middle</h4>
                    <h4>middle</h4>
                    <h4>middle</h4>
                    <h4>middle</h4>
                    <h4>middle</h4>
                    <h4>middle</h4>
                    <h4>middle</h4>
                    <h4>middle</h4>
                </div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div class="footer">footer</div>
    </body>
</html>

效果图如下:

4、伪等高布局

要解决问题:内容多列的高度相同
原理:

  • 利用浮动使元素全部左浮动
  • 利用padding-bottom将内容高度撑大,一般设置为10000px
  • 利用margin-bottom的负值,将下边界收回到原来的位置,一般是-10000px
  • 父元素用overflow:hidden;把超出部分隐藏
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>伪等高布局</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 700px;
                margin: 0 auto;
                overflow: hidden;
            }
            #wrap .left{
                float: left;
                width: 200px;
                background: pink;
                padding-bottom: 1000px;
                margin-bottom: -1000px;
            }
            #wrap .right{
                float: left;
                width: 500px;
                background: deeppink;
                padding-bottom: 1000px;
                margin-bottom: -1000px;
            }

            /* 清除浮动 */
            .clearfix{
                *zoom: 1;
            }
            .clearfix:after{
                content: "";
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="wrap" class="clearfix">
            <div class="left">
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
            </div>
            <div class="right">
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
            </div>
        </div>
    </body>
</html>

效果图如下:

5、绝对定位模拟固定定位

解决问题:由于ie6不支持fix定位,需要用绝对定位来模拟固定定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>使用绝对定位来模拟固定定位</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            /* 禁止系统默认滚动条 */
            html{
                overflow: hidden;
                height: 100%;
            }

            /* 给body加滚动条 */
            body{
                overflow: auto;
                height: 100%;
            }

            /* 绝对定位来模拟固定定位 */
            #test{
                position: absolute;
                left: 50px;
                top: 50px;
                width: 100px;
                height: 100px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div id="test"></div>
        <div style="height: 1000px;">
            csjkahcjk <br />
            csjkahcjk <br />
            csjkahcjk <br />
            csjkahcjk <br />
            csjkahcjk <br />
            csjkahcjk <br />
            csjkahcjk <br />
            csjkahcjk <br />
        </div>
    </body>
</html>
标签: