面试加油哈哈哈哈哈

最新推荐文章于 2024-04-30 23:16:52 发布
最新推荐文章于 2024-04-30 23:16:52 发布
阅读量248 收藏
点赞数
文章标签： 面试 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43871984/article/details/121507594
版权

前端面经：

Day1：

1. 浏览器页面有哪三层构成？分别是什么，作用是什么？

浏览器由结构层、表示层和行为层构成，分别是HTML、css和JavaScript，HTML的作用是实现页面的结构，css是实现页面的样式和表现风格，比如页面的颜色，元素的形状动画等等，JavaScript是用来写页面的交互，比如轮播图，表单等与用户进行交互的功能和业务。

2.HTML5是什么？优缺点？

HTML5是包含了HTML、css、JavaScript在内的一套技术标准，是w3c发布的，它减少了对浏览器插件比如flash等的依赖，提高了用户体验，有利于开发者开发

优：

  • 网络统一标准，由w3c推荐出来的
  • 多设备，跨平台
  • 即时更新，更新HTML5游戏就像更新网页一样
  • 支持了媒体元素，增加了video、audio标签，很好的代替了flash
  • 对seo友好，涉及页面抓取的时候
  • 标签语义化了，有header、footer、aside、section、nav等标签

缺：

  • 兼容性问题，ie9以下不支持
  • 安全问题，web socket这样的功能容易被黑客盗用用户信息
3. doctype的作用，严格模式和混杂模式如何区分，有啥意义？

  • 文档类型定义，放在文档的最前面，告诉浏览器的解析器，用什么文档类型规范来解析这个文档。

  • 严格模式又称标准模式，是按照w3c的标准来解析代码，混杂模式是指按照浏览器自己定义的方式来解析代码。区分是根据网页的DTD直接相关。如果文档中有严格的doctype定义，则是以严格模式解析文档，有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式，如果doctype不存在或者形式不正确会导致文档以混杂模式解析，HTML5没有DTD，也就没有严格模式和混杂模式之分。盒模型的宽高解析不一样。

  • 统一规范，但是改变现有的 css，完全去遵循标准，会使许多旧网站或多或少受到破坏，如果浏览器突然以正确的方式解析现存的css，陈旧的网站的显示必然会受到影响。所以，所有的浏览器都需要提供两种模式：混杂模式服务于旧式规则，而严格模式服务于标准规则。

4. HTML5有哪些新特性，移除了哪些元素？

比如语义化元素：header、footer、article、section、nav

本地存储：localstorage、sectionstorage

图像：canvas

多媒体：video、audio

表单控件：date、time、tel、number、email、search、color等等，新属性：multiple、autofocus、placeholder等等

新的技术：webworker、websocket等等

移除的元素有：big、center、font、basefont，frame、frameset等等

5. 浏览器的内核

IE：trident内核

firefox：gecko内核

Chrome：基于webkit的blink内核

Safari：webkit内核

Opera：以前是presto内核，现在改成谷歌的blink内核

6. 什么是web标准，w3c是什么

web标准是一系列标准的集合，包括html、css、ECMAScript等的标准，这些标准大部分由万维网联盟起草和发布，为了解决因浏览器版本不同，设备的软硬件不同造成需要开发很多个版本的网页的问题，w3c是万维网联盟，是一个web开发的国际性联盟

7. HTML5行内元素有哪些？块级元素有哪些？

行内元素：span、a、i、img、input、code、br、textarea等

块级：div、p、h1~h6、hr、ol、ul、table等

空元素：br、hr

8. webGL是什么？有什么优点？

WebGL是一种3D绘图标准，是js和OpenGL2.0的结合，通过增加一个OpenGL的js绑定，WebGL可以为h5canvas提供硬件3D加速渲染，无需任何浏览器插件支持

9. cookies、sessionStorage、localStorage的区别？
  • cookies是用于浏览器端存储数据，内存较小，并且有条数限制，一般在4kb，在发送请求时会被发送到服务器端，用于验证用户的身份等操作，被http协议携带，有时间限制，服务端设置。
  • sessionStorage是用于浏览器存储数据，内存比较大，只存储在本地不会发送到服务端，在浏览器窗口被关闭s时数据就会删除。
  • localStorage的作用与sessionStorage一样，但是浏览器窗口关闭时数据会保存在硬盘中，不会被删除，只有用户清除缓存和手动删除才会被删除
10. 语义化的理解？

语义化更利于SEO，与搜索引擎建立良好的共同，为爬虫抓取更多有效信息，方便团队开发和维护，语义化的代码更具可读性，让机器和人都看得懂。

11. link和@import的区别？

相同点：两者都为外部引入文件，不同点是link是HTML标签，是链接文件的，而@import是导入文件，link没有兼容性问题，@import只能导入css文件，在载入时link的文件是同时加载的，而@import是页面载入完再加载，后者用户体验可能不太好。

12. 说说你对SVG的理解？

svg可缩放矢量图形，基于xml用来描述二维矢量图形的一种图形格式，由标签及属性来绘制图形，比如

<svg width="100" height="100">
    <circle cx="0" cy="0" r="50%" fill="green">
</svg>

特点是任意缩放，文本独立，文件较小，效果强，浏览器大多支持，IE8下载一个插件Adobe SVG就可以了

13. HTML的全局属性有哪些？

accesskey激活元素快捷键、class规定元素一个或多个类名、id规定元素的唯一id、lang规定元素内容的语言、style规定元素的css行内样式、title有关元素的额外信息、translate规定元素内容是否应该翻译

14. 说说超链接target属性的取值和作用？
_blank：在新浏览器窗口打开链接
_self：在自身窗口打开链接，默认
_parent：在父级窗口打开链接
_top：在整个窗口打开链接
15. data-属性的作用？

H5新增属性，后面跟自定义名称，使用了这个属性的会使存储的数据通过dataset获取，得到的是驼峰命名法的对应名字，比如data-code-good得到的是codeGood，若浏览器不支持则采用getAttribute获取数据

Day2：

1. 介绍一下你对浏览器内核的理解？

它是浏览器中一个最重要的模块，它的作用是将一切请求回来的资源转化为可视化的图像，也称渲染引擎。（一开始渲染引擎跟js引擎没有区分很明确，浏览器内核也就分为了js引擎和渲染引擎）

不同的浏览器采用不同的浏览器内核：

IE使用的是trident（IE、360、搜狗等也是这个）

Safari采用的是webkit

Chrome最早采用的是Chromium，后来转为webkit的分支引擎blink

Opera最早采用的是elektra排版引擎，后转为presto渲染引擎，如今采用的是webkit的分支引擎blink

Firefox采用的是gecko

2. iframe的缺点。

了解较少

  • 会产生很多页面，难管理
  • 结构迷惑，用户体验不好
  • 代码复杂，无法被搜索引擎搜索到，SEO不友好
  • 兼容性差，移动设备看不全
  • 会增加http请求，导致服务器压力大
  • 现在都是用ajax代替iframe
3. Label的作用是什么？怎么用？

label元素用来定义表单之间的控制关系，当用户点击这个元素时浏览器会自动将焦点转到和该元素相关的表单控件上。

<label for="Name">姓名：</label>
<input id="Name" type="text">
4. 如何实现浏览器内多个标签页之间的通信？
  • websocket通讯
  • 定时器setInterval+cookie
  • 使用localstorage
  • html5浏览器的新特性SharedWorker

https://www.jianshu.com/p/5f0e6d8fd36a

5. 如何在页面上实现一个圆形的可点击区域？

div+js点击事件

6. title与h3的区别，b与strong的区别，i与em的区别

title是属性，可以用来显示鼠标放在元素上时的元素的信息，h3是标签，b和strong都能使字体加粗，但是b是物理元素，strong是逻辑元素，但是后者更语义化，对SEO友好。i和em都能使字体变斜体，i是物理元素，em是逻辑元素

7. 实现不使用border画出1px高的线，在不同浏览器的标准模式和怪异模式都能保持一致效果。
<div style="width:100%;height:1px;background-color:black"></div>
8. 简述一下src和href的区别？

src用于替换当前元素，href用于在当前文档与引用的资源之间确立关系，使用src会把指定资源下载到本文档内，并且会停止其他资源的下载和处理，会阻塞渲染。而href是下载资源时不会停止对当前文档的处理

9. 谈谈对canvas的理解？

canvas相当于一个画布，本身没有绘制能力，仅仅是图像的容器，通常通过js在上面绘图，可以实现flash完成的动画等功能。svg二维，canvas可以二维也可以三维

10. WebSocket与消息推送？

WebSocket是h5开始提供的一种浏览器与服务器间进行全双工通信的网络技术，依靠这种技术可以实现客户端与服务端的长连接，双向实时通信。特点是事件驱动，异步使用ws或wss协议的客户端socket能够实现真正意义上的推送功能，缺点是部分浏览器不支持

11. img的title和alt有什么区别？

alt是用于图片无法加载时显示的信息，title是鼠标移到图片时显示的信息，一个是图片不能加载时显示，一个是图片显示成功后才可以显示

12. 表单的基本组成部分有哪些？表单的主要用途是什么？

表单的组成部分有：表单标签，表单域比如文本框，密码框等等，表单按钮包括reset和submit，主要用途是用于网页的数据采集和向服务器传送数据。

13. 表单提交中的get和post方式的区别？

get提交发送的get请求，是从服务端获取数据，发送的get请求信息可以在url的查询字符串中看到，安全性低。post提交发送的是post请求，是向服务端发送数据，在url上看不到数据内容，安全性高。

14. h5新增表单元素？

datalist：表单输入域选项列表，通过与input的list属性来绑定

output：提供不同类型输出，可以显示计算结果

15. HTML5废弃了那些HTML4标签

frame、frameset、noframe、applet、big、center、basefont

Day3：

1. HTML5标准提供了哪些新的API？

多媒体API：audio、video的dom操作，比如play()、pause()、onplay()等等

客户端储存API：localStorage和sessionStorage的setItem、getItem、removeItem、clear等

requestAnimationFrame：关键帧动画，代替了setTimeout来实现，不会掉帧

history API：history的back、forward、go等

websocket、worker、file Reader等等

https://www.cnblogs.com/yangpeixian/p/11367193.html

2. HTML5 应用程序缓存和浏览器缓存有什么区别？

应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件，与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存

3. HTML5 canvas有什么用？

canvas元素用于在网页上绘制2D或3D图形，它可以直接在HTML上进行图形操作，

<canvas width="300px" height="200px"></canvas>
4. 除了audio和video，HTML5还有哪些媒体标签？

source：用来代替audio和video的src属性定义媒体资源，比如多个格式的时候

canvas：画布API

embed：定义外部可交互的内容或插件如flash等

5. HTML5如何嵌入视频？
<video src="../xxx" controls height="450px" width="300px"></video>
6. HTML5如何嵌入音频？
<audio src="../xxx"></audio>
7. 新的HTML5文档类型和字符集是？
<!doctype html>
<meta charset="utf-8">
8. 解释一下css盒子模型？

css盒模型由content、padding、border、margin组成，分为w3c标准盒模型和IE盒模型，w3c标准盒模型的width只包括content，而IE盒模型的width包括border+padding+content，在设置样式的box-sizing中可以设置content-box和border-box，分别对应这两种模型

9. 请说说css选择器的类型有哪些？举例子说明

  • 元素选择器：div {}

  • 类选择器：.className {}

  • id选择器：#idName {}

  • 属性选择器：a[href] {}

  • 后代选择器：div p {}

  • 子代选择器：div>p {}

  • 相邻兄弟选择器：div+p {}

  • 全兄弟选择器：div~p {}

  • 交集选择器：div.one[title=“text”] {}

  • 并集选择器：div, .one, [title] {}

10. css有什么特殊性：优先级？计算特殊值？

优先级：

!important

内联样式

id选择器

类选择器/属性选择器/伪类选择器

元素选择器/伪元素

通配符

继承的样式

  • 同类型同级别后面会覆盖前面的
  • 内联样式>内部样式>外部样式

计算特殊值：

是从优先级最高开始算，优先级最高的一样就按有多少个

11. 要动态改变层中的内容可以使用什么方法？

innerHTML和innerText

一个是可以解析标签，一个不能

12. 常见的浏览器兼容性问题与解决方案？
  • 不同浏览器的标签默认的外补丁和内补丁不同
    • CSS里 *{margin:0;padding:0;}
  • 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
    • 在float的标签样式控制中加入 display:inline;将其转化为行内属性
  • 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
    • 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
  • 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
    • 在display:block;后面加入display:inline;display:table;
  • 图片默认有间距
    • 使用float属性为img布局
  • 标签最低高度设置min-height不兼容
    • 如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
  • 透明度的兼容CSS设置
    • 加上filter:alpha(opacity=0);和opacity:0
13. 列出display的值并说明他们的作用？

display: none|block|inline|inline-block|flex|normal

不显示|块级元素|行内元素|行内块元素|开启弹性布局|默认样式

14. 如何居中div，如何居中一个浮动元素？

给div设置一个宽度，margin:0 auto。

position:absolute top:50%,left:50% transform:translate(-50%，-50%)

父元素display: flex justify-content:center align-items:center

浮动元素：

设置当前div的宽度，然后设置margin-left:50%; position:relative; left:-50px;其中的left是自身宽度的一半

position定位：子绝父相

15. 清除浮动的几种方法？
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

----------------------------------
.clear {
    clear: both;
}
<div class="clear"></div>

https://blog.csdn.net/h_qingyi/article/details/81269667

Day4：

1. 如何实现对一个元素的水平居中显示？

第一种方法:

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的左外边距、上外边距为宽高的负1/2-->

margin-left:-100px;

margin-top:-200px;

}

*兼容性好;缺点:必须知道元素的宽高

-------------

第二种方法：

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->

transform:translate(-50%,-50%);

}

*这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器

---------------

第三种方法

div.box{

width:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、下、左、右都为0-->

left:0;

right:0;

top:0;

bottom:0;

<!--设置元素的margin样式值为 auto-->

margin:auto;

}

*兼容性较好，缺点:不支持IE7以下的浏览器

---------------

第四种方法

.out {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    height: 500px;
}
.inn {
    height: 100px;
    width: 100px;
    background-color: red;
}
2. inline，block和inline-block的细节对比？

  • display：inline

    不占一行，宽度随元素内容变化，设置height和width属性无效，水平方向的padding和margin设置有效，但是竖直方向设置无效

  • display：block

    独占一行，可以设置宽高，即使设置了宽，依然会独占一行，可以设置margin和padding属性

  • display：inline-block

    结合了block和inline的特性，不独占一行而且可以设置宽高和margin，padding

3. 什么叫优雅降级和渐进增强？

优雅降级：一开始构建完整功能，再根据低版本浏览器进行兼容。渐进增强是针对低版本浏览器进行构建页面，保证最基本的功能，然后针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

4. 说说浮动元素会引起的问题和你的解决办法？

问题：

  • 父元素的高度无法被撑开，父元素因为子级元素浮动引起的内部高度为0的问题，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素会跟随其后
  • 如果它不是第一个元素浮动，那么它之前的元素也需要浮动，不然的话会被覆盖掉

解决方法：

使用完后清浮动

清浮动的几种方法：

  1. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

  2. 父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

  3. 使用after伪元素清除浮动（推荐使用）

    .clear-all::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clear-all {
    *zoom: 1;
}

  4. 使用before和after双伪元素清除浮动

    .clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}
 
<div class="fahter clearfix">
    <div class="big">big</div>
    <div class="small">small</div>
</div>
<div class="footer"></div>
5. 你有哪些性能优化的方法？

网页内容：

1.减少http请求: http协议是无状态的应用层协议，意味着每次http请求都要建立通信链路、进行数据传输。

减少http的主要手段是合并css、合并javascript、合并图片。

2.减少DNS查询次数

3.避免页面跳转

4.使用浏览器缓存：缓存AJAX

5.延迟加载：LazyLoad Images。刚加载的时候减少http请求。

6.提前加载

7.减少DOM元素数量

8.根据域名划分内容

9.减少iframe数量

10.避免404

服务器：

1.使用CDN 2.添加Expires或Cache-Control报文头 3.Gzip压缩传输文件

4.配置ETags 5.使用GET AJAX请求 6.避免空的图片src

cookie：

1.减少cookie的大小和传输次数 2.页面内容实用无cookie域名

CSS：

1.将样式表放在head中：网页会在全部加载完成CSS后渲染页面。

2.避免CSS表达式 3.用代替@import 4.避免使用Filters

Javascript：

1.脚本置底 2.使用外部的Javascript和CSS文件 3.精简Javascript和CSS

4.去除重复脚本 5.减少DOM访问 6.使用智能事件处理

7.慎用with 8.减少作用域查找

图片：

1.优化图片 2.使用CSS Sprites 3.不要在HTML中缩放图片

4.使用小且可缓存的favicon.ico

6. 为什么要初始化css样式？

1.浏览器差异

不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异

2.提高编码质量

如果不初始化，整个页面做完会很糟糕，重复的css样式很多

最简单的初始化：*{padding: 0;margin: 0;}（不建议）

7. 解释一下浮动和它的原理。

浮动元素脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框停留。

BFC触发条件以及规则

触发条件：

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

规则：

1.浮动的元素会被父级计算高度（父级触发了BFC）

2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

3.margin不会传递给父级（父级触发了BFC），两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

巧妙用法：

清除浮动；

非浮动元素盖住浮动元素，可依靠触发BFC来解决

margin合并情况，在其中一个元素父级触发BFC，将不会合并margin

什么是BFC，如何触发BFC
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的布局规则
一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边， 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算

哪些元素或属性能触发BFC
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC的应用
1、自适应两栏布局
2、清除内部浮动
3、防止margin上下重叠

8. 谈谈你对css中刻度的认识？
  • 0可以省略单位
  • 长度单位包括相对长度单位和绝对长度单位
    • 相对长度单位有：em（相对于该元素或父元素的font-size），rem（相对于根元素的font-size），ex，ch，%
    • 绝对长度单位有：px，cm
9. 浏览器标准模式和怪异模式之间的区别是什么？

标准模式是w3c标准解析执行代码，怪异模式则是使用浏览器自己的方式解析执行代码，区别标准模式和怪异模式是看文档的DTD声明是有没有或者定义规不规范。

10. 说说你对边距折叠的理解？

外边距折叠：margin-top和margin-botton会折叠成一个，正值以大的边距为准，负值以绝对值大的为准，有正负以相加为准，margin一般用来设置兄弟之间的关系，padding一般用来设置父子之间的关系

解决传递？

​ 1. 给box加一个padding

​ 2. 给box加一个border

​ 3. 触发BFC，盒子格式化：

​ ** overflow: 加一个除了visible的属性*

    * 浮动

Day5：

1. 说说隐藏元素的方式有哪些？
display: none;  //不会占据原来的位置
visibility: hidden;  //会占据原来的位置
opacity: 0; //透明度为0，看不见，但是可以操作绑定事件
z-index: -1;  //遮盖
transform: translateX(-100%)  //相对自己左移100%
使用HTML5的新增属性hidden="hidden" //不占据原来的位置
2. 重置浏览器默认样式？

h1,h2,div,body…{margin: 0;padding: 0}

a {text-decoration: none;color: black;}

ul,ol{list-style: none;}等等

3. 谈谈对 bfc 与 IFC 的理解？

(1)、什么是BFC与IFC
a、 BFC (Block Formatting Context)即“块级格式化上下文”
IFC (Inline Formatting Context)即行内格式化上下文。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。
b、BFC是W3C CSS 2.1
规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。
C、在普通流中的Box(框)属于一种 formatting context(格式化上下文)，类型可以是block，或者是
inline，但不能同时属于这两者。并且，Block boxes(块框)在block formatting
context(块格式化上下文)里格式化，Inline boxes(块内框)则在 Inline Formatting
Context(行内格式化上下文)里格式化。
(2)、如何产生BFC
当一个HTML元素满足下面条件的任何一点，都可以产生BlockFormatting Context:
a、float的值不为none
b、overflow的值不为visible
c、display的值为table-cell,
table-caption,inline-block中的任何一个
d、position的值不为relative和static
CSS3触发BFC方式则可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式。
(3)、BFC的作用与特点
a、不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖
如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流)是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute.fixed时元素将脱离标准流。

4. 说说你对页面中使用定位的理解？

使用css布局position主要有下面的值：

static：静态的，遵循标准流，使用left、right、top、bottom无效

relative：相对定位，相对于自己，遵循标准流，使用left、right、top、bottom都是参照自身位置进行偏移

absolute：绝对定位，相对于离自己最近的非static的祖先元素进行定位，没有则参照body，脱离标准流

fixed：固定定位，一窗口为参考

center：以定位祖先元素为中心点参考

page：

sticky：relative和fixed的集合

Day6：

  1. js数据类型
    • null、undefined、Boolean、string、number、symbol、object、bigint（Chrome 67）
  2. css盒模型
    • content、padding、border、margin
  3. css选择器
    1. id选择器、类选择器、标签选择器、属性选择器、子选择器、子代选择器、兄弟选择器、通用选择器、交集并集选择器、伪类选择器、伪元素选择器
    2. 优先级
      • ！important
      • id选择器
      • 类选择器/属性/伪类
      • 标签/伪元素
      • 通用
  4. 箭头函数与普通函数的区别
    1. 箭头函数是匿名函数，不能作为构造函数
    2. this指向永远指向上下文，不随call和apply的this改变
    3. 不能使用new关键字
    4. 没有arguments，使用rest参数
  5. 跨域及解决方案：access-control-allow-origin： *；jsonp
  6. 闭包：函数及函数内部能够访问到的变量
  7. typeof返回数据类型：Boolean、object、string、number、function、undefined
  8. 判断是否为数组：array.isArray()、array instanceof Array、array.constructor === Array、Object.prototype.toString.call(array) === [‘object Array’]
    1. v-show本质就是通过设置css中的display设置为none，控制隐藏
    2. v-if是动态的向DOM树内添加或者删除DOM元素
  9. 字符串的方法：
    1. charAt、charCodeAt、concat、indexof、lastIndexOf、match、replace、slice、split、substr、substring、toLowerCase、toUpperCase、toString
  10. 数组方法：
    1. push、pop、shift、unshift、slice、splice、join、find、indexOf、lastIndexOf、concat、split、sort、reverse、map、filter、every、some、reduce、keys
nxyx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2023华为OD面试手撕代码经验分享
MISAYAONE的博客
05-17 2万+
华为OD 面试手撕代码经验分享
哈哈哈哈，阿里面试总结
02-04
哈哈哈哈，阿里面试总结
2023前端面试题整理总结~
热门推荐
LJJONESEED的博客
08-13 3万+
前端面试题
java实习生面试
weixin_51412054的博客
05-19 204
java实习生面试
Gophers 如何准备面试？
EDDYCJY的博客
11-22 143
前言哈喽，大家好，我是asong。断更接近两个月了，这段时间我一直在准备面试，所以这篇文章就主要来说一说当前市场环境以及该如何准备面试；我本人技术栈主要是Go语言，找的都是Golang开发的岗位，所以本文更适合相关技术栈的朋友们观看；当前Go语言市场环境当前互联网环境人尽皆知，不少公司都在降本增效，所以招人的公司并不多，除了宇宙条、砍一砍公司从未停止过招人，其他公司基本都停止了招聘，所以这个时候找...
面试总结课程笔记哈哈哈哈
05-01
123456
哈哈iOS多线程面试题
05-19
iOS多线程面试题
JAVA开发面试笔试题汇总_哈哈_
09-28
Java面试题，只是上传数据换取数据，请见谅
.net面试经典大全哈哈
03-05
啊很多发idfsdjfidjf 基督教发idf就idjfisd仿盛大发生大幅是 季度房价大幅
16：00面试，16：06就出来了，问的问题有点变态。。。
qq_48811377的博客
04-30 796
整份文档一共有将近 200 页，全部为大家展示出来肯定是不太现实的，为了不影响大家的阅读体验就只展示了部分内容，还望大家海涵，希望能帮助到您面试前的复习且找到一个好的工作，也节省大家在网上搜索资料的时间来学习！
嵌入式一些面试题
博客
04-28 592
部分面试题
JAVA每日面试题
Nekosann的博客
04-26 460
Java类加载器负责将.class文件加载到JVM中，并转换成运行时的类。加载：查找.class文件或JAR文件，并将其读入JVM。验证：确保加载的类文件符合JVM规范，没有安全问题。准备：为类分配内存，并设置静态变量的初始值。解析：将类的二进制数据中的符号引用转换为直接引用。初始化：执行类构造器()方法，初始化静态变量。启动类加载器（Bootstrap ClassLoader）：负责加载Java核心类库。扩展类加载器。
Android性能优化面试题汇总
xiangzhihong8的专栏
04-29 41
Android的性能优化涉及多个方面，如启动优化、稳定性优化、内存优化、网络优化、电量优化、安全优化等方面。
20个 Golang 常见面试问题
sre救赎之路
04-26 541
Golang 提供了 encoding/json 包，使用 json.Marshal 和 json.Unmarshal 函数将 Go 类型编码为 JSON，并将 JSON 解码为 Go 类型。Golang 鼓励显式地将错误作为返回值返回，并提供了如 errors.New 和 fmt.Errorf 这样的函数来创建和格式化错误。Golang 提供了同步原语，如互斥锁（mutexes）和通道（channels），用于在并发场景中安全地访问和修改共享资源。Golang 中的反射允许在运行时检查类型、值和结构体。
Django后台项目开发实战五
最新发布
weixin_72949205的博客
04-30 747
大家看到这个页面其实非常长，因为我们的字段实在是太多了，用起来很复杂，所以面试官也好，还是hr也好，他们其实不太清楚哪些内容是他需要填的，所以我们对这个页面进行优化，把这个页面的内容分组展示。创建 interview 应用，实现候选人面试评估表的增删改功能，并且按照页面分组来展示不同的内容，如候选人基础信息，一面，二面的面试结果，HR 的面试结果。为了方便，我们使用 pycharm 的代码编辑器，新建一个文本文档，把 models.py 里面的字段粘贴过来，然后在这个文件里面去做批量编辑。
面试题总结第二弹
心比天高的小菜鸟
04-25 930
首先获取volatile变量的值，将该变量的值加1，将该volatile变量的值写会到对应的主存地址。加载因子的选择是一个权衡。相反，较大的加载因子会减少扩容的频率，但可能导致较多的冲突，从而影响性能。只有数组长度是2的幂次方倍才能够确保数组中的每一个位置发生hash冲突的概率是相同的，数组长度减一的二进制码必须全部是1，否则会出现部分位置永远不会发生hash冲突而造成资源浪费。它负责监测Redis节点的健康状态，当主节点发生故障时，自动进行故障转移，选举新的主节点，保证Redis集群的高可用性。
mysql优化面试总结
梦想是很难很难的，所以先勇敢一点
04-29 97
只是我常常觉得很多话无从说起。就像在平时，见到一些陌生人，一些熟悉和欢喜的人，不知道与之说些什么。也很少对身边的人谈论自己。所有的时间和记忆，都可以交付给书写。有些在书中说过多次，却似乎并未说出真正想表达的意思。有些从无提起过，它们在黑暗中更显得郑重端庄。有些事是不能轻易说起的。书写可以，但那也是不足够的。
面试二十二、跳表SkipLists
leimeili的博客
04-25 939
跳表全称为跳跃列表，它允许快速查询，插入和删除一个有序连续元素的数据链表。跳跃列表的平均查找和插入时间复杂度都是O(logn)。快速查询是通过维护一个多层次的链表，且每一层链表中的元素是前一层链表元素的子集（见右边的示意图）。一开始时，算法在最稀疏的层次进行搜索，直至需要查找的元素在该层两个相邻的元素中间。这时，算法将跳转到下一个层次，重复刚才的搜索，直到找到需要查找的元素为止。一张跳跃列表的示意图。每个带有箭头的框表示一个指针, 而每行是一个稀疏子序列的链表；底部的编号框（黄色）表示有序的数据序列。
哈工大自动化推免面试
09-14
对于哈工大的控制推免面试，根据引用中提供的信息，可以得出以下答案： 哈尔滨工业大学（哈工大）的控制推免面试是指通过推免方式直接进入硕士研究生阶段，免去考试的环节。在面试过程中，通常会涉及一些常见问题。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值