【前段面试3+1】21 前端的布局方式有哪些、vw和vh、原型链和类继承的区别、【删除有序数组中的重复项】

news2024/9/9 7:52:25

一、前端的布局方式有哪些？

以下将列出部分布局方式及其简单举例

1.流式布局（Flow Layout）：

        传统的HTML布局，元素按照它们在文档中出现的顺序排列。

<div>这是一个流式布局的div。</div>
<p>这是段落文本。</p>
优点：
  • 灵活性：流式布局可以根据不同的屏幕尺寸和分辨率自适应调整，提供更灵活的显示效果。
  • 响应性：流式布局是响应式设计的基础，能够适应各种设备，包括手机、平板和桌面电脑。
  • 用户体验：由于布局能够自适应，用户在不同设备上浏览网页时可以获得一致的体验。
  • 维护简便：相比固定宽度的布局，流式布局通常只需要设置一套样式规则，减少了维护的复杂性。
  • 内容优先：流式布局强调内容的重要性，布局会根据内容的多少自动调整，避免出现过多的空白。
缺点：
  • 控制性差：由于布局元素的尺寸会随浏览器窗口变化，因此在某些情况下可能难以精确控制元素的布局和间距。
  • 设计限制：对于一些需要固定布局或特定排版的设计，流式布局可能无法满足需求。
  • 性能问题：在某些情况下，流式布局可能需要更多的计算来适应不同的屏幕尺寸，这可能会影响页面加载速度。
  • 兼容性问题：尽管现代浏览器普遍支持流式布局，但在一些老旧的浏览器上可能会出现兼容性问题。
  • 过度滚动：在小屏幕上，流式布局可能导致内容过宽，用户需要水平滚动来查看全部内容，影响阅读体验。

2.弹性布局（Flexible Box Layout，Flexbox）：

        一种更加高效的布局方式，允许容器内元素在不同屏幕尺寸下动态调整大小和排列。

<div class="container">
    <div>Flex 1</div>
    <div>Flex 2</div>
</div>
.container {
    display: flex;
    flex-direction: row; /* 或者 column */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
优点：
  • 空间分配：易于在容器内分配空间。
  • 对齐与分布：提供丰富的对齐和分布选项。
  • 响应式设计：支持不同屏幕尺寸的自适应布局。
  • 简化代码：减少CSS代码量，提高开发效率。
  • 兼容性：现代浏览器广泛支持。
缺点：
  • 学习曲线：需要时间学习Flexbox的属性和行为。
  • 旧浏览器兼容性：可能需要额外的前缀或polyfills支持。
  • 过度使用：可能导致布局复杂，难以维护。
  • 性能影响：在处理大量元素时可能影响性能。
  • 特定布局限制：对于某些复杂布局，可能不如CSS Grid直观。

3.网格布局（Grid Layout）:

一种二维布局系统，可以创建复杂的行和列布局，非常适合复杂的页面布局。

html:

<div class="grid-container">
    <div>Grid 1</div>
    <div>Grid 2</div>
    <div>Grid 3</div>
</div>

css：

.grid-container {
    display: grid;
    grid-template-columns: auto 1fr auto; /* 定义三列 */
    grid-gap: 10px;
}
优点：
  • 二维布局：同时控制行和列的布局方式。
  • 灵活性：可以创建复杂的布局结构。
  • 对齐与分布：提供丰富的对齐和分布选项。
  • 响应式：易于实现响应式设计。
  • 控制性：对布局的控制力强，易于实现精确布局。
缺点：
  • 学习曲线：相对于其他布局模型，学习成本较高。
  • 浏览器兼容性：尽管现代浏览器支持良好，但一些旧浏览器可能不支持或需要polyfills。
  • 性能问题：在处理大量网格项时可能影响性能。
  • 过度使用：可能导致布局过于复杂，难以维护。

4.浮动布局（Float Layout）：

通过CSS的float属性使元素脱离文档流，通常用于创建多列布局。

html：

<div class="float-left">浮动到左边</div>
<div>右侧内容</div>

css：

.float-left {
    float: left;
    width: 50%;
}
优点：
  • 简单性：浮动是CSS中的基本特性，易于理解和使用。
  • 兼容性：几乎所有的浏览器都支持浮动。
缺点：
  • 布局限制：难以创建复杂的布局结构。
  • 维护性：浮动元素脱离文档流，可能导致布局混乱。
  • 响应性：需要额外的技巧来实现响应式设计。
  • 清除浮动：需要使用clear属性或额外的元素来清除浮动，以避免布局问题。

5.定位布局（Positioned Layout）：

使用CSS的position属性（如relative, absolute, fixed, sticky）来控制元素的位置。

html：

<div class="relative">
    <div class="absolute">绝对定位元素</div>
</div>

css：

.relative {
    position: relative;
}
.absolute {
    position: absolute;
    top: 20px;
    left: 20px;
}

6.响应式布局（Responsive Layout）：

利用媒体查询（Media Queries）来根据设备特性（如屏幕尺寸、分辨率）调整布局。

css：

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}
优点：
  • 自适应性：能够适应不同屏幕尺寸和设备。
  • 用户体验：提供一致的浏览体验，无论设备大小。
  • 维护性：通常只需要一套样式表，简化维护。
  • 搜索引擎优化：响应式设计有助于提高网站的SEO表现。
缺点：
  • 复杂性：实现响应式设计可能需要更复杂的CSS和JavaScript。
  • 性能：响应式图片和媒体查询可能会影响页面加载速度。
  • 测试：需要在多种设备和分辨率上进行测试，以确保兼容性。
  • 控制性：在某些情况下，响应式设计可能难以实现精确的布局控制。

7.自适应布局（Adaptive Layout）：

根据设备类型或屏幕尺寸范围提供不同的布局设计。

.container {
    width: 100%;
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
}

8.框架布局（Frame Layout）：

使用框架（如<iframe>或<frame>）来嵌入其他页面或内容。

9.单列布局（Single-column Layout）：

将内容分成多个垂直列，类似于报纸的布局。

<div class="single-column">
    内容从上到下排列。
</div>

10.圣杯布局（Holy Grail Layout）：

一个经典的三列布局，中间列宽度可变，两侧列固定宽度。

html：

<div class="container">
    <div class="sidebar">侧边栏1</div>
    <div class="content">主要内容</div>
    <div class="sidebar">侧边栏2</div>
</div>

css：

.container {
    display: flex;
    justify-content: space-between;
}
.sidebar {
    flex: 1;
}
.content {
    flex: 3;
}

11.CSS框架布局：

使用CSS框架（如Bootstrap, Foundation, Tailwind CSS等）提供的预定义类和组件来快速构建布局。

html：

<div class="container">
    <div class="row">
        <div class="col-md-4">列1</div>
        <div class="col-md-4">列2</div>
        <div class="col-md-4">列3</div>
    </div>
</div>

12.视口单位布局（Viewport Units Layout）：

使用视口宽度（vw）、视口高度（vh）等单位来创建响应式元素尺寸。

html：

<div class="full-screen">全屏元素</div>

css：

.full-screen {
    width: 100vw; /* 视口宽度 */
    height: 100vh; /* 视口高度 */
}

二、vw、vh是什么？

vw 和 vh 是CSS中用于布局的视口单位（Viewport Units）。

  • vw：视口宽度的百分比（Viewport Width）。1vw 等于视口宽度的1%。例如，如果视口宽度是100个单位，那么 10vw 就是10个单位。这个单位常用于创建响应式设计，因为它会根据视口宽度的变化而变化。

  • vh：视口高度的百分比（Viewport Height）。1vh 等于视口高度的1%。与 vw 类似，vh 也是根据视口高度来计算的。这允许元素的高度能够根据视口的高度自适应变化。

三、JavaScript中原型链和类继承有什么区别？

JavaScript中的原型链和类继承是两种不同的概念，它们用于实现代码的复用和继承特性。以下是原型链和类继承的主要区别：

1.实现方式：

  • 原型链：基于原型的对象继承。在JavaScript中，每个对象都有一个内部属性[[Prototype]]（可以通过__proto__访问），它指向了创建该对象时所用构造函数的原型对象。属性和方法的查找会沿着这个原型链进行。
  • 类继承：基于ES6中引入的class语法。类继承实际上是语法糖，其背后仍然使用原型链来实现。class允许你定义一个构造函数，并使用extends关键字来实现继承。

2.语法：

  • 原型链：使用构造函数和显式的原型对象（prototype）来定义对象的结构和行为。
  • 类继承：使用class关键字来定义类，并通过extends关键字来实现类的继承。

3.可读性：

  • 原型链：原型链的继承可能难以追踪，尤其是在多层继承的情况下。
  • 类继承：提供了更清晰和直观的语法，使代码更容易理解和维护。

4.构造函数的使用：

  • 原型链：在原型链继承中，构造函数可以通过call或apply方法被调用，以确保能正确设置this的上下文。
  • 类继承：在类继承中，子类的构造函数会自动调用父类的构造函数（使用super()），确保this的上下文被正确设置。

5.方法访问：

  • 原型链：方法必须定义在原型对象上，所有实例共享这些方法。
  • 类继承：方法可以定义在类体内，每个子类实例都可以有自己的方法实例，也可以通过static关键字定义静态方法。

6.私有属性和方法：

  • 原型链：没有真正的私有属性或方法，但可以使用闭包来模拟。
  • 类继承：可以使用#前缀定义私有字段和方法，提供了更好的封装性。

7.多重继承：

  • 原型链：可以通过组合多个原型来实现多重继承的效果。
  • 类继承：不支持直接的多重继承，但可以通过混入（mixins）或其他模式来实现类似的效果。

8.性能：

  • 原型链：由于原型链的查找可能涉及多个对象，可能会有轻微的性能开销。
  • 类继承：由于JavaScript引擎的优化，类继承的性能通常与原型链相当。

9.兼容性：

  • 原型链：所有JavaScript引擎都支持原型链。
  • 类继承：较新的JavaScript引擎支持class关键字，但一些旧的浏览器可能需要转译。

四、【算法】删除有序数组中的重复项

题目：

给你一个 非严格递增排列 的数组 nums ，请你 原地 删除重复出现的元素，使每个元素 只出现一次 ，返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。

考虑 nums 的唯一元素的数量为 k ，你需要做以下事情确保你的题解可以被通过：

  • 更改数组 nums ，使 nums 的前 k 个元素包含唯一元素，并按照它们最初在 nums 中出现的顺序排列。nums 的其余元素与 nums 的大小不重要。
  • 返回 k 。

判题标准:

系统会用下面的代码来测试你的题解:

int[] nums = [...]; // 输入数组
int[] expectedNums = [...]; // 长度正确的期望答案

int k = removeDuplicates(nums); // 调用

assert k == expectedNums.length;
for (int i = 0; i < k; i++) {
    assert nums[i] == expectedNums[i];
}

如果所有断言都通过，那么您的题解将被 通过。

示例 1：

输入：nums = [1,1,2]
输出：2, nums = [1,2,_]
解释：函数应该返回新的长度 2，并且原数组 nums 的前两个元素被修改为 1, 2 。不需要考虑数组中超出新长度后面的元素。

示例 2：

输入：nums = [0,0,1,1,1,2,2,3,3,4]
输出：5, nums = [0,1,2,3,4]
解释：函数应该返回新的长度 5， 并且原数组 nums 的前五个元素被修改为 0, 1, 2, 3, 4。不需要考虑数组中超出新长度后面的元素。

提示：

  • 1 <= nums.length <= 3 * 104
  • -104 <= nums[i] <= 104
  • nums 已按 非严格递增 排列
int removeDuplicates(int* nums, int numsSize) {
    
}

题解：

我们可以使用双指针的方法。

  1. 首先，检查数组的大小，如果为 0，则返回 0。
  2. 初始化一个指针 k 为 1，因为我们至少有一个唯一的元素。
  3. 遍历数组，从第二个元素开始，比较当前元素和前一个元素：如果两个元素不同，就意味着找到了一个新的唯一元素，我们将其放到 k 指向的位置，并将 k 增加 1。
  4. 循环结束后，返回 k，这就是去重后的数组中唯一元素的个数。
int removeDuplicates(int* nums, int numsSize) {  
    if (numsSize == 0) {  
        return 0;  // 如果数组为空，返回 0  
    }  

    int k = 1;  // k 初始化为 1，因为至少存在一个唯一元素  

    for (int i = 1; i < numsSize; i++) {  
        // 只要当前元素与前一个元素不同，就将其放置在 k 的位置  
        if (nums[i] != nums[k - 1]) {  
            nums[k] = nums[i];  
            k++;  // 增加 k 的大小  
        }  
    }  

    return k;  // 返回唯一元素的个数  
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1963520.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【小知识】黑白分明的计算机世界——关系表达式，逻辑表达式和三目运算符

【小知识】黑白分明的计算机世界——关系表达式，逻辑表达式和三目运算符

【小知识】黑白分明的计算机世界——关系表达式&#xff0c;逻辑表达式和三目运算符 1.逻辑变量2.关系表达式和逻辑表达式2.1.关系表达式2.1.1.例题——a和b的关系2.1.2.浮点数精度误差 2.2.逻辑表达式2.2.1.常见的逻辑运算符2.2.2.优先级2.2.3.注意事项2.2.3.1.在写逻辑表达式…
阅读更多...
书生大模型学习笔记 - 连接云端开发机

书生大模型学习笔记 - 连接云端开发机

申请InternStudio开发机&#xff1a; 这里进去报名参加实战营即可获取 书生大模型实战营 InternStudio平台 创建开发机 SSH连接开发机&#xff1a; SSH免密码登录 本地创建SSH密钥 ssh-keygen -t rsa打开以下文件获取公钥 ~/.ssh/id_rsa.pub去InternStudio添加公钥 …
阅读更多...
OPenCV高级编程——OpenCV常见的API及绘图知识详解

OPenCV高级编程——OpenCV常见的API及绘图知识详解

目录 引言 一、Mat类详解 1. Mat类的基本结构 2. Mat类的数据类型 3. Mat类的创建与初始化 4. Mat类的使用技巧 二、OpenCV核心功能模块 1. 基本的图像读取与显示 2. 图像的保存 3. 矩阵操作 4. 等待键盘输入与销毁窗口 5. 命名窗口 三、图像处理模块 1. 色彩空间…
阅读更多...
一个简单的车辆目标检测和跟踪示例

一个简单的车辆目标检测和跟踪示例

点击下方卡片&#xff0c;关注“小白玩转Python”公众号 介绍 目标检测&#xff1a;目标检测是指在图像或视频帧中识别和定位特定目标&#xff0c;并使用边界框来确定它们的位置。YOLO&#xff08;You Only Look Once&#xff09;是一种高效的单阶段目标检测算法&#xff0c;以…
阅读更多...
普冉Puya 超高性价比M0 MCU 工业电子解决方案

普冉Puya 超高性价比M0 MCU 工业电子解决方案

普冉半导体(上海)股份有限公司成立于2016年&#xff0c;总部位于上海张江高科&#xff0c;公司目前主要产品包括微控制器芯片、非易失性存储器芯片及模拟产品。产品广泛应用于物联网、智能手机及周边、可穿戴、服务器、光模块、工业控制、汽车电子、安防等领域。公司在深圳、韩…
阅读更多...
Spring Boot集成udp通讯

Spring Boot集成udp通讯

Spring Boot集成udp通讯 加入依赖编辑配置文件配置相关属性具体业务类客户端调试 加入依赖 <!--加入UDP通信所需依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-integration</artifactId&…
阅读更多...
GD32 MCU电源复位和系统复位有什么区别

GD32 MCU电源复位和系统复位有什么区别

GD32 MCU的复位分为电源复位和系统复位&#xff0c;电源复位又称为冷复位&#xff0c;相较于系统复位&#xff0c;上电复位更彻底&#xff0c;下面为大家详细介绍上电复位和系统复位的实现以及区别。 电源复位包括上电/掉电复位或者从standby模式唤醒产生的复位&#xff0c;电…
阅读更多...
HarmonyOS NEXT——奇妙的调用方式

HarmonyOS NEXT——奇妙的调用方式

注解调用一句话总结Extend抽取特定组件样式、事件&#xff0c;可以传递参数Style抽取公共样式、事件&#xff0c;不可以传递参数Builder抽取结构、样式、事件&#xff0c;可以传递参数BuilderParams自定义组件中传递UI组件多个BuilderParams自定义组件中传递多个UI组件 Extend…
阅读更多...
echarts加载区域地图，并标注点

echarts加载区域地图，并标注点

效果如下&#xff0c;加载了南海区域的地图&#xff0c;并标注几个气象站点&#xff1b; 1、下载区域地图的JSON&#xff1a;DataV.GeoAtlas地理小工具系列 新建nanhai.json&#xff0c;把下载的JSON数据放进来 说明&#xff1a;如果第二步不打勾&#xff0c;只显示省的名字&a…
阅读更多...
全新微软语音合成网页版源码，短视频影视解说配音网页版系统-仿真人语音

全新微软语音合成网页版源码，短视频影视解说配音网页版系统-仿真人语音

源码介绍 最新微软语音合成网页版源码&#xff0c;可以用来给影视解说和短视频配音。它是TTS文本转语言&#xff0c;API接口和PHP源码。 这个微软语音合成接口的源码&#xff0c;超级简单&#xff0c;就几个文件搞定。用的是官方的API&#xff0c;试过了&#xff0c;合成速度…
阅读更多...
InnoDB存储引擎(1)

InnoDB存储引擎(1)

InnoDB存储引擎的优点 InnoDB在设计时考虑到了处理大数据量时的性能&#xff0c;支持事务&#xff0c;回滚和崩溃修复的能力&#xff0c;通过多版本并发控制来减少锁定(降低了锁的争用),同时还支持外键的约束&#xff1b;通过缓冲池在内存中缓存数据来提高查询的性能&#xff…
阅读更多...
内容营销专家刘鑫炜：驾驭AI为品牌服务，从成为卓越投喂师开始！

内容营销专家刘鑫炜：驾驭AI为品牌服务，从成为卓越投喂师开始！

在这个信息爆炸、注意力稀缺的时代&#xff0c;品牌内容营销已成为企业连接消费者、塑造品牌形象的关键途径。而人工智能&#xff08;AI&#xff09;技术的融入&#xff0c;更是为内容营销带来了前所未有的变革与机遇。然而&#xff0c;要让AI真正为你的品牌内容营销高效服务&a…
阅读更多...
vue3后台管理系统 vue3+vite+pinia+element-plus+axios上

vue3后台管理系统 vue3+vite+pinia+element-plus+axios上

前言 项目安装与启动 使用vite作为项目脚手架 # pnpm pnpm create vite my-vue-app --template vue安装相应依赖 # sass pnpm i sass # vue-router pnpm i vue-router # element-plus pnpm i element-plus # element-plus/icon pnpm i element-plus/icons-vue安装element-…
阅读更多...
WebWorker处理百万数据

WebWorker处理百万数据

Home.vue <template><el-input v-model"Val" style"width: 400px"></el-input><el-button click"imgHandler">过滤</el-button><hr /><canvas id"myCanvas" width"500" height&quo…
阅读更多...
不懂就问：EI论文真的很水吗？如何快速水一篇EI论文呢？

不懂就问：EI论文真的很水吗？如何快速水一篇EI论文呢？

最近在有刷到一个这样的话题&#xff0c;发表一篇EI论文容易吗&#xff1f; 很多人可能会觉得EI没有什么用&#xff0c;但其实EI的含金量也很高。 比如目前有很多单位的老师在评选职称的时候&#xff0c;EI会议中的iee系列依然比发表一篇北大核心还高。 那发表EI论文到底容…
阅读更多...
springboot家校共育平台-计算机毕业设计源码54235

springboot家校共育平台-计算机毕业设计源码54235

摘 要 采用高效的SpringBoot框架&#xff0c;家校共育平台为家长与教师提供了便捷的沟通渠道。该平台整合了丰富的教育资源&#xff0c;实现了家校之间的即时信息互通&#xff0c;从而助力协同教育。 为进一步方便用户访问和使用&#xff0c;平台与微信小程序进行了深度整合。家…
阅读更多...
WPF ViewBox，Canva之SVG

WPF ViewBox，Canva之SVG

ViewBox Viewbox是WPF中的一个内容控件&#xff0c;它可以自动调整其内部子元素的大小以适应其自身的尺寸。Viewbox通过保持子元素原有的宽高比&#xff0c;对内容进行均匀的缩放&#xff0c;使其完全填充控件的空间。 Stretch Stretch属性决定了Viewbox如何缩放其内容。它可…
阅读更多...
IMU用于野外动作质量评估

IMU用于野外动作质量评估

近期&#xff0c;来自日本的研究者开发出一个名为MMW-AQA的创新性数据集&#xff0c;该数据集融合了多种传感器信息&#xff0c;专门设计用于用于客观评价人类在复杂环境下的动作质量&#xff0c;这一突破为运动分析和智能安全系统的优化提供了新的可能。 MMW-AQA数据集结合了毫…
阅读更多...
MVC软件设计模式及QT的MVC架构

MVC软件设计模式及QT的MVC架构

目录 引言 一、MVC思想介绍 1.1 MCV模型概述 1.2 Excel的处理数据 1.3 MVC模式的优势 二、QT中的MVC 1.1 模型&#xff08;Model&#xff09; 1. QAbstractItemModel 2. QStringListModel 3. QStandardItemModel 4. QSqlTableModel 和 QSqlQueryModel 5. QAbstract…
阅读更多...
为什么建议使用 for…of 循环而不是 foreach 循环呢

为什么建议使用 for…of 循环而不是 foreach 循环呢

在 JavaScript 和 TypeScript 的世界里&#xff0c;遍历数组是一项常见任务。许多开发者因为 .forEach 的简单和熟悉而习惯使用它。 然而&#xff0c;有一个更强大且更灵活的替代方案&#xff1a;for…of 循环。&#x1f52e; 本文将深入探讨为什么你应该考虑切换到 for…of 以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023