专栏首页前端实习日记CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

前言

我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件。直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省了一下并不是我不熟,只是我开始瞧不上网页制作这种工作了,问我css问题时,我感觉就像是再问一个老粉刷匠这片墙面要从哪里刷起,从哪里刷不行 ?这有什么决定性的问题吗 ? 说的有点多,其实写这边文章的主要目的还是想告诉自己,不要瞧不起某一门技术,技术有高低,但不代表学css的人的技术就要比学js的智商低,术业有专攻,心态要自己掌握,不要受外界的影响。

圣杯布局&双飞翼布局

所谓圣杯布局和双飞翼布局其实解决的问题是相同的,都是解决左右两栏固定宽度,中间部分自适应,其中某部分内容比其他内容高的时候,保证三者元素等高。 他俩的区别就是:圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。

圣杯布局

以下面html为例:

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

1.main、left、right全部左浮动,在设置一个position:relative稍后会用到。 2.main的宽度设置为100%。left和right固定宽度(假设100px)。 3.此时main自己沾满了一行,所以给left拽上来设置marginleft:100%,此时left虽然上来了但是是覆盖在main上面的。 4.给content设置padding-left等于left的宽,此时左边有100px的空白,main和left都被挤过来了,要想还原,将left向左在移动100px就行了。 5.此时就剩下right在下面,同理margin-right:-100%就上去了。

css代码:

  <style>
        * {
            box-sizing: border-box;
        }
        .content {
            overflow: hidden;
            padding-left: 100px;
            padding-right: 100px;
        }
        .content > div {
            float: left;
            position: relative;
        }
        .main {
            width: 100%;
            height:100px;
            border:1px solid red;
        }
        .left {
            width:100px;
            margin-left: -100px;
            right:100%;
            height:100px;
            border:1px solid #000;
        }
        .right {
            width:100px;
            margin-right: -100px;
            height:100px;
            border:1px solid #000;
        }

    </style>

双飞翼布局

双飞翼布局的html:

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

对比一下css的区别:多了一个.main-inner,少了一些相对定位。

    <style>
        * {
            box-sizing: border-box;
        }

        .main-inner {
            margin-left:100px;
            margin-right: 100px;
        }

        .content {
            overflow: hidden;
            /* padding-left: 100px;
            padding-right: 100px; */
        }
        .content > div {
            float: left;
            /* position: relative; */
        }
        .main {
            width: 100%;
            height:100px;
            border:1px solid red;
        }
        .left {
            width:100px;
            margin-left: -100%;
            /* right:100px; */
            height:100px;
            border:1px solid #000;
        }
        .right {
            width:100px;
            /* margin-right: -100px; */
            margin-left: -100px;
            height:100px;
            border:1px solid #000;
        }

    </style>

Flex布局

相比较两者,Flex布局就好理解得多 html和圣杯布局一样 css:

 <style>
        * {
            box-sizing: border-box;
        }
        .content {
            overflow: hidden;
            display:flex;
            flex:1
        }
   
        .main {
            flex:1;
            height:100px;
            border:1px solid red;
        }
        .left {
            flex:0 0 100px;
            order:-1;
            height:100px;
            border:1px solid #000;
        }
        .right {
            flex:0 0 100px;
            height:100px;
            border:1px solid #000;
        }

    </style>

未完待续...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter环境搭建记录

    1.下载安装包之后执行flutter doctor报错:zsh: command not found: flutter

    yuezhongbao
  • JS:用rem来做响应式开发

    电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是...

    yuezhongbao
  • indexOf()在数组和字符串中使用的区别

    yuezhongbao
  • CSS实现多列复杂界面布局

    最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

    连胜
  • label+input实现开关切换效果

    用户1749219
  • label+input实现开关切换效果

    用户1749219
  • 损失函数是学习的指挥棒—记一次实践经历

    因为一些后处理操作的要求,希望投影得到的分布尽可能对称且均匀,能否找到更好的投影方向?

    李拜六不开鑫
  • 要实现60FPS动画, 你需要了解这些

    60FPS, 即每秒渲染60帧, 每一帧的间隔时间为 1000ms / 60 = 16.666ms

    木子星兮
  • PHP form表单计算器 For html美化

    AlexTao
  • 机器学习——朴素贝叶斯实现分类器

    机器学习(十四) ——朴素贝叶斯实现分类器 (原创内容,转载请注明来源,谢谢) 一、概述 朴素贝叶斯,在机器学习中,是另一种思想,属于概率思想。不过其还是在已知...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券