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

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

news 2026/3/27 12:48:56

题目

假设高度已知，请写出三栏布局，其中左、右栏宽度各为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

OpenClaw技能开发：为Qwen3-32B定制PDF摘要插件

OpenClaw技能开发&#xff1a;为Qwen3-32B定制PDF摘要插件 1. 为什么需要PDF摘要技能 去年我接手了一个研究项目&#xff0c;需要快速消化上百份行业白皮书和学术论文。每天手动翻阅PDF的日子让我意识到&#xff1a;必须开发一个能自动提取核心观点的工具。这就是我决定为Ope…...

编程新知 2026/3/27 12:28:47

PyTorch 2.8镜像保姆级教程：RTX 4090D下模型量化工具AutoGPTQ实操

PyTorch 2.8镜像保姆级教程&#xff1a;RTX 4090D下模型量化工具AutoGPTQ实操 1. 环境准备与快速部署 在开始使用AutoGPTQ进行模型量化之前&#xff0c;我们需要确保PyTorch 2.8镜像环境已经正确部署。本镜像专为RTX 4090D 24GB显卡优化&#xff0c;预装了CUDA 12.4和所有必要…...

编程新知 2026/3/27 11:52:16

为什么流水线ADC能用Dither，而SAR ADC效果差？深入解析两种架构下的Dither技术差异与改进方案

流水线ADC与SAR ADC中Dither技术的差异化设计与工程实践 在高速高精度数据采集系统中&#xff0c;量化噪声的非线性特性始终是困扰设计者的核心难题。当我们用频谱分析仪观察一个理想正弦波经过ADC转换后的输出时&#xff0c;那些突兀的谐波分量往往源自量化过程的非线性失真。…...

编程新知 2026/3/27 11:27:59

突破软件授权限制：基于注册表权限控制的持久化使用方案——以下载工具为例

突破软件授权限制&#xff1a;基于注册表权限控制的持久化使用方案——以下载工具为例 【免费下载链接】IDM-Activation-Script IDM Activation & Trail Reset Script 项目地址: https://gitcode.com/gh_mirrors/id/IDM-Activation-Script 一、场景痛点&#xff1a;…...

编程新知 2026/3/27 11:11:54

Node.js 轻量级数据库 NeDB 实战指南：从入门到精通

1. 为什么你需要了解NeDB 如果你正在寻找一个轻量级的Node.js数据库解决方案&#xff0c;NeDB绝对值得你花时间研究。作为一个嵌入式数据库&#xff0c;它不需要单独运行数据库服务&#xff0c;数据可以直接存储在内存或磁盘文件中。我在多个小型项目中使用过NeDB&#xff0c;最…...

编程新知 2026/3/27 10:11:28

统计建模大赛的评分标准

2026年统计建模大赛正在进行中&#xff0c;相关文章&#xff1a; 统计建模大赛去哪找数据&#xff1f; 2026年统计建模大赛AI工具使用规范 2026年统计建模大赛选题思路——数字经济统计监测体系研究 我在公开课以及以前的文章中经常强调&#xff0c;数模竞赛不是考试&#…...

编程新知 2026/3/27 8:56:46

Qwen2.5-7B-Instruct效果展示：农业病虫害图像描述→防治方案生成

Qwen2.5-7B-Instruct效果展示&#xff1a;农业病虫害图像描述→防治方案生成 想象一下&#xff0c;一位农民在田间地头&#xff0c;用手机拍下一片叶子上的异常斑点。几分钟后&#xff0c;他不仅得到了这是什么病害的准确诊断&#xff0c;还收到了一份详细的、可操作的防治方案…...

编程新知 2026/3/27 7:58:18

Clawdbot网关配置教程：实现Qwen3-VL:30B与飞书的无缝对接

Clawdbot网关配置教程&#xff1a;实现Qwen3-VL:30B与飞书的无缝对接 1. 准备工作与环境概述 在开始配置前&#xff0c;请确保已完成以下准备工作&#xff1a; 已在CSDN星图AI云平台完成Qwen3-VL:30B的私有化部署&#xff08;参考上篇教程&#xff09;拥有飞书开放平台的企业…...

编程新知 2026/3/27 7:44:15

避开这5个坑！VS2019+Doxygen注释实战：从代码规范到HTML文档生成

VS2019Doxygen注释实战&#xff1a;5个典型陷阱与高效解决方案 在C项目开发中&#xff0c;良好的代码文档是团队协作的基石。Visual Studio 2019与Doxygen的组合为开发者提供了强大的自动化文档生成能力&#xff0c;但许多团队在实际应用中常陷入一些看似简单却影响深远的陷阱。…...

编程新知 2026/3/27 6:49:22

HP-Socket技术演讲视频描述撰写指南：关键词与吸引力

HP-Socket技术演讲视频描述撰写指南&#xff1a;关键词与吸引力 【免费下载链接】HP-Socket High Performance TCP/UDP/HTTP Communication Component 项目地址: https://gitcode.com/gh_mirrors/hp/HP-Socket HP-Socket是一款高性能跨平台网络通信框架&#xff0c;专为…...

编程新知 2026/3/27 5:40:55