首页 > 其他分享 >面试官:请你实现三栏布局并且优先加载中间内容 我:稳啦- ̗̀(๑ᵔ⌔ᵔ๑)

面试官:请你实现三栏布局并且优先加载中间内容 我:稳啦- ̗̀(๑ᵔ⌔ᵔ๑)

时间:2024-06-22 20:00:38浏览次数:26  
标签:flex 面试官 圣杯 中栏 布局 内容 三栏 稳啦

前言

三栏布局是网页设计中一种经典布局方式,它将页面分为三个垂直部分:左栏、中栏和右栏,三栏在同一行显示。
image.png
这种布局模式在很多网站的首页或内容密集型页面中非常常见,因为它能够有效地组织信息,提供良好的用户体验。常常也是作为面试常考题出现,今天将为大家介绍常见的三栏布局的方式,其中有些就能实现优先加载中间内容。

如何实现加载中间内容,浏览器在渲染页面的时候是按写的顺序渲染,意思是要想优先加载就必须html结构在前面。html结构如下:

   <div class="page">
        <div class="content">中栏内容</div>
        <div class="left">左栏内容</div>
        <div class="right">右栏内容</div>
    </div>

html结构已经确定,接下来的就是css布局样式。话不说,发车!- ̗̀(๑ᵔ⌔ᵔ๑)

flex布局

不多说,flex布局是个人认为目前最强的布局了。灵活多变,满足一切需求。
那让我们是实现一下任务需求:

  • 首先要实现三栏内容在同一行中,我们给父元素设置弹性布局,则子元素都会在同一行展示
    .page{display:flex}

  • 要将中栏内容放在中间显示,左栏在左边,右栏在右边显示。这时候我们需要flex布局中的一个属性order,这个属性可以定义项目的排列顺序,数值越小,排列越靠前,默认为0。
    所以我们只需要让中栏内容order为1,左栏为默认0,右栏为2,即可实现。
    下面是效果展示:
    jcode
    不得不说,flex布局是真的简单。但是问题真的有这么简单吗?是的确实这么简单.cm.jpg,咳咳,其实远在flex布局还没有出现的时候,也已经有超级大佬想出了非常好的解决办法,本篇文章也主要是以讲解这些方法的思路为主。那首先介绍的就是圣杯布局

圣杯布局

圣杯布局。。我怎么一开始就想到了fate,咳咳扯远了。首先我们先设置三栏内容,如下图所示

* {
       padding: 0;
       margin: 0;
  }

.page {
       height: 200px;
      }
.left,
.right {
       height: 200px;
       width: 200px;
       background: #0ed898;
}

.content {
        height: 200px;
        width: 100%;
        background: pink;
}

image.png
三栏内容分行显示,圣杯布局的首先样式便是让三栏内容先全部浮动,首先达成可以在一行显示,但是由于中栏内容宽度为100%,所以其他两栏内容将会被挤下去

image.png
圣杯布局的精髓就是给.page容器一个内边距,变成下边这样

image.png
在给左右栏内容添加相对定位,把每个容器定位到指定位置。下面是完整代码
jcode

双飞翼布局

我也很好奇为什么名字一个个都挺奇怪的,如果有大佬知道的话,欢迎评论区告诉我一下,这个确实让我挺疑惑的。
其实双飞翼布局和圣杯布局个人感觉都挺像的

  • 圣杯布局 = 浮动 + 内边距
  • 双飞翼 = 浮动 + 外边距

    但是双飞翼html结构稍微有点不同
<div class="page">
        <div class="content">
            <div class="inner"> 中栏内容</div>
        </div>
        <div class="left">左栏内容</div>
        <div class="right">右栏内容</div>
    </div>

中栏内容使用了一个inner类名的div包裹,作用就是让inner盒子产生一个外边距 margin: 0 200px,给左右两栏提供位置,而圣杯布局是通过padding给左右两栏提供位置。
代码如下:
jcode

结语

其实能实现三栏布局的方式有很多种,比如grip和table布局都是可以实现,这里主要是讨论可以优先渲染中栏内容的布局方式。个人还是非常喜欢flex布局,其他两种可以作为拓展知识了解。
好啦,本次分享就到这啦,喜欢的话就点个赞或者关注吧。- ̗̀(๑ᵔ⌔ᵔ๑)

标签:flex,面试官,圣杯,中栏,布局,内容,三栏,稳啦
From: https://blog.csdn.net/qq_62012466/article/details/139887313

相关文章

  • 做完这些大模型项目,面试官直呼太牛了
    前言大语言模型正迅速成为互联网时代最热门的技术创新之一,虽然现在该技术尚处于起步阶段,但已经开始在一些企业应用中广泛部署。接下来,我们来看看大语言模型的10大应用场景。一、文本翻译二、恶意软件分析三、创造文本内容四、搜索五、代码开发六、检测和预防网络攻......
  • 面试官问:Kafka 会不会丢消息?怎么处理的?
    作者:Java3y链接:https://www.zhihu.com/question/628325953/answer/3281764326来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。面试官:今天我想问下,你觉得Kafka会丢数据吗?候选者:嗯,使用Kafka时,有可能会有以下场景会丢消息候选者:比如说,我们用Produce......
  • 关于面试被面试官暴怼:“几年研究生白读” 的前因后果
      中午一个网友来信说自己和面试官干起来了,看完他的描述真是苦笑不得,这年头是怎么了,最近互联网CS消息满天飞,怎么连面试官都SB起来了呢?  大概是这样的:这位网友面试时被问及了Serializable接口的底层实现原理,因为这是一个标识性的空接口,大部分同学在学习时都秉持着会用就行......
  • 面试官:你讲下如何设计支持千万级别的短链?
    前言前几天面试遇到的,感觉比较有趣。第一次面试遇到考架构设计相关的题目,挺新奇的,开始向国外大厂靠拢了,比天天问八股文好太多了,工作5年左右的,问八股文,纯纯的不负责任偷懒行为。感觉此问题比较有趣,这几天简单的实现了一版本,和大家分享一下具体的细节,也欢迎大家交流讨论,代码gith......
  • JAVA面试中,面试官最爱问的问题。
    什么是静态变量和静态方法?在Java中,静态变量和静态方法是通过`static`关键字定义的,与类相关联而不是与类的实例相关联。它们在类加载时就被初始化,可以通过类名直接访问,而不需要创建类的实例。###静态变量(StaticVariable)静态变量是类级别的变量,属于类而不是任何单个实例。每......
  • JAVA面试中,面试官最爱问的问题。
    解释Java中的垃圾回收机制。Java中的垃圾回收(GarbageCollection,GC)机制是指Java虚拟机(JVM)自动管理内存的过程,负责回收不再使用的对象所占用的内存空间,以避免内存泄漏和提升程序的内存利用效率。垃圾回收机制的核心是自动检测哪些对象不再被引用,然后释放它们所占用的内存。#......
  • JAVA面试中,面试官最爱问的问题。
    什么是JVM,JRE和JDK?JVM(JavaVirtualMachine)、JRE(JavaRuntimeEnvironment)和JDK(JavaDevelopmentKit)是Java开发和运行环境中的三个重要组件。它们分别扮演不同的角色,共同支持Java程序的开发和运行。###JVM(JavaVirtualMachine)JVM是Java虚拟机,它是Java程序的运行时环境。J......
  • 面试官:Java中缓冲流真的性能很好吗?我看未必
    一、写在开头上一篇文章中,我们介绍了JavaIO流中的4个基类:InputStream、OutputStream、Reader、Writer,那么这一篇中,我们将以四个基类所衍生出来,应对不同场景的数据流进行学习。二、衍生数据流分类我们上面说了java.io包中有40多个类,都从InputStream、OutputStream、Reader、Wr......
  • 面试官:字节流可以处理一切文件为什么还需要字符流呢?
    一、写在开头在计算机领域中百分之九十以上的程序拥有着和外部设备交互的功能,这就是我们常说的IO(Input/Output:输入/输出),所谓输入就是外部数据导入计算机内存中的过程,输出则是将内存或者说程序中的数据导入到外部存储中,如数据库、文件以及其他本地磁盘等。二、什么是IO流这种......
  • 面试官:为什么重写equals方法必须要重新hashCode方法?
    网络上解释的很全面但是很枯涩,也有些难懂,其实就是为了保证当该对象作为key时哈希表的检索效率。如HashMap的get方法是分两步获取的第一步通过key的哈希值找到对应的哈希桶第二步通过equals方法来判断是否为同一个key(因为可能出现哈希冲突)假设一个Student类有三个属性:学号、姓......