2019前端面试集合

最新推荐文章于 2024-09-02 09:15:00 发布

BadGuy..

最新推荐文章于 2024-09-02 09:15:00 发布

阅读量199

点赞数

分类专栏：前端文章标签：前端面试大全面试题前端基础知识

本文链接：https://blog.csdn.net/qq_41595212/article/details/101709685

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

2019前端面试集合

css
js
vue
react
node
es6
webpack
网络
git

css

1、介绍一下标准css的盒子模型？与低版本IE盒子模型有什么不同的？

标准盒子模型：
宽度 = 内容宽度(content) + 边框(border) + 内边距(padding) + 外边距(marigin)
低版本IE盒子模型：
宽度 = 内容宽度(content+border_padding) + 外边距(margin)

2、css选择器有哪些？哪些属性可以继承？

css选择符：
id选择器(#)
类选择器(.)
标签选择器(,)
相邻选择器(+)
子选择器(>)
后代选择器(空格)
通配符选择器(*)
属性选择器([])
伪类选择器(?
可继承属性：font-size, font-family, color
不可继承属性：border, padding, margin, width, height

3、css优先级算法怎么计算？

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000
!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

4、display都有哪些值及作用？

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

5、position

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

6、你了解哪种布局模式呢？flexBox？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

7、用纯css写一个三角形

    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #ff0000;

8、设置元素浮动后，该元素的display值是多少？

display:block

9、移动端布局过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css样式/}

10、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

    <meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

11、如何使页面的内容框居中？

position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

12、如何让一个元素在其父元素水平垂直都居中

水平居中：
margin:0 auto;
前提：被包裹的元素不能有浮动的属性。否则这个属性就会失效。
text-align: center;
前提：在没有浮动的情况下，将其转换为inline/inline-block，然后给父元素加上text-align：cener
水平垂直居中
定位
子元素相对父元素绝对定位，并margin减去自己高的一半
前提：必须知道自己的宽高
定位
子元素相对父元素绝对定位，并margin值auto
前提：该方式不受狂傲限制

display： table-cell
该方法将元素换成表格样式，再利用表格样式来进行居中
```
.box {
    display: table-cell;
    vertical-align: middle;
}
.item {
    margin: 0 auto;
}
```
绝对定位和transform
该方法用最能装逼，用到了css3变形，面试者看到你代码里面有这样的，你的逼格瞬间就上去了，当然了你知道的，逼格的东西是有兼容性问题的
```
.box {
    position: relative;
}
.item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
```
css3中的flex属性
```
.box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.item {
}
```

13、如何使用两列的布局

```
https://www.cnblogs.com/LingXiangLi/p/10252873.html
```

* 两个盒子都设置float-left/right 值相同
* 计算好宽度 三个盒子宽度之和大于父级元素宽度 两个div宽度小于div宽度
* 浮动
float:left;float:right

14、如何做自适应的css布局，如何针对电脑手机做不同的尺寸调节

媒体查询

15、简单写出query的ajax的请求，参数以及返回值

$.ajax({
    url: '', // 请求路径
    type: 'GET', // 请求方式
    dataType: 'json',
    data: {}, &code = 456
    success: function() {

    }
})

16、列举清除浮动的方法

浮动： 是元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停下。
高度塌陷： 浮动元素父元素高度自适应（父元素不写高的时候，子元素浮动，父元素会发生高度塌陷）
方法一：添加新元素、应用clear：both
在浮动的盒子下放一个标签，这个标签中使用clear：both，来清除浮动对页面的影响。
注意：一般情况下不会使用这种方式，因为这种清除浮动的方式会增加页面的标签，造成结构的混乱。
.clear{cleat:both}
方法二：父级div定义overflow: auto
使用overflow属性来清除有一点需要注意，overflow属性共有三个属性：hidden，auto，visible。我们可以使用hidden和auto值来清除浮动，但切记不能使用visible值。
{overflow: auto; zoom:1} // zoom1处理兼容性问题
方法三： 使用伪元素来清除浮动 
.clearfix:after{
    content:"";/*设置内容为空*/
    height:0;/*高度为0*/
    line-height:0;/*行高为0*/
    display:block;/*将文本转为块级元素*/
    visibility:hidden;/*将元素隐藏*/
    clear:both;/*清除浮动*/
}
.clearfix{
    zoom:1;/*为了兼容IE*/
}
方法四： 使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.clearfix {
    zoom: 1;
}

### 隐藏内容的方法
```
1.常用的display:none方法

<p style="display:none;">文字看不见</p>

2.文本缩进负值方法

<p style="text-indent:-99999px;">文字看不见</p>

3.文字大小为0方法

<p style="font-size:0">文字看不见</p>

4.width和height为0+防止溢出方法

<p style="width:0;height:0;overflow:hidden;">文字看不见</p>

5.绝对定位负值方法

<p style="position: absolute;left:-6600px;top:-1000px;">文字看不见</p>

6.绝对定位+margin负值方法

<p style="position:absolute;margin-top:-9999px;margin-left:-9999px; ">文字看不见</p>
```

17、css优化

避免过度约束

避免后代选择符

避免链式选择符

使用紧凑的语法

避免不必要的命名空间

避免不必要的重复

最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

避免！important，可以选择其他选择器

尽可能的精简规则，你可以合并不同类里的重复规则

js

js页面跳转常用的几种方式

window.location.href = ‘’
window.history.back(-1)
window.navigate(’’)
self.location = ‘’
top.location = ‘’

事件委托

https://www.cnblogs.com/moqing/p/5590433.html

宏任务微任务

var x = 0;
var func = function() {
    var x = 1;
    return {
        x: -1,
        f: function() {
            ++x;
        },
        g: function() {                    
            console.log(x); // 2 3
        },
        g2: function() {
            // console.log(this,'sss')
            console.log(this.x); // -1
        }
    }
};
var z = func();
z.f();
z.g();
z.g2();
z.f.apply(this, []);
z.g.apply(this);