找回密码
当前位置：前端开发者 > CSS > 正文

负边距的用处，圣杯布局，双飞翼布局

2018-08-13 20:24:02 分类：CSS / 面试 阅读(211) 评论(0)

前台页面的开发属于前端吗|小红书社招面试题 前端开发|前端开发的面试的自我介绍

写下几个经典的布局圣杯布局，先渲染center区域，再渲染left区域，最后渲染right区域

代码片段 1

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .wrapper {
            padding: 0 200px 0 150px;
            border: 1px solid black;
            overflow: hidden;
        }
        .wrapper .center {
            float: left;
            width: 100%;
            background: #F90;
        }
        .wrapper .left {
            float: left;
            margin-left: -100%;
            width: 150px;
            position: relative;
            left: -150px;
            background: #6C0;
        }
        .wrapper .right {
            float: left;
            margin-left: -200px;
            width: 200px;
            position: relative;
            right: -200px;
            background: #F9F;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div class=”center”>
            <p>main-wrap</p>
            <p>main-wrap</p>
        </div>
        <div class=”left”>
            <p>sub</p>
            <p>sub</p>
            <p>sub</p>
        </div>
        <div class=”right”>
            <p>extra</p>
            <p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
        </div>
    </div>
</body>
</html>

双飞翼布局，先渲染center区域，再渲染left区域，最后渲染right区域。相比圣杯布局，center区域多了一个标签

代码片段 2

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .wrapper {
            border: 1px solid black;
            overflow: hidden;
        }
        .wrapper .center {
            float: left;
            width: 100%;
            background: #F90;
        }
        .wrapper .center-wrapper {
            margin: 0 200px 0 150px;
        }
        .wrapper .left {
            float: left;
            margin-left: -100%;
            width: 150px;
            background: #6C0;
        }
        .wrapper .right {
            float: left;
            margin-left: -200px;
            width: 200px;
            background: #F9F;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div class=”center”>
            <div class=”center-wrapper”>
                <p>main-wrap</p>
                <p>main-wrap</p>
            </div>
        </div>
        <div class=”left”>
            <p>sub</p>
            <p>sub</p>
            <p>sub</p>
        </div>
        <div class=”right”>
            <p>extra</p>
            <p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
        </div>
    </div>
</body>
</html>

用普通的float实现圣杯布局和双飞翼布局的效果，只是先渲染left区域，再渲染right区域，最后渲染center区域

代码片段 3

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .wrapper {
            border: 1px solid black;
            overflow: hidden;
        }
        .wrapper .center {
            width: 100%;
            background: #F90;
        }
        .wrapper .center-wrapper {
            margin: 0 200px 0 150px;
        }
        .wrapper .left {
            float: left;
            width: 150px;
            background: #6C0;
        }
        .wrapper .right {
            float: right;
            width: 200px;
            background: #F9F;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div class=”left”>
            <p>sub</p>
            <p>sub</p>
            <p>sub</p>
        </div>
        <div class=”right”>
            <p>extra</p>
            <p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
        </div>
        <div class=”center”>
            <div class=”center-wrapper”>
                <p>main-wrap</p>
                <p>main-wrap</p>
            </div>
        </div>
    </div>
</body>
</html>

这里附个等高“效果”（实际上并不是真正意义的等高）的用法，用普通的float实现圣杯布局和双飞翼布局的效果

代码片段 4

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .wrapper {
            border: 1px solid black;
            overflow: hidden;
        }
        .wrapper .center {
            width: 100%;
            background: #F90;
        }
        .wrapper .center-wrapper {
            margin: 0 200px 0 150px;
        }
        .wrapper .left {
            float: left;
            width: 150px;
            background: #6C0;
        }
        .wrapper .right {
            float: right;
            width: 200px;
            background: #F9F;
        }
        .wrapper .left,
        .wrapper .center,
        .wrapper .right {
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div class=”left”>
            <p>sub</p>
            <p>sub</p>
            <p>sub</p>
        </div>
        <div class=”right”>
            <p>extra</p>
            <p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
        </div>
        <div class=”center”>
            <div class=”center-wrapper”>
                <p>main-wrap</p>
                <p>main-wrap</p>
            </div>
        </div>
    </div>
</body>
</html>

页面前端开发与设计的区别吗|web前端开发面试题 校招|web前端常用开发软件下载

» 本文来自：前端开发者 » 《负边距的用处，圣杯布局，双飞翼布局》
» 本文链接地址：https://www.rokub.com/5229.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论