2024年最新CSS 闲着无聊读一读,不知不觉学会CSS (四),字节跳动前端外包面试

JavaScript

  • js的基本类型有哪些?引用类型有哪些?null和undefined的区别。

  • 如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)

  • Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?

  • JS常见的dom操作api

  • 解释一下事件冒泡和事件捕获

  • 事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?

  • 对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?

  • this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?

  • call,apply,bind

  • 显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链

  • 创建对象的多种方式

  • 实现继承的多种方式和优缺点

  • new 一个对象具体做了什么

  • 手写Ajax,XMLHttpRequest

  • 变量提升

  • 举例说明一个匿名函数的典型用例

  • 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?

  • attribute和property的区别

  • document load和document DOMContentLoaded两个事件的区别

  • JS代码调试

  • 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

例如:

*{

margin:0px;

padding:0px;

}

2.清除浮动

===================================================================

注意:只要有浮动,就会有清除浮动!

为什么要清除浮动?

答:因为经过浮动了元素,它会影响到它下面的元素的排版布局,还有浮动元素的父元素没有将浮动元素包裹着。

只要清除了浮动元素,不会影响到浮动元素的下面进行排版布局,浮动元素的父元素会将浮动元素从视觉上包裹着。

清除浮动的三种方法:

  • 给浮动元素的父元素设置一个固定的高度。(该方法不建议使用,因为一个元素的高度一般情况下不是手动设置的)

  • 使用清除浮动的样式属性 :clear,clear这个属性是专用于来清除浮动的,它有三个值:

  1. clear:left 清除左浮动 ;

  2. clear:right 清除右浮动;

  3. clear:both 两者都清除;(一般使用这个。)这个属性一般用在最后一个浮动元素的下面,在最后一个浮动元素的下面新建一个空白的div这个div不要放置任何东西,它的功能只是清除浮动。就像下面这样:其中div1和div2、div3都是已经设置过CSS类选择器包含浮动属性。

在这里插入图片描述

  • 使用overflow:hidden 这个属性来清除浮动。overflow:hidden 它原意是用来将溢出的部分进行隐藏,但是它还可以用于清除浮动。

注意:有时候在ul无序列表中没法添加div不能实现第二种方法的清除浮动,这时就需要overflow来清除浮动了。

清除浮动这一节,有点难理解,要多多练习。

3.盒子模型

===================================================================

一个盒子的组成部分:内容(content)、内填充(padding)、边框(border)、外边距(margin)。

一个盒子包含以下几种属性:

在这里插入图片描述

这里放一张关于盒子模型的图片:

在这里插入图片描述

在这里插入图片描述

大体上样式就是图片那样,其实和正常的CSS,html差不多。

疑问:一个盒子的总宽度,总高度如何计算呢?

答:

1.一个盒子的总宽度=盒子里面内容的宽度+左右两边的填充+左右两边的边框线。

2.一个盒子的总高度=盒子里面内容的高度+左右两边的填充+左右两边的边框线。

注意:一个盒子的高度一般情况下是不用设置的,因为一个盒子的高度它应该是由其内容来决定的。

4.padding(内填充)

===========================================================================

四种属性非常常用:

padding-top:上内填充。

padding-right:右内填充。

padding-bottom:下内填充。

padding-left:左内填充。

padding简写属性:

padding简写时,是按照上、右、下、左。(从布局上来看,就是顺时针的方向。)

padding只有一个值时,例如:padding:20px;这表示上右下左这四个方向的内填充都是20;

padding有两个值时,例如:padding:10px 20px;这表示上下是10px,左右是20px。

padding有是三个值时,例如:padding:10px 20px 30px;这表示上为10px,左右为20px,下为30px。

padding有四个值时,就按照上、右、下、左,来执行了。

在这里插入图片描述

5.margin外边距

========================================================================

margin主要是指盒子与盒子之间的距离。

margin的四个属性:

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:左外边距

margin简写属性:

margin的简写顺序和padding一样,上、右、下、左。

并且和padding一样,数值也是一样的。

在这里插入图片描述

6.margin塌陷现象

=========================================================================

什么是margin塌陷现象?

答:

**1.在标准文档流中,竖直方向的margin值不会叠加,它会取较大的值。

2.横着方向是没有margin的塌陷现象的。

3浮动元素是没有margin的塌陷现象的。**

下面是一个标准文档流的案例,这里的margin就是取得40px,也就是最大值:

在这里插入图片描述

7.margin居中

=======================================================================

margin的值可以是auto,当左外边距与右外边距的值都是auto时,那么这个盒子就会水平居中

注意:

1.使用margin来实现水平居中时。一定要 有固定的宽度(给这个盒子设定一个宽度) 只有块元素可以实现水平居中,行内元素是是不能实现居中的。

  • 不设置宽度,默认是100%,就体现不出居中的效果了。

  • 这里顺带提一下行内元素,行内元素就是默认情况下只占自己内容的宽容和高度的空间,无法改变它的高度或者宽度,只能转成块级元素后方可改变宽度和高度。也就是说行内元素无法设置自己的宽高。

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用?
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用?
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?

如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

route 和 router 的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?
[外链图片转存中…(img-iTIMzHFO-1715695713170)]

如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 9
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值