前端面试题总汇（持续更新中）

吃一口土豆涨一点脑洞
281 阅读9分钟

前端面试题总汇（持续更新中）

css

display:none; 和visibility:hidden;的区别是什么？

  1. visibility：hidden 隐藏元素，但在网页中仍然占有位置 display:none 元素的显示设置为无，在网页中没有位置了
  2. visibility：hiden 的元素仍然还具有宽度与高度 display:none 元素则宽度与高度都没有了

BFC是什么意思，解决的是什么问题，如何触发BFC？

bfc称为块级格式化上下文，是一个独立渲染区域。规定了内部box如何布局，并且与这个区域外部毫不相干。

解决的问题是：避免垂直外边距的重叠，以及父级元素高度塌陷的问题

触发：float的值不是none；position的值不是static或者relative；display的值是inline-block、block、table-cell、flex、table-caption或者inline-flex；overflow的值不是visible。

CSS的选择器权重以及比较顺序？

内嵌样式>内部样式>外部样式>导入式

！important > 内嵌 1000 >Id 100 > class 10 > tag=伪元素 1 > ( * + > ~) 0

css盒模型、css如何设置两个盒模型 ？ ❤

css盒模型分为： W3C（标准盒模型）：

 width+padding+border+margin

IE(怪异盒模型):

内容区：（width+padding+border）

 内容区+padding

标准盒的设置 box-sizing:content-box

怪异盒的设置 box-sizing:border-box

如何水平垂直居中一个元素? ❤

1.将元素设置为行内块元素，display:inline-block

父级元素设置 左右居中 text-align:center

子元素设置 上下居中 line-height:center

  1. display:flex

justify-content: center;

align-items: center;

  1. 是否该元素是否存在宽高，如果有宽高 定位：postion：absolute-margin 减去自身宽度高度的一半
  2. 如果不存在宽度高度，则postion：absolute+transform: translate(-50%, -50%);
  3. 可以使用 网格布局

css可以继承的属性有哪些？

（1）字体系列属性 font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

（2）文本系列属性 text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、 text-transform、direction、color

（3）表格布局属性 caption-sideborder-collapseempty-cells

（4）列表属性 list-style-type、list-style-image、list-style-position、list-style

（5）光标属性 cursor

（6）元素可见性 visibility

css新增的伪类有哪些?

nth-child（n） 父元素下面第几个元素

nth-last-child(n) 父元素下面第几个元素（从后面查找起）

last-child 父元素下的最后一个元素

only-child 父元素下的唯一的元素 如果父元素下面只有一个元素

elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数

elem:first-of-type选中父元素下第一个elem类型元素

elem:last-of-type选中父元素下最后一个elem类型元素

elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素

elem:empty选中不包含子元素和内容的elem类型元素

elem:target选择当前活动的elem元素

:enabled控制表单控件的禁用状态

:disabled控制表单控件的禁用状态

:checked单选框或复选框被选中

有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度?

  1. 使用弹性盒布局 display：flex 给第一个设置高度，第二个盒子 flex：1
  2. 使用定位来解决 外层盒子设置为 position:relative 里面需要填充剩下宽度的盒子设置 position：absolute top:100;left:0;right:0;bottom:0;

常见的元素隐藏方式？

display:none 元素不会在页面中占据位置，也不会响应绑定的监听事件

visibility:hidden 元素在页面中仍占据空间，但是不会响应绑定的监听事件

opacity:0 元素在页面中仍占据空间，可以响应绑定的监听事件

z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏

transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件

绝对定位将元素移除可视区域内，以此来实现元素的隐藏

列举一些CSS框架

Bootstrap Layui ElementUI antd

link与import的区别

  1. link是一个标签而import是作为一个方法

  2. link没有兼容性的问题，而import则会有兼容性问题

  3. link是控制dom元素，因此能够通过js来修改样式，而import则是不能够进行修改样式

  4. link会同时加载html与css ，而import先加载html后加载css

父级元素没有设置高度，造成父级元素高度塌陷问题？

  1. 给父级元素设置一个高度

  2. 在子元素后面添加一个空div.清除子级元素浮动 clear：both

  3. 给子元素添加一个伪类 ：after{content:''}

  4. 使用BFC overflow:hidden

position的值分别是相对于哪个位置定位的？

position：static 静态 position: relative 相对定位 相对自己本身的位置 position: absolute 绝对定位 父级没有设置相对定位，则是针对与浏览器设置， 父级有设置相对定位，则是针对父级元素设置 position:fixed 固定定位 针对与浏览器 position:sticky 黏性定位的元素

图片下方有3px留白区域如何去掉？

  1. 改变元素类型 display:block
  2. 改变图片垂直方向上对齐方式,不再是基线对齐 baseline vertical-align只对行内与行内块元素有效

css3新增的属性有哪些？

  1. border-radius 圆角边框
  2. box-shadow css边框阴影
  3. border-image css边框图片
  4. background-size 背景尺寸
  5. text-shadow 文本阴影
  6. transform ：scale() 缩放 translate（）移动 rotate() 旋转 skew() 倾斜

css单位

  1. px 绝对单位
  2. em 相对单位 基准点为父节点字体的大小，如果自定义了font-size 按自身的来算，整个页面的em并不是一个固定的单位
  3. rem:相对单位，相对根节点html的font-size大小来计算
  4. vw: 视窗宽度，1vw等于视窗宽度的1%
  5. vh: 视窗高度，1vh等于视窗宽度的1%
  6. vmin:以宽和高之间最短的一段为基准 ，如果宽》高,那么1vmin 等于高的1%
  7. vmax:以宽和高之间最高的一段为基准 ，如果宽》高,那么1vmin 等于宽的1%
  8. %:百分比

什么是弹性布局？

解决某元素中“子元素”的布局方式，为布局提供最大的灵活性

设置为弹性盒后，元素的float clear 依旧vertical-align 属性失效

display:flex设置盒子为弹性盒，里面的子盒子的样式会变成行内块样式

  1. flex-direction:row 默认 row-reverse 行反转 column 列 column-reverse 列反转
  2. justify-content:flex-start 默认 flex-end 末端 center 居中对齐 space-between 两端对齐，中间自动分配 space-around 自动分配距离
  3. align-items:stretch 拉伸 flex-start flex-end center
  4. flex-wrap:nowrap 不换行 warp 换行
  5. align-content：flex-start flex-end center space-between space-around strech 给子元素设置，给子元素添加
  6. align-self:auto 默认值 stretch flex-end center flex-start
  7. order:排序优先级，数字越大越往后排，默认为0，支持负数
  8. flex-grow :0 默认为0， 占剩余空间，等于flex：1
  9. flex-shrink:1 默认值， 压缩 不压缩：0
  10. flex-basis 项目长度

flex 为 flex-grow flex-shrink flex-basis 的简写形式

常见的页面布局

  1. 静态布局
  2. 流式布局又称百分比布局，随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整
  3. 弹性布局 是css3引入强大的布局方式
  4. 响应式布局 采用自适应布局和流式布局的综合方式，利用媒体查询可以检测到屏幕的尺寸，并设置不同的css样式，就可以实现响应式的布局

css预处理器

sass，less，stylus

画三角形

div{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:5px solid red;
    }

js面试题

JavaScript有哪些数据类型，它们的区别?❤

分为基本数据类型与复杂数据类型 基本数据类型有：String number boolean undefined null

复杂数据类型有：Array Object 正则表达式 Function 等

基本数据类型的存储数据以及变量都在栈内存中完成的，而复杂数据类型在栈内存中存储地址以及变量，数据都是存储在堆内存中的

检测数据类型的方式有哪些？

  1. typeof 基本数据类型的检验
  2. instanceof 用来检测对象的类型
  3. constructor 用来判断数组类型
  4. Object.prototype.toString.call() 万能检测法
  5. isArray 用来检测数组

null与undefined 的区别？

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。

undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。

undefined 在 JavaScript 中不是一个保留字，这意味着可以使用 undefined 来作为一个变量名，但是这样的做法是非常危险的，它会影响对 undefined 值的判断。我们可以通过一些方法获得安全的 undefined 值，比如说 void 0。

当对这两种类型使用 typeof 进行判断时，Null 类型化会返回 “object”，这是一个历史遗留的问题。当使用双等号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false。

typeof NaN 的结果是什么？

结果是number NAN 不是一个数字，代表一个非数字的数值类型，一般是其他数据类型转换成数字类型的时候使用 isNAN 专门为检测NaN诞生的，返回值为布尔值

其他数据类型转数值的方法

  1. 采用Number进行转换 纯数字的字符串，使用Number可以转换成一个数值类型，不是纯数字转换，包含字母、特殊符号转换最终结果nan
  2. parseInt 从第一位开始匹配，如果是数字就保留，不是数字继续往后找，找到不是数字就停止，返回前面匹配的数字内容（无法识别小数点）
  3. parseFloat 能够识别小数点
avatar
文章
阅读
粉丝