当前位置： 首页 > news >正文

前端面试经典题--页面布局

news 2025/12/17 2:22:54

题目

假设高度已知，请写出三栏布局，其中左、右栏宽度各为300px，中间自适应。

五种解决方式代码

浮动解决方式
绝对定位解决方式
flexbox解决方式
表格布局
网格布局

源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<style>
html *{padding: 0;margin: 0;
}
.layout{margin-top: 20px;
}
.layout article div{min-height: 100px;
}
</style>
</head><body>
<section class="layout"><article class="left-right-center"><div class="left"></div><div class="right"></div><div class="center"></div></article>
</section><!-- 浮动解决方式 -->
<!-- 就浮动模式，HTML的写法是左右中，其他的都可以是左中右 -->
<style>
.layout .left{float: left;width: 300px;background: red;
}
.layout .right{float: right;width: 300px;background: blue;
}
.layout .center{background: yellow;
}
</style><!-- 绝对定位解决方式 -->
<style>
.layout .left-center-right>div{position: absolute;
}
.layout .left{left: 0;width: 300px;background: red;
}
.layout .center{left: 300px;right: 300px;background: yellow;
}
.layout .right{right: 0;width: 300px;background: blue;
}
</style><!-- flexbox解决方式 -->
<style>
.layout .left-center-right{display: flex;
}
.layout .left{width: 300px;background: red;
}
.layout .center{flex: 1;background: yellow;
}
.layout .right{width: 300px;background: blue;
}
</style><!-- 表格布局 -->
<style>
.layout .left-center-right{width: 100%;display: table;height: 100px;
}
.layout .left-center-right>div{display: table-cell;
}
.layout .left{width: 300px;background: red;
}
.layout .center{background: yellow;
}
.layout .right{width: 300px;background: blue;
}
</style><!-- 网格布局 -->
<style>
.layout .left-center-right{display: grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;
}
.layout .left{background: red;
}
.layout .center{background: yellow;
}
.layout .right{background: blue;
}
</style>
</body>

展示效果

在这里插入图片描述

知识拓展

上述5中解决方式是比较常⻅的，但是我们 不能只局限于为了问答而问答，我们应该从此基础上升华一下问题。
答完了这5种常⻅方式，并不代表我们⻚面布局这一话题就结束了，面试官可能还会延伸我们的问题，比如：
这5种布局方式各自有什么优点和缺点？
如果 高度已知 条件去掉，考虑纵向，那么对于中间内容过多，导致中间格子撑开，此时需要左右跟着撑开，以上5种方式哪几种还能使用？
这5中方式的兼容性如何？如果让你选择一种最优的去应用于业务，你会选择哪种方式？
那么，接下来就来围绕这三个问题来讲解：

1、各自的优缺点

① 对于浮动：
优点：
兼容性比较好，把清除浮动和其它浮动周边元素的关系处理好的话，那么它的兼容性是挺不错的。
缺点：
设置浮动之后，脱离了文档流，处理不好的话，会带来很多问题，这是它本身的局限性。
② 对于绝对定位：
优点：
快捷，不容易出问题
缺点：
本身脱离了文档流，就会导致子元素跟着脱离文档流。因此，导致绝对定位的 有效性 、 可使用性 比较差。
③ 对于flexbox
css3中推出的flex布局，就是为了解决上述两种方式不足而出现的，算是比较完美的一种方式，尤其是对于移动端。
④ 对于表格布局
优点：
尽管多数人吐槽表格布局，但其实，表格布局在很多场景都适用的。比如上文写的三栏布局设计当中，表格布局是不是很轻松就实现了呢？
同时，表格布局的兼容性是非常好的，当用 flex 解决不了问题的时候，对于PC端 IE8 是不支持 flex 的，此时就可以尝试表格布局。
缺点：
除开历史上一些诟病外，还有一个：
比如我们把三栏理解成为三个小单元格，那么当其中某一个单元格高度超出的时候，其余两侧也会跟着调整，于是对于有些场景是不合适的。因此，对于不同场景，我们可以在 flex 和 表格 布局进行选优操作
⑤ 对于网格布局
这一块的话，算是新热点，也是经历了一段时间的演变，从上文代码来看的话，通过网格布局我们能让代码更加简单、方便实现逻辑。在面试的时候提到也可以说明你比较关注新的事物，主动学习能力不错。
当然，以上表述有部分个人思考，也有现常说的优缺点，大家可以根据研究布局方式进行深入思考，学习更多的使用场景以及优缺点，其次，欢迎提出新的解决方案及相关知识点，后续进行补充。

相关文章：

前端面试经典题--页面布局

题目 假设高度已知&#xff0c;请写出三栏布局&#xff0c;其中左、右栏宽度各为300px&#xff0c;中间自适应。 五种解决方式代码 浮动解决方式 绝对定位解决方式 flexbox解决方式 表格布局 网格布局 源代码 <!DOCTYPE html> <html lang"en"> <…...

编程日记 2023/9/12 13:55:08

【webrtc】接收/发送的rtp包、编解码的VCM包、CopyOnWriteBuffer

收到的rtp包RtpPacketReceived 经过RtpDepacketizer 解析后变为ParsedPayloadRtpPacketReceived 分配内存，执行memcpy拷贝：然后把 RtpPacketReceived 给到OnRtpPacket 传递：uint8_t* media_payload = media_packet.AllocatePayload(rtx_payload.size());RTC...

编程日记 2023/9/12 13:54:06

Bash常见快捷键

生活在 Bash Shell 中&#xff0c;熟记以下快捷键&#xff0c;将极大的提高你的命令行操作效率。 编辑命令 Ctrl a &#xff1a;移到命令行首Ctrl e &#xff1a;移到命令行尾Ctrl f &#xff1a;按字符前移&#xff08;右向&#xff09;Ctrl b &#xff1a;按字符后移&a…...

编程日记 2023/9/12 13:53:05

软件验收测试

1. 服务流程 验收测试 2. 服务内容 测试过程中&#xff0c;根据合同要求制定测试方案&#xff0c;验证工程项目是否满足用户需求&#xff0c;软件质量特性是否达到系统的要求。 3. 周期 10-15个工作日 4. 报告用途 可作为进行地方、省级、国家、部委项目的验收&#xff0…...

编程日记 2023/9/12 13:52:04

Java 与零拷贝

零拷贝是由操作系统实现的&#xff0c;使用 Java 中的零拷贝抽象类库在支持零拷贝的操作系统上运行才会实现零拷贝&#xff0c;如果在不支持零拷贝的操作系统上运行&#xff0c;并不会提供零拷贝的功能。 简述内核态和用户态 Linux 的体系结构分为内核态&#xff08;内核空间…...

编程日记 2023/9/12 13:51:03

AI性能指标解析：误触率与错误率

简介&#xff1a;随着人工智能&#xff08;AI&#xff09;技术的不断发展&#xff0c;它越来越多地渗透到我们日常生活的各个方面。从个人助手到自动驾驶&#xff0c;从语音识别到图像识别&#xff0c;AI正不断地改变我们与世界的互动方式。但你有没有想过&#xff0c;如何准确…...

编程日记 2023/9/12 13:50:01

count(*) 和 count(1) 有什么区别？哪个性能最好？

哪种 count 性能最好&#xff1f; count() 是什么&#xff1f; count() 是一个聚合函数&#xff0c;函数的参数不仅可以是字段名&#xff0c;也可以是其他任意表达式&#xff0c;该函数的作用是统计符合查询条件的记录中&#xff0c;函数指定的参数不为 NULL 的记录由多少条。…...

编程日记 2023/9/12 13:48:59

橡胶密封件为什么会老化？

橡胶密封件以其优良的密封性能被广泛应用于各个行业。然而&#xff0c;随着时间的推移&#xff0c;这些橡胶密封件往往会恶化和老化。在这篇文章中&#xff0c;我们将探讨橡胶密封件老化的原因。 1&#xff0c;导致橡胶密封件老化的主要因素之一是暴露在阳光和紫外线(UV)辐射下…...

编程日记 2023/9/12 13:47:57

Uboot中bootargs以及bootcmd设置

Uboot命令 一、Uboot基础命令 查看帮助信息&#xff1a; uboot#help打印环境变量&#xff1a; uboot#printenv其他命令&#xff1a; uboot#help ? - 帮助命令&#xff0c;等同于 help base - 打印或设置地址偏移量 bdinfo - 打印板级信息结构 boot …...

编程日记 2023/9/12 13:46:56

冠达管理：减肥药概念再度爆发，常山药业两连板，翰宇药业等大涨

减肥药概念12日盘中再度拉升&#xff0c;到发稿&#xff0c;常山药业“20cm”涨停&#xff0c;翰宇药业涨超14%&#xff0c;德展健康涨停&#xff0c;金凯生科涨近9%&#xff0c;争气股份、普利制药、昊帆生物涨约5%&#xff0c;诺泰生物、圣诺生物、华森制药等涨超4%。 常山药…...

编程日记 2023/9/12 13:45:54

实现在外网SSH远程访问内网树莓派的详细教程

文章目录 如何在局域网外SSH远程访问连接到家里的树莓派&#xff1f;如何通过 SSH 连接到树莓派步骤1. 在 Raspberry Pi 上启用 SSH步骤2. 查找树莓派的 IP 地址步骤3. SSH 到你的树莓派步骤 4. 在任何地点访问家中的树莓派4.1 安装 Cpolar4.2 cpolar进行token认证4.3 配置cpol…...

编程日记 2023/9/12 13:44:52

Pytorch框架详解

文章目录 引言1. 安装与配置1.1 如何安装PyTorch1.2 验证安装 2. 基础概念2.1 张量&#xff08;Tensors&#xff09;2.1.1 张量的基本特性2.1.2 创建张量2.1.3 张量操作 2.2 自动微分&#xff08;Autograd&#xff09;2.2.1 基本使用2.2.2 计算梯度2.2.3 停止追踪历史2.2.4 自定…...

编程日记 2023/9/12 13:43:51

2023年9月制造业NPDP产品经理国际认证报名来这错不了

产品经理国际资格认证NPDP是新产品开发方面的认证&#xff0c;集理论、方法与实践为一体的全方位的知识体系&#xff0c;为公司组织层级进行规划、决策、执行提供良好的方法体系支撑。 【认证机构】 产品开发与管理协会&#xff08;PDMA&#xff09;成立于1979年&#xff0c;是…...

编程日记 2023/9/12 13:42:50

linux(centos7)配置SSH免密登录

给三台机器配置主机名映射 在Windows系统中修改hosts文件&#xff0c;新增以下内容&#xff1b; 192.168.xxx.xxx bigdata_node1 192.168.xxx.xxx bigdata_node2 192.168.xxx.xxx bigdata_node33台Linux的/etc/hosts文件中&#xff0c;填入如下内容。 192.168.xxx.xxx bigda…...

编程日记 2023/9/12 13:41:49

cf 交互题

今天cf遇到了交互题&#xff0c;这个交互题的算法很很很简单&#xff0c;但是在交互上卡了&#xff0c;导致交上的代码都不算罚时。&#xff08;更伤心了。 所以&#xff0c;现在写一下交互题的做法&#xff0c;印象深刻嘛。 交互题&#xff0c;就是跟机器进行交互。你代码运…...

编程日记 2023/9/12 13:40:48

成都瀚网科技有限公司：抖音怎么绑定抖音小店才好？

抖音是一款非常流行的短视频应用&#xff0c;为用户提供了一个展示才华、分享生活的平台。在抖音上&#xff0c;用户可以通过绑定抖音商店来销售自己的产品或服务&#xff0c;从而实现商业变现。那么&#xff0c;抖音如何绑定抖音商店呢&#xff1f; 1、抖音如何绑定抖音商店&a…...

编程日记 2023/9/12 13:39:46

大数据组件-Flink环境搭建

&#x1f947;&#x1f947;【大数据学习记录篇】-持续更新中~&#x1f947;&#x1f947; 个人主页&#xff1a;beixi 本文章收录于专栏&#xff08;点击传送&#xff09;&#xff1a;【大数据学习】 &#x1f493;&#x1f493;持续更新中&#xff0c;感谢各位前辈朋友们支持…...

编程日记 2023/9/12 13:38:45

Java——》synchronized互斥性

推荐链接&#xff1a; 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…...

编程日记 2023/9/12 13:37:44

第十章 数组和指针

本章介绍以下内容&#xff1a; 关键字&#xff1a;static 运算符&#xff1a;&、*&#xff08;一元&#xff09; 如何创建并初始化数组 指针&#xff08;在已学过的基础上&#xff09;、指针和数组的关系 编写处理数组的函数 二维数组 人们通常借助计算机完成统计每月的支出…...

编程日记 2023/9/12 13:36:41

JVM系列 运行时数据区

系列文章目录 第一章 运行区实验 文章目录 系列文章目录前言一、堆&#xff08;Heap&#xff09;1.1、新生代/Young区1.1.1、Eden区1.1.2、Survival区 1.2、年老代&#xff08;old区&#xff09; 二、虚拟机栈&#xff08;Stack&#xff09;2.1、栈顶缓存技术2.2、溢出2.3、栈…...

编程日记 2023/9/12 13:35:40

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/12/13 15:51:25

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/12/14 7:37:45

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/12/14 16:13:40

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2025/12/9 22:52:47

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/12/13 8:47:33

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2025/12/3 6:15:42