【华为OD技术面试真题 - 技术面】- 前端面试题(1)

本文介绍了华为OD面试中的前端技术面试题,涵盖CSS盒模型、元素脱离文档流、JavaScript内存中的堆栈概念、原型与原型链、变量声明关键字的区别、箭头函数与普通函数的不同,以及用户名输入框的已存在性校验实现。同时,讨论了CSS中元素的垂直和水平居中方法、XSS和CSRF攻击,以及移动端与PC端开发的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

华为OD面试真题题库

专栏:华为OD面试真题题库
目录: 最新华为OD面试手撕代码真题目录以及八股文真题目录

封面

1. 请详细解释一下CSS中的盒模型概念

CSS盒模型(Box Model)是CSS布局的基础,它描述了元素在网页布局中所占的空间方式。每个HTML元素可以看作是一个盒子,由四个部分组成:内容(Content)、内边距(Padding)、边框(Border)和外边距(Margin)。

  1. 内容(Content):这是元素的实际内容,如文本、图片等。

  2. 内边距(Padding):内容周围的空白区域,内边距是透明的。

  3. 边框(Border):围绕在内边距和内容外的边界,边框是可见的。

  4. 外边距(Margin):边框外部的空白区域,用于分隔元素与其他元素,外边距是透明的。

盒模型的总宽度和总高度计算方式如下:

总宽度 = 左边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右边距
总高度 = 上边距 + 上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框 + 下边距

需要注意的是,CSS有两种盒模型:标准模型和IE模型(又称怪异模型)。两者的主要区别在于宽度和高度的计算方式不同。在标准模型中,width和height指的是内容的宽度和高度;而在IE模型中,width和height包含了内容、内边距和边框的宽度和高度。可以通过box-sizing属性来指定使用哪种盒模型,如box-sizing: content-box表示使用标准模型,box-sizing: border-box表示使用IE模型。

2.请列举哪些CSS属性可以使元素脱离文档流

  1. 使用float属性:当元素被设置为float(如float: left或float: right)时,它会脱离文档流,并向左或向右浮动。其他文档流中的元素会围绕它流动。需要注意的是,浮动元素之后通常需要清除浮动,以防止布局混乱。

  2. 使用position属性:当元素的position属性被设置为absolute或fixed时,元素会脱离文档流。绝对定位元素的位置相对于最近的已定位祖先元素(如果没有则相对于初始包含块),固定定位元素的位置相对于视口。

  3. 使用display属性:当元素的display属性被设置为flex或grid时,其子元素会脱离文档流,而按照弹性布局或网格布局进行排列。

示例代码:

/* 使用float属性 */
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

算法大师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值