float布局:圣杯布局和双飞翼布局

最新推荐文章于 2022-08-20 15:44:57 发布

告诉太阳

最新推荐文章于 2022-08-20 15:44:57 发布

阅读量262

点赞数 1

分类专栏：前端面试常考题文章标签： css

本文链接：https://blog.csdn.net/qq_43385689/article/details/113761411

版权

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

4 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局:是什么,实现,比较

一.比较

在这里插入图片描述

二. 圣杯布局

在这里插入图片描述

html结构:

   <body>
        <header>header</header>
        <div class="container">
            <div class="main float">main</div>
            <div class="left float">left</div>
            <div class="right float">right</div>
        </div>
        <footer class="clearfix">footer</footer>
    </body>

2.核心流程:
上中下 && (左中右,中先出来)
①　内部左中右float:left;footer清除浮动
②　外部container的左右各padding 150px;
③　左:
margin-left :-100%; //即向右移动父盒子的宽width,不包括padding
position relative, right:自身的宽px
//为什么这里要相对定位?
因为左盒子 margin-left右移的值没有包括父盒子的 padding,所以这里相对于自己定位后再左移自身的宽(也即父盒子padding-left的值)
④　右 margin-right:-自身的宽 ;
//为什么这里使用margin-right?
因为mr为负自身的值,则这个盒子在父盒子的外界来看不占位置,自然,右盒子就挤入到父盒子的留白区了.(在这里无论你把宽值设置得多大,右盒子都不会超出container留白区,覆盖main区域)

3.实现

 <style>
            header,
            footer {
                background: rosybrown;
            }
            .float {
                float: left;
            }
            .clearfix:after {
                content: '';
                display: table;
                clear: both;
            }
            .container {
                height: 100px;
                padding: 0 100px;
            }
            .main {
                height: 100px;
                background-color: antiquewhite;
                width: 100%;
            }

            .left {
                height: 100px;
                background-color: cornflowerblue;
                width: 100px;
                margin-left: -100%;
                position: relative;
                right: 100px;
            }
            .right {
                height: 100px;
                background-color: cornflowerblue;
                width: 100px;
                margin-right: -100px;
            }
        </style>

三.双飞翼布局

在这里插入图片描述

1.html结构

 <body>
    <div class="main float">
        <div class="main-content">main</div>
    </div>
    <div class="left float">left</div>
    <div class="right float">right</div>
</body>

2.核心流程
左中右 ,中先出来

中间内层 : margin左右为左右盒子的宽
左:margin-left :-100%;
右:margin-left :-自身的宽 ; //为什么不是margin-right?因为右盒子的父盒子是body

3.代码实现

  <style>
            .float {
                float: left;
            }
            .main {
                background-color: antiquewhite;
                width: 100%;
            }
            .main-content {
                margin: 0 100px;
            }
            .left {
                background-color: cornflowerblue;
                width: 100px;
                margin-left: -100%;
            }
            .right {
                background-color: cornflowerblue;
                width: 100px;
                margin-left: -100px;
            }
   </style>

告诉太阳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
float布局:圣杯布局和双飞翼布局

float布局:圣杯布局和双飞翼布局一.比较二. 圣杯布局html结构: <body> <header>header</header> <div class="container"> <div class="main float">main</div> <div class="left float">left</div&
复制链接

扫一扫