圣杯布局和双飞翼布局的理解,区别和代码

最新推荐文章于 2022-08-16 19:48:13 发布

smbdhsn

最新推荐文章于 2022-08-16 19:48:13 发布

阅读量166

点赞数

分类专栏： web前端面试题文章标签： html css

本文链接：https://blog.csdn.net/smbdhsn/article/details/107746258

版权

web前端面试题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

面试题来源：github用户 haizhilin2013 面试题第一天
圣杯布局和双飞翼布局长这样：
在这里插入图片描述
相同点：两边顶宽，中间自适应的三栏布局，中间部分率先渲染，左中右三部分都是浮动的元素，都使用了margin-left或margin-right移动浮动元素。
区别：圣杯布局左右两部分内容占据着中部分的padding部分，而双飞翼布局左右两部分占据着中部分的margin部分。

圣杯布局代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body {
            /* 最小宽度阈值=2*left-width+right-width */
            min-width: 550px;
            margin: 0;
            padding: 0;
            }
        #header{
                height: 100px;
                background-color: slategrey;
        }
        #content {
            padding-left: 200px;
            padding-right: 150px;
            }
        #content .column {
            position: relative;
            float: left;
            height: 300px;
            }
        #center {
            width: 100%;
            background-color: coral;
            }
        #left {
            width: 200px;
            right: 200px;
            margin-left: -100%;
            background-color: crimson;
            }
        #right {
            width: 150px;
            margin-left: -150px;
            background-color: darkkhaki;
            left: 150px;
            }
        #footer{
            height: 100px;
            background-color: springgreen;
            clear: left;
        }
    </style>
</head>
<body>
    <div id="header">header</div>
    <div id="content">
        <div id="center" class="column">1111</div>
        <div id="left" class="column">222</div>
        <div id="right" class="column">333</div>
    </div>
    <div id="footer">footer</div>
</body>
</html>

双飞翼布局代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
    html,body{
      padding: 0;
      margin: 0;
    }
    #header{
      height: 100px;
      background-color: tomato;
    }
    .contain{
      float: left;
      height: 300px;
    }
    .center{
      background-color: blue;
      width: 100%;
    }
    .inner{
      margin: 0 100px;
    }
    .left{
      background-color: brown;
      width: 100px;
      margin-left: -100%;
    }
    .right{
      background-color: coral;
      width: 100px;
      margin-left: -100px;
    }
    #footer{
      height: 100px;
      background-color: tan;
      clear: left;
    }
</style>
</head>
<body>
    <div id="header">header</div>
    <div class="center contain">
      <div class="inner">
        middle
      </div>
    </div>
    <div class="left contain">left</div>
    <div class="right contain">right</div>
    <div id="footer">footer</div>
</body>
</html>

利用弹性布局实现上述布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;  
            height: 100%;
        }
        #container{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        #header{
            height: 100px;
            background-color: darkturquoise;
        }
        #content{
            display: flex;
            justify-content: space-between;
            flex-grow: 1;
        }
        #left{
            flex: 0 0 200px;
            background-color: darkkhaki;
        }
        #middle{
            flex: 1 0 auto;
            background-color: darkmagenta;
        }
        #right{
            flex: 0 0 200px;

            background-color: darkorange;
        }
        #footer{
            height: 100px;
            background-color: slategray;
        }
    </style>
</head>
<body>
    <div id="container">
    <div id="header">header</div>
    <div id="content">
        <div id="left">
            left
        </div>
        <div id="middle">
            middle
        </div>
        <div id="right">
            right
        </div> 
    </div>
    <div id="footer">footer</div>
    </div>
</body>
</html>

smbdhsn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局和双飞翼布局的理解,区别和代码

圣杯布局和双飞翼布局长这样：相同点：两边顶宽，中间自适应的三栏布局，中间部分率先渲染，左中右三部分都是浮动的元素，都使用了margin-left或margin-right移动浮动元素。区别：圣杯布局左右两部分内容占据着中部分的padding部分，而双飞翼布局左右两部分占据着中部分的margin部分。圣杯布局代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫