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

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

news 2025/7/5 17:57:16

题目

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

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/7/2 13:49:31

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/7/5 1:18:06

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/7/3 10:18:49

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/7/5 0:46:33

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/7/2 16:58:00

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/7/4 22:38:24

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/1 4:45:07

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/7/4 11:31:15

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2025/7/4 15:01:45

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/6/16 18:42:13