圣杯布局and双飞翼布局

最新推荐文章于 2022-01-06 20:18:59 发布

limyuer

最新推荐文章于 2022-01-06 20:18:59 发布

阅读量154

点赞数

分类专栏：布局文章标签：布局

本文链接：https://blog.csdn.net/qq_39285660/article/details/79073462

版权

布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

圣杯布局：

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .warp,.main{
            width:100%;
        }
        .main,.left,.right{
            height:100%;
            float: left;
        }
        .warp{
            box-sizing: border-box;
            height:400px;
            background: #000;
            padding-left:200px;
            padding-right:100px;
        }
        .main{
            background: red;
        }
        .left{
            width:200px;
            margin-left: -100%;
            background: yellow;
            position: relative;
            left:-200px;
        }
        .right{
            width:100px;
            margin-left: -100px;
            background: blue;
            position: relative;
            right: -100px;
        }
    </style>
</head>
        <div class="warp">
            <div class="main">main</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
</html>

详细讲解：
1.首先了解圣杯布局具体是什么布局？
通俗说法是：父盒子里包括左中右三个子盒子。左右盒子定宽，中间自适应。

2.布局
我们都知道浏览器的渲染顺序是字上而下有序进行的。
所以我们将最重要的main盒子放在最上边。
将left和right放在下边。
布局如下：

<div class="warp">
            <div class="main">main</div>
            <div class="left">left</div>
            <div class="right">right</div>
 </div>

3.样式控制

第一步：设置宽度高度
warp:width:100%;height:400px;（可以由元素撑开高度）
main:width:100%;height:100%;
left:width:200px;height:100%;
right:width:100px;height:100%;
第二步：设置子元素的浮动
main:float:left;
left:float:left;
right:float:left;
第三步：用margin的负值来将left,right的盒子搞上去
left:margin-left:-100%;(到父元素的最左边)
right:margin-right:100px;（到父元素最右边）
第四步：因为left和right会覆盖main的内容，所以需要给父元素设置padding值,且保证不影响盒子大小
warp:box-sizing:border-box;
padding-left:200px;
padding-right:100px;
第五步：相对定位将left，right放到父元素腾出来的padding处
left: position: relative;
left:-200px;
right: position: relative;
left:-100px;

ok~

双飞翼布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .warp,.mainWarp,.main{
            width:100%;
        }
        .mainWarp,.main,.left,.right{
            height:100%;
        }
        .mainWarp,.left,.right{
            float: left;
        }
        .warp{
            height:400px;
            background: #000;
        }
        .main{
            background: red;
            margin-left:200px;
            margin-right:100px;
        }
        .left{
            width:200px;
            margin-left: -100%;
            background: yellow;
        }
        .right{
            width:100px;
            margin-left: -100px;
            background: blue;
        }
    </style>
</head>
        <div class="warp">
            <div class="mainWarp">
                <div class="main">main</div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
</html>

详细讲解： 1.双飞翼布局的优点：不再使用决对定位，两侧宽度可不固定 2.布局：相比较圣杯布局，main盒子外多了一个盒子mainWarp

<div class="warp">
    <div class="mainWarp">
        <div class="main">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

3.样式：
步骤一：设置宽高
warp:width:100%;height:400px;(可用内容撑起来)
mainWarp:width:100%;height:100%;
main:width:100%;height:100%;
left:width:200px;height:100%;
right:width:100px;height:100%;(宽度可按百分比)

步骤二：进行浮动
mainWarp,left,right都设置float:left;

步骤三：用margin的负值来将left,right的盒子搞上去
left:margin-left:-100%;(到父元素的最左边)
right:margin-right:100px;（到父元素最右边）

步骤四：因为left和right会覆盖main的内容，所以这次我们给main一个margin值，使main缩小
main:margin-left:200px;
margin-right:100px;

ok~

limyuer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局and双飞翼布局

圣杯布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } .warp,.main{
复制链接

扫一扫

专栏目录