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

前端工程师面试题10条必会笔试题

news 2026/4/1 23:13:13

布局 左边20% 中间自适应 右边200px 不能用定位

答案：圣杯布局/双飞翼布局或者flex

什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

简述一下src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。<script src =”js.js”></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href=”common.css” rel=”stylesheet”/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

z-index是什么？在position的值是什么时可以触发？

答案:absolute,relative,fixed, sticky

什么是标准文档流？

文档流指的是元素排版布局过程中，遵循于从上向下，从左向右的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

分为两种等级：块级元素和行内元素；

块级元素：

1).霸占一行，不能与其他任何元素并列

2).能接受宽、高

3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

行内元素：

1).与其他元素并排

2).不能设置宽、高。默认的宽度就是文字的宽度

在HTML中，标签分为：文本级和容器级；

文本级：p、span、a、b、i、u、em

容器级：div、h系列、li、dt、dd

简述选择器~和+的区别

答案:都是层级选择器

相邻兄弟选择器： E + F, 选中的仅是一个元素。同级并且F元素在E元素的后面。

通用兄弟选择器：E ~ F 选中的是与E相邻的后面的兄弟元素f

flex中元素的margin是否会合并

答案:不会合并

<div><div></div></div>,父元素和子元素宽高不固定，如何实现水平垂直居中

答案:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
body{
display: flex;
}
section{
background: pink;
display: flex;
flex: 1;
align-items: center;
justify-content: center;}article{
background: blue;}</style>
</head>
<body>
<section>
<article>123</article>
</section></body>
</html>

简述title与h1的区别，b与strong的区别，i与em的区别

1、title是网站header部分的内容是网站的标题，而h表示body内的标题

2、但从视觉上效果观看b与strong、i与em是没有区别的，唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签

请问苹果原生浏览器中默认样式如何清除，例如button，input的默认样式（谷歌浏览器没有问题）

input[type="submit"],
input[type="reset"],
input[type="button"],
button {-webkit-appearance: none;
}

相关文章：

前端工程师面试题10条必会笔试题

布局 左边20% 中间自适应 右边200px 不能用定位答案&#xff1a;圣杯布局/双飞翼布局或者flex什么叫优雅降级和渐进增强&#xff1f;渐进增强 progressive enhancement&#xff1a;针对低版本浏览器进行构建页面&#xff0c;保证最基本的功能&#xff0c;然后再针对高级浏览器进…...

编程日记 2023/2/21 20:38:37

【技术分享】Web自动化之Selenium安装

Web 应用程序的验收测试常常涉及一些手工任务&#xff0c;例如打开一个浏览器&#xff0c;并执行一个测试用例中所描述的操作。但是手工执行的任务容易出现人为的错误&#xff0c;也比较费时间。因此&#xff0c;将这些任务自动化&#xff0c;就可以消除人为因素。Selenium 可以…...

编程日记 2023/2/21 20:37:31

【Linux】进程状态的理解

✍作者&#xff1a;阿润菜菜 &#x1f4d6;专栏&#xff1a;Liunx系统编程 本文目录概述两个先行概念我们为啥创建进程Linux下的进程状态1. R 运行状态2.S 休眠状态 --- 可中断休眠状态3. D 磁盘休眠状态 ---不可中断休眠4.T 暂停状态 &#xff08;t 追踪暂停状态&#xff09;5…...

编程日记 2023/2/21 20:36:23

打游戏哪种蓝牙耳机比较好？适合玩游戏的无线蓝牙耳机

2023年耳机市场一如既往地卷&#xff0c;不只是卷音质&#xff0c;还在外观和功能上做了许多的改进&#xff0c;以至于现在哪怕不懂耳机的人从各电商平台都能闭眼入一个款平价品牌耳机且极少会踩雷&#xff0c;玩游戏是当前年轻人的娱乐方式&#xff0c;下面整理了几款适合玩游…...

编程日记 2023/2/21 20:35:17

Fortinet推出新一代自研安全芯片，跨所有网络边缘加速网络与安全融合

专注网络与安全融合的全球网络安全领导者 Fortinet&#xff08;NASDAQ&#xff1a;FTNT&#xff09;&#xff0c;近日宣布推出新一代自研安全芯片 FortiSP5&#xff0c;作为 Fortinet ASIC 技术的最新突破&#xff0c;有力推动了分布式网络边缘安全的重大飞跃。FortiSP5 源自 F…...

编程日记 2023/2/21 20:34:10

ChatGPT爆火背后的真相：学编程已经成为必选项

这一阵最热门的话题&#xff0c;莫过于人工智能新选手——ChatGPT&#xff0c;在推出后只用了两个月就积累了1亿用户&#xff01;它的出现在科技圈掀起了一阵“惊涛骇浪”&#xff0c;有人称ChatGPT的意义&#xff0c;堪比当年蒸汽机的出现&#xff0c;它足以爆发新一轮的“工业…...

编程日记 2023/2/21 20:32:59

Unity UI框架

一、简介 最近在各大网站看了一下 Unity3d 的 UI 框架&#xff0c;各种 UI 框架已经有很多的版本了&#xff0c;各有千秋&#xff0c;有的功能虽然写的完善&#xff0c;但用起来太复杂&#xff0c;有的框架功能不完善&#xff0c;搞个课程就上架了&#xff0c;还有什么 MVC 框…...

编程日记 2023/2/21 20:31:53

vue2提取vue-router的title单独存放，使用i18n实现

成品效果 首先引入i18n(vue-i18n官网文档) 依赖包 npm install vue-i18n8然后单独在src目录下新建一个文件夹lang&#xff0c;存放相对应的变量名称&#xff0c;我这里只做显示中文所以其他引入我都注释了&#xff0c;具体目录如下&#xff1a; src\lang/zh.js部分代码 export…...

编程日记 2023/2/21 20:30:47

【Linux操作系统】【综合实验三 用户帐号、文件系统与系统安全管理】

文章目录一、实验目的二、实验要求三、实验内容四、实验报告要求一、实验目的 要求掌握Linux系统用户的创建、删除与管理操作&#xff1b;熟悉Linux文件系统的管理模式&#xff0c;学会创建用户文件系统并装载和卸载文件系统&#xff1b;掌握超级用户的管理方式与权限&#xf…...

编程日记 2023/2/21 20:29:38

sqlite3数据库-sqlite语句1(五)

DML(Data Manipulation Language,数据操作语言) SELECT:查询表中的数据;SELECT语句中使用WHERE子句SELECT <列名>,... FROM <表名> WHERE <条件表达式>;SELECT id,name,purchase_price FROM Product; /*使用逗号分隔查询多列,顺序同子句顺序*/ SELECT * FROM…...

编程日记 2023/2/21 20:28:28

【图像分类】卷积神经网络之LeNet5网络模型实现MNIST手写数字识别

写在前面： 首先感谢兄弟们的关注和订阅，让我有创作的动力，在创作过程我会尽最大能力，保证作品的质量，如果有问题，可以私信我，让我们携手共进，共创辉煌。 在上一篇博文中我们对LeNet5网络模型的结构进行了剖析，本篇博文，我们将使用PyTorch搭建LeNet5实现MNIST手写数字…...

编程日记 2023/2/21 20:27:20

前端开发环境搭建

文章目录Node.js是什么安装查看版本入门示例NPM使用 npm 命令安装模块常见命令使用淘宝 NPM 镜像TypeScript安装入门示例从github拉取构建项目如何从零创建一个TypeScript项目规划目录结构新建项目Web App运行服务添加依赖打包使用browserify打包使用webpack打包推荐流程目录配…...

编程日记 2023/2/21 20:26:11

学习Flask之四、网页表单

第二章介绍的request对象&#xff0c;使用了客户端请求的所有信息。特别地&#xff0c;request.form提供了对POST请求提交的表单数据的访问。尽管Flask请求对象的支持足于处理网页单&#xff0c;但是还有很多作务很繁锁和重复。两个很好的例子是产生HTML表单代码和验证表单数据…...

编程日记 2023/2/21 20:25:04

CenterMask paper笔记

CenterMask是一个anchor free的实例分割模型&#xff0c; 来自paper: CenterMask: Real-Time Anchor-Free Instance Segmentation 提起anchor free, 会想到FCOS模型&#xff0c;是用来目标检测的&#xff0c; 那么这里就用到了FCOS, 不过换了backbone, 在FCOS检测出目标框后&…...

编程日记 2023/2/21 20:23:56

06- OpenCV查找图像轮廓 (OpenCV基础) (机器视觉)

知识重点 灰度图转换: gray cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)二值化: 返回两个东西&#xff0c;一个阈值&#xff0c; 一个是二值化的图: thresh, binary cv2.threshold(gray, 150, 255, cv2.THRESH_BINARY)查找轮廓: 返回两个结果&#xff0c;分别是轮廓和层级: c…...

编程日记 2023/2/21 20:22:49

OpenGL学习日记之模型绘制

自己编译运行过程中遇到的一些问题 下载Assimp已编译的lib(因为我们公司的电脑有很多权限和限制&#xff0c;也不能自己安装一些没有报备的软件&#xff0c;所以愁方便我就没有用cMake自己编译了)找到一位免费分享的博主的。 https://blog.csdn.net/lady_killer9/article/deta…...

编程日记 2023/2/21 20:21:43

Springboot接口多个DTO入参的Postman上传方式

在Java中使用Spring Boot框架时&#xff0c;可以同时使用多个DTO作为方法参数。 TO&#xff08;Data Transfer Object&#xff09;是一个常见的设计模式&#xff0c;用于封装数据传输对象。它通常用于将数据从一个层传递到另一个层&#xff0c;例如将数据从服务层传递到控制器…...

编程日记 2023/2/21 20:20:36

软考各科目考核内容详细介绍，看这里

新手在准备报考软考时&#xff0c;都会遇到这样的一个问题——科目这么多&#xff0c;我适合考什么&#xff1f;要想知道自己适合报什么科目&#xff0c;就需要了解每个科目是什么&#xff0c;考什么等一系列的问题。 接下来&#xff0c;就为大家介绍一下软考的各个科目&#…...

编程日记 2023/2/21 20:19:31

连续时间信号与离散时间信号

前言 《信号与系统》是一门很难的课&#xff0c;也是许多学校考研要考的专业课&#xff0c;由于每周只有两节课&#xff0c;所以每次上完都要及时的去复习&#xff0c;这里参考的教材是奥本海姆著作&#xff0c;刘海棠译&#xff0c;北京&#xff1a;电子工业出版社&#xff0…...

编程日记 2023/2/21 20:18:26

TPM密钥管理、使用

前面讲过证书相关内容&#xff0c;除了在软件方面有所应用外&#xff0c;在硬件方面也有很多应用。本次讲一下TPM相关的内容。 一、TPM介绍 1.1背景 TCG基于硬件安全的架构是为应对1990s后期日益增多的复杂恶意软件攻击应用而生的。当时以及现在&#xff0c;抵御PC客户端网络…...

编程日记 2023/2/21 20:17:21

ai辅助开发，让快马平台智能优化你的openclaw脚本安全性与性能

今天想和大家分享一个实用技巧&#xff1a;如何用AI辅助开发&#xff0c;在InsCode(快马)平台上优化openclaw脚本的安全性与性能。最近我需要一个能智能清理下载文件夹的脚本&#xff0c;但又要避免误删重要文件&#xff0c;这个需求让我深刻体会到AI辅助开发的便利性。 需求分…...

编程新知 2026/4/1 22:49:36

实战指南：运用快马平台与mcp协议构建企业级智能数据分析系统

今天想和大家分享一个最近用InsCode(快马)平台实现的实战项目——基于MCP协议的企业级智能数据分析系统。这个项目特别适合需要整合多源数据的企业场景&#xff0c;整个过程让我深刻体会到MCP协议在复杂系统中的桥梁作用&#xff0c;以及快马平台如何让这类应用的开发部署变得异…...

编程新知 2026/4/1 22:19:19

Spring AI 流式输出底层原理解析

在 AI 应用开发中&#xff0c;流式输出早已成为提升用户体验的核心能力——像 ChatGPT 那样的打字机式实时回复&#xff0c;既能避免用户长时间干等&#xff0c;又能解决长连接超时问题&#xff0c;是 AI 产品的必备特性。 一、流式输出的两种技术&#xff0c;不是对立而是“底…...

编程新知 2026/4/1 21:40:34

4款降AI率工具实测横评：最便宜和最贵的效果差多少？

花了几百块&#xff0c;测了一圈&#xff0c;现在把结果告诉你。 降AI率工具、降AI工具保姆级测评2026、降AI这个需求&#xff0c;不同工具之间差距其实挺明显的&#xff0c;不是"随便用一个都一样"。 我的结论&#xff1a;嘎嘎降AI&#xff08;www.aigcleaner.com…...

编程新知 2026/4/1 21:30:31

英雄联盟智能工具League Akari：从效率提升到战术优化的全方位解决方案

英雄联盟智能工具League Akari&#xff1a;从效率提升到战术优化的全方位解决方案 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾在英…...

编程新知 2026/4/1 20:27:56

零基础教程：5个简单步骤用Mi-Create打造个性化小米手表表盘

零基础教程&#xff1a;5个简单步骤用Mi-Create打造个性化小米手表表盘 【免费下载链接】Mi-Create Unofficial watchface creator for Xiaomi wearables ~2021 and above 项目地址: https://gitcode.com/gh_mirrors/mi/Mi-Create Mi-Create是一款专为小米穿戴设备用户打…...

编程新知 2026/4/1 19:31:10

超导电路阵列实验方案 V1.0桌面量子引力实验（自指动力学与类时空关联涌现）

超导电路阵列实验方案 V1.0 桌面量子引力实验&#xff08;自指动力学与类时空关联涌现&#xff09; 方案编号&#xff1a;SR-EXP-QG-001 版本&#xff1a;V1.0 一、核心科学目标 1. 科学目标 在一维/二维超导量子比特阵列中&#xff0c;引入全局量子态测量 实时反馈构建强自指…...

编程新知 2026/4/1 18:44:43

10分钟掌握Deep-Live-Cam：从零搭建实时AI换脸系统的完整指南

10分钟掌握Deep-Live-Cam&#xff1a;从零搭建实时AI换脸系统的完整指南 【免费下载链接】Deep-Live-Cam real time face swap and one-click video deepfake with only a single image 项目地址: https://gitcode.com/GitHub_Trending/de/Deep-Live-Cam Deep-Live-Cam是…...

编程新知 2026/4/1 18:36:24

当条形图遇上极坐标：径向与圆形条形图的视觉革命

1. 设计原理这两种图表把传统的笛卡尔坐标系换成极坐标系&#xff1a;角度表示类别&#xff0c;半径或角度长度表示数值。1.1. 径向条形图径向条形图本质上是将传统条形图的直角坐标系转换为极坐标系。在极坐标系中&#xff0c;每个数据点不再由(x, y)定位&#xff0c;而是由(角…...

编程新知 2026/4/1 18:21:20

迪文串口屏通信协议详解：从5AA5帧头到变量地址，一篇看懂HEX指令怎么发

迪文串口屏通信协议逆向解析&#xff1a;从帧头到数据域的HEX指令全解构 第一次拿到迪文串口屏的HEX指令时&#xff0c;那一串5A A5 11 82 0001 BFAA C6F4...让我完全摸不着头脑。为什么有的指令长度固定&#xff0c;有的却变化多端&#xff1f;地址字段和数据字段究竟如何划分…...

编程新知 2026/4/1 18:04:07