写点什么

web 前端培训:2022 前端基础面试题

作者:@零度
  • 2022 年 3 月 03 日
  • 本文字数:1508 字

    阅读完需:约 5 分钟

CSS 部分

什么是外边距重叠?重叠的结果是什么?

外边距重叠就是 margin-collapse。

在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因此结合成的外边距称为折叠外边距。



折叠结果遵循下列计算规则:

两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

两个外边距一正一负时,折叠结果是两者的相加的和。

rgba()和 opacity 的透明效果有什么不同?

两者都能实现透明的效果。

不同的是 opacity 作用于元素,以及元素内所有内容的透明度。

而 rgba()只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果!)

display : none 与 visibility:hidden 的区别是什么?

display:隐藏对应的元素但不挤占该元素原来的空间。

visibility:隐藏对应的元素并且挤占该元素原来的空间。

使用 CSS display:none 属性后,HTML 元素(对象)的宽度、高度等各种属性值都将“丢失”;

而使用 visibility:hidden 属性后,HTML 元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在_前端培训

JS 部分

对于应届生来说,不会考一些非常高深的 JS,更多的是注重基础部分,看看是否能够掌握透彻基础知识。所以 JS 基础要求会比较高。



怎样添加、移除、移动、复制、创建和查找节点

1)创建新节点

createElement() // 创建一个具体的元素

createTextNode() // 创建一个文本节点

2)添加、移除、替换、插入

appendChild() // 添加

removeChild() // 移除

replaceChild() // 替换

insertBefore() // 插入

3)查找

getElementsByTagName() // 通过标签查找

getElementsByName() // 通过元素 Name 属性查找

getElementById() // 通过元素 Id 属性查找

querySelector() // 匹配元素的 CSS 选择器(id, 类, 类型, 属性, 属性值等)

希望获取到页面中所有的 checkbox 怎么做?(不使用第三方框架)

let domList = document.getElementsByTagName('input')

let checkBoxList = [] // 所有 checkbox

let len = domList.length

while(len--){ // while 效率 比 for 高

if(domList[len].type == 'checkbox'){

checkBoxList.push(domList[len])

}

}

设置一个已知 ID 的 DIV 的 html 内容为 xxxx,字体颜色设置为黑色

let dom = document.getElementById('ID')

dom.innerHTML = 'xxxx'

dom.style.color= '#000'

已有字符串 foo = 'get-element-by-id',写一个 function 将其转换为驼峰表示法,即 getElmentById

function switchToHump(str){

let arr = str.split('-') // [get,element,by,id]

for(let i = 1; i < arr.length; i++){

arr[i] = arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1)

}

str = arr.join("")

return str

}

稍微分析一下这里面最难的那一串啥意思

arr[i].charAt(0).toUpperCase() 意思就是获取该字符串第 0 个字符,并将其转换为大写

arr[i].substr(1,arr[i].length-1) 意思就是 提取从第 1 个字符开始到最后一个字符

将其用“+” 来连接,就得到了驼峰字符串啦~

输出今天的日期,以 YYYY-MM-DD 的方式

我知道百度有,但是面试的时候可不会让你百度,这个东西会经常用到的,比如用户操作之后需要将操作时间按照格式传给后端等等。如果这个都不会,那可是很糟糕的_web前端培训

let d = new Date()

let year = d.getFullYear() // 是 FullYear

let month = d.getMonth() + 1 // 月份 0 代表 1 月 所以 + 1

let day = d.getDate() // 是 Date 不是 day

// 注意了,题目要求的是 MM 的格式,如果是 1 月要变成 01 月

month = month < 10 ? '0' + month : month

day = day < 10 ? '0' + day : day

alert(year + '-' + month + '-' + day)

文章来源于 SP 学习记录

用户头像

@零度

关注

关注尚硅谷,轻松学IT 2021.11.23 加入

还未添加个人简介

评论

发布
暂无评论
web前端培训:2022前端基础面试题_CSS_@零度_InfoQ写作平台