前端面试题汇总(一)

1.html语义化

HTML语义化是指在编写HTML代码时,尽可能使用具有明确含义的标签来描述页面内容的结构和意义,以便让浏览器、搜索引擎和开发者更好地理解和解释页面内容。通过使用语义化的HTML标签,可以提高页面的可访问性、可维护性和可读性,同时也有助于优化页面的SEO。
一些常见的语义化标签包括:<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等。通过使用这些标签,可以清晰地划分页面的不同部分,使页面的结构更加清晰和易于理解。

2.盒模型

盒模型分为两种,一种为标准盒模型,另一种为怪异盒模型,默认为标准盒模型。盒的每个部分包含margin(外边距区域),border(边框区域),padding(内边距区域),content(内容区域)。标准盒模型设置宽高指的是内容区域,不包括内边距和边框,怪异盒设置宽高包含了内边距和边框。设置标准盒模型box-sizing: content-box设置怪异盒模型box-sizing: border-box

3.浮动

浮动(Float)是一种布局方式,可以让元素脱离正常文档流,沿着其容器的左侧或右侧浮动。通过浮动元素,可以实现文字环绕图片、多栏布局等效果。但是使用浮动容易造成父级盒子塌陷,影响其他兄弟元素的布局。清除浮动的方法有1.在浮动元素的父元素上添加一个clearfix类
.clearfix::after { content: ""; display: block;clear: both;}、2.在父元素中添加overflow:hidden超出部分隐藏,3.给父级添加高度,4.浮动元素后面添加一个空的div,并设置clear:both

4.样式优先级规则

1.!important声明的样式权重最高,为1000。
2.内联样式(Inline Styles)的权重为1000。
3.ID选择器(#id)的权重为100。
4.类选择器(.class)、属性选择器([attribute])和伪类选择器(:pseudo-class)的权重为10。
5.标签选择器(element)、伪元素选择器(::pseudo-element)和通配符选择器(*)的权重为1。
6.继承样式的权重为0。

5.css设置尺寸的单位

1.像素(Pixel,px):像素是最常用的尺寸单位,表示屏幕上的一个像素点。
2.百分比(Percentage,%):百分比单位是相对于父元素的尺寸来设置元素的尺寸。
3.em:em是相对长度单位,表示元素的字体大小。1em等于元素的字体大小,可以用于设置元素的宽度、高度等。
4.rem:rem是相对于根元素(html元素)的字体大小的单位。1rem等于根元素的字体大小,可以用于实现相对于整个页面的尺寸控制。
5.vhvw:vh表示视口高度的百分比,vw表示视口宽度的百分比。可以根据视口的大小来设置元素的尺寸。

6.BFC

BFC(Block Formatting Context)是指块级格式化上下文,BFC是一个独立的渲染区域,其中的元素按照一定的规则进行布局,不会影响到外部的布局。
BFC的形成条件包括:
根元素或包含根元素的元素(例如)。
浮动元素(float不为none)。
绝对定位元素(position为absolute或fixed)。
行内块元素(display为inline-block)。
表格单元格(display为table-cell)。
overflow不为visible的块级元素
用途:
清除内部浮动(overflow:hidden),解决外边距合并问题,解决父元素高度塌陷问题

7.设置水平垂直居中

1.设置元素相对父级定位
position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);
2.设置父级元素为弹性盒子
display: flex; justify-content: center; align-items: center;
3.设置元素的父级为网格元素
display: grid;justify-content: center;align-items: center;
4.设置元素父级为表格元素,子元素为行内块元素
display: table-cell;text-align: center; vertical-align: middle;
display: inline-block;

8.三栏布局

通常为圣杯布局和双飞翼布局, 圣杯布局的实现方案:三个元素放在同一个父级元素中,代表中间盒子的元素放在最前面,父级盒子设置左右padding,三个盒子全部浮动,设置中间盒子宽度100%,左右盒子设置固定宽度,设置左边盒子左边距-100%同时相对自身定位,右边平移自身宽度,右边盒子设置右边距-自身宽度,最后设置父级盒子清除浮动,否则父级盒子的高度无法被撑开 双飞翼布局的实现方案:三个盒子对应三个元素,其中中间盒子套了两层,中间盒子内部盒子设置margin,三个盒子全部浮动,设置中间盒子宽度100%,左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度,最后设置父级盒子清除浮动,否则父级盒子的高度无法被撑开

9.JS的数据类型

JS数据类型分为两类:一类是基本数据类型,也叫简单数据类型,包含7种类型,分别是Number 、String、Boolean、BigInt、Symbol、Null、Undefined。另一类是引用数据类型也叫复杂数据类型,通常用Object代表,普通对象,数组,正则,日期,Math数学函数都属于Object
数据分成两大类的本质区别:基本数据类型和引用数据类型它们在内存中的存储方式不同
基本数据类型是直接存储在栈中的简单数据段,占据空间小,属于被频繁使用的数据。
引用数据类型是存储在堆内存中,占据空间大。引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址,当解释器寻找引用值时,会检索其在栈中的地址,取得地址后从堆中获得实体。

10.null和undefined区别

undefind 是全局对象的一个属性,当一个变量定义后没有被赋值或者一个函数没有返回值或者某个对象不存在某个属性却去访问或者函数定义了形参但没有传递实参,这时候都是undefined。undefined通过typeof判断类型是’undefined’。 null代表对象的值未设置,相当于一个对象没有设置指针地址就是null。null通过typeof判断类型是’object’。null 其实属于自己的类型 Null,而不属于Object类型,typeof 之所以会判定为 Object 类型,是因为JavaScript 数据类型在底层都是以二进制的形式表示的,二进制的前三位为 0 会被 typeof 判断为对象类型,而 null 的二进制位恰好都是 0 ,因此,null 被误判断为 Object 类型。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2.29作业

T课上实现通信代码总结&#xff1a; 程序代码&#xff1a; TCPSER.c #include<myhead.h> #define SER_IP "192.168.244.140" //服务器IP #define SER_PORT 9999 //服务器端口号 int main(int argc, const char *argv[]) {//1.创建用于监…

为什么猫咪挑食不吃猫粮?适口性好、普口性价的主食冻干推荐

现代养猫人士往往把自家的小猫看作是生活中的小宝贝&#xff0c;十分宠爱。最令人头疼的就是猫咪挑食不吃猫粮&#xff0c;为什么猫咪挑食不吃猫粮&#xff1f;猫咪挑食应该怎么办&#xff1f;今天为大家分享一个既不让咱宝贝猫咪受罪又可以改善猫咪挑食的方法。 一、为什么猫咪…

深入理解nginx的https sni机制

目录 1. 概述2. 初识sni3. nginx的ssl证书配置指令3.1 ssl_certificate3.2 ssl_certificate_key3.3 ssl_password_file4. nginx源码分析4.1 给ssl上下文的初始化4.2 连接初始化4.3 处理sni回调4.2 动态证书的加载5. 总结阅读姊妹篇: 深入理解nginx的https alpn机制 1. 概述 SN…

Vue+SpringBoot打造音乐偏好度推荐系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 音乐档案模块2.1.2 我的喜好模块2.1.3 每日推荐模块2.1.4 通知公告模块 2.2 用例图设计2.3 实体类设计2.4 数据库设计 三、系统展示3.1 登录注册3.2 音乐档案模块3.3 音乐每日推荐模块3.4 通知公告模…

javase_进阶 day8 递归,异常

递归 递归介绍 方法直接或者间接调用本身注意&#xff1a;递归如果没有控制好终止&#xff0c;会出现递归死循环&#xff0c;导致栈内存溢出现象一些算法题的实现, 都需要使用递归 public class RecursionDemo1 {/*递归介绍: 方法直接或者间接调用本身*/public static void …

外包干了6个月,技术退步明显。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;2019年我通过校招踏入了重庆一家软件公司&#xff0c;开始了我的职业生涯。那时的我&#xff0c;满怀热血和憧憬&#xff0c;期待着在这个行业中闯出一片天地。然而&#xff0c;随着时间的推移&#xff0c;我发现自己逐渐陷入…

Dockerfile(1) - FROM 指令详解

FROM 指明当前的镜像基于哪个镜像构建dockerfile 必须以 FROM 开头&#xff0c;除了 ARG 命令可以在 FROM 前面 FROM [--platform<platform>] <image> [AS <name>]FROM [--platform<platform>] <image>[:<tag>] [AS <name>]FROM […

搭建独立节点通常涉及哪些步骤

1.了解独立节点搭建的基础概念和原理。这包括理解独立节点搭建的含义&#xff0c;即通过云服务器等方式单独搭建自己的网站&#xff0c;以 确保网站的专属性和自主性&#xff0c;并更好地控制数据流动和安全性。1 2.选择服务器类型和配置。这包括根据需求选择合适的服务器&a…

shardingsphere 集成springboot【水平分表】

创建sharding_sphere数据库 在数据库中创建两张表&#xff0c;t_order_1和t_order_2 分片规则&#xff1a;如果订单编号是偶数添加到t_order_1,如果是奇数添加到t_order_2 创建实体类 public class Order { private Integer id; private Integer orderType; private Int…

Java+SpringBoot+Vue+MySQL:员工健康管理技术新组合

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

mysql字节长度限制报错处理方法

报错如下&#xff1a; ERROR 1118 (42000) at line 274: Row size too large (> 8126). Changing some columns to TEXT or BLOB may help. In current row format, BLOB pr efix of 0 bytes is stored inline 或者 ERROR 1118 (42000) at line 1240: Row size too large. T…

TCP的三次握手和四次挥手 | 查看网络状态

三次握手和四次挥手是在计算机网络中用于建立和终止TCP连接的协议。这两个过程是TCP协议的重要组成部分&#xff0c;确保数据的可靠传输。 三次握手指的是在客户端和服务器之间建立连接时的步骤。具体流程如下&#xff1a; 客户端向服务器发送一个连接请求报文段&#xff08;…

Git教程-Git的基本使用

Git是一个强大的分布式版本控制系统&#xff0c;它不仅用于跟踪代码的变化&#xff0c;还能够协调多个开发者之间的工作。在软件开发过程中&#xff0c;Git被广泛应用于协作开发、版本管理和代码追踪等方面。以下是一个详细的Git教程&#xff0c;我们将深入探讨Git的基本概念和…

React 模态框的设计(六)Draggable的整合

前一节课中漏了一个知识点&#xff0c;当内容很长时需要滚动&#xff0c;这个滚动条是很影响美观的。在MacOS下的还能忍&#xff0c;win系统下简直不能看。如何让长内容能滚动又不显示滚动条呢&#xff0c;我尝试过很多办法&#xff0c;最终下面这个方法目前来说是最完美的。我…

Mysql DATETIME与TIMESTAMP的区别

TIMESTAMP的取值范围小&#xff0c;并且TIMESTAMP类型的日期时间在存储时会将当前时区的日期时间值转换为时间标准时间值&#xff0c;检索时再转换回当前时区的日期时间值。 而DATETIME则只能反映出插入时当地的时区&#xff0c;其他时区的人查看数据必然会有误差的。 DATETI…

数据结构——lesson4带头双向循环链表实现

前言✨✨ &#x1f4a5;个人主页&#xff1a;大耳朵土土垚-CSDN博客 &#x1f4a5; 所属专栏&#xff1a;数据结构学习笔记​​​​​​ &#x1f4a5;双链表与单链表的区分&#xff1a;单链表介绍与实现 &#x1f4a5;对于malloc函数有疑问的:动态内存函数介绍 感谢大家的观看…

tomcat安装步骤流程

安装tomcat是基于安装java的基础上的 JAVA 举例说明&#xff1a; 关闭防火墙 下载java [rootlocalhost ~]#yum install java -y rootlocalhost ~]#yum install epel-release.noarch -y [rootlocalhost ~]#yum provides */javac [rootlocalhost data]#yum install java-1.8.0-o…

半监督学习理解

半监督 少量有标注&#xff0c;大量无标注 1.三个假设&#xff1a; (1)连续性/平滑性假设&#xff1a;相近的数据点可能有相同的标签 (2)集群假设&#xff1a;在分类问题中&#xff0c;数据往往被组织成高密度的集群&#xff0c;同一集群的数据点可能具有相同的标签。因此&…

C/C++常见的字符串操作函数

2 字符串操作 ​ 由双引号&#xff08;Double Quote&#xff09;引起来的一串字符称为字符串字面值&#xff08;String Literal&#xff09;&#xff0c;或者简称字符串。注&#xff1a;字符串的结束标志是一个 \0 的转义字符。在计算字符串长度的时候 \0 是结束标志&#xff…

6.1 deeplabv3+的pth模型转换为rknn模型

和yolov5的pth模型转换为rknn模型类似&#xff0c;deeplabv3的pth模型转为rknn模型的步骤是&#xff1a; pth------>onnx-------->rknn 1.pth转为onnx 代码如下&#xff1a; #!/usr/bin/env python3 # -*- coding: utf-8 -*- # by [jackhanyuan](https://github.com/…