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

前端面经详解

news 文章来源：https://blog.csdn.net/qq_28838891/article/details/128875589 2025/1/11 6:49:40

目录

css

盒子充满屏幕

A.给div设置定位

B.设置html,body的宽高

C.相对当前屏幕高度（强烈推荐）

三列布局：左右固定，中间自适应

flex布局（强烈推荐）

grid布局

magin负值法

自身浮动

绝对定位

圣杯布局

css

css涉及到的知识点就是水平垂直居中的方法（能有多少记多少），水平居中，垂直居中，position的几个值分别是啥，基本是css八股文高频必问

绝对定位在实际开发中，用的不多，因为他会使一个盒子脱离正常的文档流，很容易影响其他的dom，grid，浮动了解一下就差不多了，实际开发其实最重要的就是flex，所有的布局都是用flex写。flex的掌握，这个知道有这个东西，大致原理就行了。css重要的东西不多，难点重点都在js。js题还可以追本溯源
 

盒子充满屏幕

body只有一个div时候：

        *{margin: 0;padding: 0;}div{width:100%;height: 100%;}

A.给div设置定位

position: absolute;

<style>*{margin: 0;padding: 0;}div{width:100%;height: 100%;background: yellow;position: absolute;}</style>

B.设置html,body的宽高

        html,body{
            width: 100%;
            height: 100%;
        }

<style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}div{width:100%;height: 100%;background: yellow;}
</style>

C.相对当前屏幕高度（强烈推荐）

在当前盒子下面添加一个div，会产生重叠。因为绝对定位使当前盒子脱离正常文档流，从而影响其他的布局

1 vw是当前屏幕宽度的百分之1，

1vh是当前屏幕高度的百分之1

这个可以作为一种响应式布局的方法。

div.test
{background-color:red;width:100vw;height:100vh;
}

三列布局：左右固定，中间自适应

flex布局（强烈推荐）

  • 基础巩固

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

  • 实现方法 

左右两栏设置宽度，中间栏设置 flex:1,占满余下部分

<!DOCTYPE html>
<html lang="en"><head><title>flex布局</title><style>.main{height: 60px;display: flex;}.left,.right{height: 100%;width: 200px;background-color: #ccc;}.content{flex: 1;background-color: #eee;}</style>
</head><body><div class="main"><div class="left"></div><div class="content"></div><div class="right"></div></div>
</body></html>

grid布局

  • 基础巩固

grid：CSS 所有网格容器的简写属性

grid-template-rows / grid-template-columns ：设置列和行的尺寸。

  • 实现方法

左右两栏设置宽度，中间栏宽度auto

<!DOCTYPE html>
<html lang="en"><head><title>grid布局</title><style>body {display: grid;grid-template-columns: 200px auto 200px;grid-template-rows: 60px;}.left,.right {background-color: #ccc;}.content {background-color: #eee;}</style>
</head><body><div class="left"></div><div class="content"></div><div class="right"></div>
</body></html>

magin负值法

  • 原理解释
  • 实现方法：

左右两栏均左浮动，中间栏外层盒子设置浮动，中间栏设置左右两栏宽度的margin值，左栏设置margin -100%，右栏设置 margin值为负的盒子宽度。

<!DOCTYPE html>
<html lang="en"><head><title>margin负值</title><style>.left,.right {float: left;width: 200px;height: 60px;background-color: #eee;}.left {margin-left: -100%;}.right {margin-left: -200px;}.main {width: 100%;float: left;height: 60px;}.content {height: 60px;margin: 0 200px;background-color: #ccc;}</style>
</head><body><div class="main"><div class="content"></div></div><div class="left"></div><div class="right"></div>
</body></html>

自身浮动

<!DOCTYPE html>
<html lang="en"><head><title>自身浮动法</title><style>.left,.right {height: 60px;width: 200px;background-color: #eee;}.left {float: left;}.right {float: right;}.content{height: 60px;background-color: #ccc;margin: 0 200px;}</style>
</head><body><div class="left"></div><div class="right"></div><div class="content"></div>
</body></html>

绝对定位

左右两栏绝对定位，分别定位到盒子的两侧，中间栏采用margin值撑开盒子

注意：采用定位时，浏览器默认的padding或margin值会影响布局，需要初始化样式 margin:0;padding：0；

<!DOCTYPE html>
<html lang="en"><head><title>绝对定位法</title><style>* {margin: 0;padding: 0;}.left,.right {position: absolute;height: 60px;width: 200px;background-color: #ccc;top: 0;}.left {left: 0;}.right {right: 0;}.content {height: 60px;margin: 0 200px;background-color: #eee;}</style>
</head><body><div class="left"></div><div class="content"></div><div class="right"></div>
</body></html>

圣杯布局

两边固定，中间自适应，且中间栏放在文档流的前面，率先渲染

基本的dom结构（注意center需要排在第一个位置）

<div class="header">header</div><div class="container"><div class="center column">center</div><div class="left column" >left</div><div class="right column" >right</div></div>
<div class="footer">footer</div>

或者

<section class="container"><article class="center"><br /><br /><br /></article><article class="left"><br /><br /><br /></article><article class="right"><br /><br /><br /></article></section>

<br> 标签插入一个简单的换行符

  • 定位+浮动
<!DOCTYPE html>
<html><head><meta charset=utf-8><style type="text/css">* {margin: 0;padding: 0;}.container {border: 1px solid black;/* 防止容器盒子高度塌陷和给之后的左、右浮动元素预留位置 */overflow: hidden;padding: 0px 100px;min-width: 100px;}.left {background-color: greenyellow;/* 保证之后的"margin-left"属性可以将自身拉到上一行 */float: left;/* 固定宽度 */width: 100px;/* 将元素向左移动属性值的单位，100%相对于父容器计算 */margin-left: -100%;/* 相对定位，需要将自身再向左移动自身的宽度，进入容器的"padding-left"区域 */position: relative;/* 自身的宽度，刚好进入容器的"padding-left"区域 */left: -100px;}.center {background-color: darkorange;float: left;width: 100%;}.right {background-color: darkgreen;float: left;width: 100px;margin-left: -100px;position: relative;left: 100px;}</style></head><body><section class="container"><article class="center"><br /><br /><br /></article><article class="left"><br /><br /><br /></article><article class="right"><br /><br /><br /></article></section></body>
</html>

magin-left:-100%

这个百分比是以父元素内容长度的百分比，该父元素内容长度需要去除padding magin border。由于长度设置为了100%，需要一整行的宽度补偿margin，则移到最左边。

magin-left：-100px

margin负值会改变元素占据的空间，及移到父元素的最左边，并且该子元素width即为100px

JS

面试题百分之六十出自于红宝书

百分之十左右的出自于你不知道的js（不出还好，一出就是难题）

类似类型转换，作用域

《你不知道的js》

上，看第一部分

中，作用域闭包全看，咬文嚼字，AST偶尔会问

下，第三章，

犀牛书看正则

面试常问：

1.数组方法

2.闭包（超级容易考）

3.promise

4.call apply bind 

5.闭包

6.深浅拷贝

7 .原型链

8.防抖节流

9.按值传递

10.this指向

11.作用域和作用域链


 

相关文章：

前端面经详解

目录 css 盒子充满屏幕 A.给div设置定位 B.设置html,body的宽高 C.相对当前屏幕高度&#xff08;强烈推荐&#xff09; 三列布局&#xff1a;左右固定&#xff0c;中间自适应 flex布局&#xff08;强烈推荐&#xff09; grid布局 magin负值法 自身浮动 绝对定位 圣…...

编程日记 2023/2/10 15:00:14

网页CAD开发快速入门

演示说明 提示:目前提供两种在网页中浏览编辑CAD图纸方案&#xff0c;详细说明见&#xff1a;MxDraw帮助 网页中打开CAD最简步骤&#xff1a; 第一步: 安装插件运行环境&#xff0c;下载安装(可能需要退杀毒软件)&#xff1a;https://demo.mxdraw3d.com:3562/MxDrawx86Setup…...

编程日记 2023/2/10 14:59:06

C#开发的OpenRA的mod.yaml文件

C#开发的OpenRA的mod.yaml文件 在OpenRA游戏里，会看到这样一段代码： Manifest LoadMod(string id, string path){IReadOnlyPackage package = null;try{if (!Directory.Exists(path)){Log.Write("debug", path + " is not a valid mod package");return …...

编程日记 2023/2/10 14:57:57

【ESP32+freeRTOS学习笔记-(七)中断管理】

目录1、概述2、在ISR中使用FreeRTOS中专用的API2.1 独立的用于ISR中的API2.2 关于xHigherPriorityTaskWoken 参数的初步理解3、延迟中断处理的方法-将中断中的处理推迟到任务中去4 方法一&#xff1a;用二进制信号量来同步ISR与”延时处理的任务“4.1 二进制信号量4.2 函数用法…...

编程日记 2023/2/10 14:56:51

【总结】1591- 从入门到精通：使用 TypeScript 开发超强的 CLI 工具

作为一名开发者&#xff0c;掌握 CLI 工具的开发能力是非常重要的。本文将指导你如何使用 TypeScript 和 CAC 库开发出功能强大的 CLI 工具。快速入门首先&#xff0c;需要先安装 Node.js 和 npm&#xff08;Node Package Manager&#xff09;&#xff0c;然后在项目目录中创建…...

编程日记 2023/2/10 14:55:40

【Java】int和Integer的区别？为什么有包装类？

int和Integer的区别&#xff1f;为什么有包装类&#xff1f; java是一种强类型的语言&#xff0c;所以所有的属性都必须要有一个数据类型。 PS&#xff1a;java10有了局部变量类型推导&#xff0c;可以使用var来代替某个具体的数据类型&#xff0c;但是在字节码阶段&#xff0…...

编程日记 2023/2/10 14:54:33

【LeetCode】石子游戏 IV [H]（动态规划）

1510. 石子游戏 IV - 力扣&#xff08;LeetCode&#xff09; 一、题目 Alice 和 Bob 两个人轮流玩一个游戏&#xff0c;Alice 先手。 一开始&#xff0c;有 n 个石子堆在一起。每个人轮流操作&#xff0c;正在操作的玩家可以从石子堆里拿走 任意 非零 平方数 个石子。 如果石…...

编程日记 2023/2/10 14:53:25

修改Vue项目运行的IP和端口

前言 我们在使用VsCode启动Vue项目的时候&#xff0c;我发现&#xff1a;默认的端口号好像和tomcat一样&#xff0c;默认都是8080&#xff0c;如果8080被占用了&#xff0c;就会使用8081,8082这样的方式以此类推。 那么&#xff0c;我们是否可以像后端一样&#xff0c;通过修改…...

编程日记 2023/2/10 14:52:15

【C++提高编程】map/ multimap 容器详解（附测试用例与结果图）

目录1. map/ multimap容器1.1 map基本概念1.2 map构造和赋值1.3 map大小和交换1.4 map插入和删除1.5 map查找和统计1.6 map容器排序1.7 案例-员工分组1.7.1 案例描述1.7.2 实现步骤1. map/ multimap容器 1.1 map基本概念 简介&#xff1a; map中所有元素都是pairpair中第一个…...

编程日记 2023/2/10 14:51:08

laravel操作redis和缓存操作

一&#xff1a;操作redis1&#xff1a;redis拓展安装composer require predis/predis或者你也可以通过 PECL 安装 PhpRedis PHP 扩展,安装方法比较复杂,个人不推荐2&#xff1a;配置redis在config/database.php文件中配置redis(1)&#xff1a;单个redis配置redis > [client …...

编程日记 2023/2/10 14:50:02

目标检测论文阅读：GaFPN算法笔记

标题&#xff1a;Construct Effective Geometry Aware Feature Pyramid Network for Multi-Scale Object Detection 会议&#xff1a;AAAI2022 论文地址&#xff1a;https://ojs.aaai.org/index.php/AAAI/article/view/19932 文章目录Abstract1. Introduction2. Related Work2.…...

编程日记 2023/2/10 14:48:53

【转】Generative Pretrained Transformer

原文链接&#xff1a;https://www.cnblogs.com/yifanrensheng/p/13167796.html一、GPT简介1.1 背景目前大多数深度学习方法依靠大量的人工标注信息&#xff0c;这限制了在很多领域的应用。此外&#xff0c;即使在可获得相当大的监督语料情况下&#xff0c;以无监督学习的方式学…...

编程日记 2023/2/10 14:47:43

day34|343. 整数拆分、96.不同的二叉搜索树

343. 整数拆分 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 示例 1: 输入: n 2 输出: 1 解释: 2 1 1, 1 1 1。 示例 2: 输入: n 10 输出: 36 解…...

编程日记 2023/2/10 14:45:24

WeNet - 初识

文章目录关于 WeNet快速上手识别训练环境准备训练关于 WeNet Production First and Production Ready End-to-End Speech Recognition Toolkit github: https://github.com/wenet-e2e/wenet官方中文说明&#xff1a;https://github.com/wenet-e2e/wenet/blob/main/README_CN.md…...

编程日记 2023/2/10 14:44:18

为什么各个企业都在创建FAQ、常见问题页面？

常见问题解答页面是您可能已经为您的公司考虑过的东西&#xff0c;作为帮助客户回答有关您的产品和服务的常见问题的一种方式。但是您不知道最好的方法;肯定这只是一个问题清单吗&#xff1f;常见问题解答在整个购买过程中为客户提供支持&#xff0c;并减少客户需要与贵公司的联…...

编程日记 2023/2/10 14:43:11

【React-Router】路由传参，路由嵌套，手动导航，路由文件配置

文章目录React-RouterURL的hashHTML5的HistoryRouter的基本使用路由映射配置路由的嵌套路由配置和跳转Link和NavLink&#xff1a;手动路由的跳转路由参数传递Navigate导航Not Found页面配置路由的配置文件React-Router 前端路由是如何做到URL和内容进行映射呢&#xff1f;怎么…...

编程日记 2023/2/10 14:41:59

面向对象分析与设计（OOAD）

面向对象分析与设计&#xff08;OOAD&#xff09;概述人是怎么认识事物的分类与分层的两种思维问题域到解空间的映射软件生命周期要解决的问题三个一致性面向对象分析与设计过程对象从哪里来发现对象的方法组织对象结构职责是怎么来的分配职责的逻辑验证职责分配的合理性GRASP设…...

编程日记 2023/2/10 14:40:50

数据库调优

目录 硬件层面 操作系统层面 数据库层面 硬件层面 1.CPU（运算）：48核CPU。 2.内存：96G-256G，跑3-4个实例。 3.disk(磁盘IO)：机械盘：选SAS，数量越多越好。性能：SSD(高并发)>SAS(普通业务线上)>SATA(线下) 选SSD：使用SSD或者PCIe SSD设备，可提升上千倍的IOPS…...

编程日记 2023/2/10 14:39:43

OpenStack云平台搭建(3) | 部署Glance

目录 1、登录数据库授权 2、安装glance 3、测试一下 安装部署Glance镜像服务 Image Service 镜像服务&#xff1a;代号&#xff1a;Glance&#xff1a;为云平台虚拟机提供镜像服务&#xff0c;例如&#xff1a;上传镜像、删除镜像等。说明&#xff1a;镜像&#xff1a;磁盘…...

编程日记 2023/2/10 14:38:34

软件评测师考试总结

软件评测师是软考中级考试项&#xff0c;每年一次考试机会&#xff0c;2022年的是在11月份举行&#xff0c;具体事项需查看软考官网。 分享一下个人的备考经验&#xff0c;以及总结一下这个学习的过程&#xff0c;有需要的可以酌情参考。 一、方法策略 获取信息 官网&#x…...

编程日记 2023/2/10 14:37:27

小白系列Vite-Vue3-TypeScript：009-屏幕适配

上一篇我们介绍了ViteVue3TypeScript项目中mockjs的安装和配置。本篇我们来介绍屏幕适配方案&#xff0c;简单说来就是要最大程度上保证我们的界面在各种各样的终端设备上显示正常。通用的屏幕适配方案有两种&#xff1a;① 基于rem 适配&#xff08;推荐&#xff0c;也是本篇要…...

编程日记 2023/2/10 14:36:20

查找企业微信聊天记录，会话存档有多重要

会话存档是基于企业微信API插口而开发设计的聊天记录查询专用工具。运用会话存档能不能找到误删除、到期的聊天记录呢&#xff1f;实际上能否通过会话存档找到企业微信中的聊天记录分两种状况&#xff0c;大家一起来看看吧&#xff1a;开启会话存档前的聊天记录没法找到和开启会…...

编程日记 2023/2/10 14:35:12

C语言经典编程题100例（1-20）

1、练习2-1 Programming in C is fun!本题要求编写程序&#xff0c;输出一个短句“Programming in C is fun!”。输入格式:本题目没有输入。输出格式:在一行中输出短句“Programming in C is fun!”。代码&#xff1a;#include<stdio.h> int main() {printf("Progra…...

编程日记 2023/2/10 14:34:04

小白系列Vite-Vue3-TypeScript：008-安装配置mock

上一篇我们介绍了ViteVue3TypeScript项目中axios的安装和配置&#xff0c;并手动封装了api。本篇我们来在上篇基础上介绍如何引入mock&#xff0c;并在本地模拟后台接口请求来达到本地测试的目的。在现在前后端分离的开发模式中&#xff0c;前端页面很多渲染的数据都需要通过ht…...

编程日记 2023/2/10 14:32:55

OnGUI Box 控件||Unity 3D OnGUI 常用控件

OnGUI Box 控件Unity 3D Box 控件用于在屏幕上绘制一个图形化的盒子。Box 控件中既可以显示文本内容&#xff0c;也可以绘制图片&#xff0c;或两者同时存在。GUIContent 和 GUIStyle 对于 Box 控件同样适用&#xff0c;既可以用来修饰 Box 控件的文本颜色&#xff0c;也可以用…...

编程日记 2023/2/10 14:31:48

shiro721——CVE-2019-12422

这两个漏洞主要区别在于Shiro550使⽤已知密钥碰撞&#xff0c;后者Shiro721是使⽤ 登录后rememberMe {value}去爆破正确的key值 进⽽反序列化&#xff0c;对⽐Shiro550条件只要有 ⾜够密钥库 &#xff08;条件⽐较低&#xff09;、Shiro721需要登录&#xff08;要求⽐较⾼鸡肋 …...

编程日记 2023/2/10 14:29:27

爬虫JS逆向思路 - - 扣JS(data解密)

网络上几千块都学不到的JS逆向思路这里全都有&#x1f44f;&#x1f3fb;&#x1f44f;&#x1f3fb;&#x1f44f;&#x1f3fb; 本系列持续更新中&#xff0c;三连关注不迷路&#x1f44c;&#x1f3fb; 干货满满不看后悔&#x1f44d;&#x1f44d;&#x1f44d; ❌注意…...

编程日记 2023/2/10 14:28:18

Android 进阶——Framework 核心之Binder 相关预备理论（一）

文章大纲引言一、进程的内存空间和进程隔离二、Linux 系统内存的用户空间和内核空间1、用户空间&#xff08;User Space&#xff09;2、内核空间&#xff08;Kernel Space&#xff09;三、Linux IPC 原理1、内核态和用户态2、IPC 步骤四、内核模块和驱动五、Binder1、Binder IP…...

编程日记 2023/2/10 14:27:09

【23种设计模式】结构型模式详细介绍

前言 本文为 【23种设计模式】结构型模式 相关内容介绍&#xff0c;下边将对适配器模式&#xff0c;桥接模式&#xff0c;组合模式&#xff0c;装饰模式&#xff0c;外观模式&#xff0c;亨元模式&#xff0c;代理模式&#xff0c;具体包括它们的特点与实现等进行详尽介绍~ &a…...

编程日记 2023/2/10 14:25:57

接口自动化实战-postman

1.测试模型 单元测试并非测试工程师的本职工作&#xff0c;它属于开发工程师的工作&#xff0c;开发进行单元测试的情况我们不知道&#xff0c;为了确保系统尽可能没有Bug&#xff0c;于是接口测试在测试工程师这里就变得由为重要了。实际工作中为菱形模型。 接口测试能更早的…...

编程日记 2023/2/10 14:24:50

外发加工网线是真的吗/seo优化工具哪个好

yum (yellow dog)网络yum ftp http nfs以ftp为例&#xff1a;#mount /dev/cdrom /mnt/cdrom (如果这目录没建需要自己建)#cd /mnt/cdrom/Server/#rpm -ivh vsftpd-2.0.5-16.el5.i386.rpm (安装ftp服务器)#service vsftpd start &#xff08;启动ftp服务&…...

编程日记 2025/1/11 1:58:19

wordpress降级/百度快照入口官网

1.使类和成员的可访问性最小化 封装&#xff08;数据私有化&#xff0c;方法公开化&#xff09;&#xff0f;对外提供可调用的&#xff0c;稳定的功能可访问性应该明确修饰符本类同包类子类其他类public√√√√protected√√√默认√√private√实例域绝不能是公有的包级私有的…...

编程日记 2025/1/11 1:36:07

wordpress 小说多站/网站seo优化排名

HTML5是目前HTML的最新标准。在笔者写这篇文章时&#xff0c;HTML5仍在积极的发展。HTML5除了提供新的标签信息外&#xff0c;同时还包含了新的应用程序编程接口(API)&#xff0c;这样可以使我们能够在网页上提供更多丰富的多媒体和互动功能&#xff0c;而无需使用专有的插件。…...

编程日记 2025/1/11 1:17:58

网站案例演示/seo官网优化

前言 2021春季社招正在火热招聘当中&#xff0c;很多人都挂在了技术知识掌握还是不够广&#xff0c;不够深&#xff0c;甚至连一些基础的问题都只能模模糊糊的回答出来。你说&#xff0c;这跳槽不是跳了个寂寞吗&#xff1f; 其实&#xff0c;根本原因还是对于自己的技术栈掌…...

编程日记 2025/1/11 0:18:23

烟台开发区人才市场招聘信息/合肥网络公司seo建站

奔小康赚大钱Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 2325 Accepted Submission(s): 1020Problem Description传说在遥远的地方有一个非常富裕的村落,有一天,村长决定进行制度改革&#xff1a;重新分配房…...

编程日记 2025/1/10 23:14:16

微网站免费建站系统/互联网广告投放代理公司

使用RD Client来远程桌面 可能你会觉得奇怪&#xff0c;team viewer和向日葵之类的难道不香吗&#xff1f;看起来他们两个都是实现了远程桌面的功能&#xff0c;好像没必要特地用Windows自带的RD Client进行内网穿透之后远程桌面。 实际上team viewer之类的在我的使用范围内不…...

编程日记 2025/1/10 23:03:02