前端面试总结

最新推荐文章于 2024-05-05 03:00:15 发布

Andrew_SJ

最新推荐文章于 2024-05-05 03:00:15 发布

阅读量102

点赞数

分类专栏：前端文章标签： css html javascript

本文链接：https://blog.csdn.net/Andrew_SJ/article/details/119979974

版权

前端专栏收录该内容

97 篇文章 3 订阅

订阅专栏

CSS

1 居中
css：盒子垂直水平居中的几种方法
已知宽高：
父，子盒子固定宽高，子绝父相，子盒子left50%，top50%，margin-left, margin-right子盒子宽高。
父，子盒子固定宽高，子绝父相，子盒子left50%，top50%，transform: translate(-50%, -50%)。
父，子盒子固定宽高，子绝父相，子盒子left, right, top, bottom全0，margin: auto。
未知宽高：
父盒子设置flex，justify-content: center, align-items: center. 子盒子固定宽高。
2 BFC
什么是BFC？看这一篇就够了
创建BFC条件(满足一个):
float的值不为none；
overflow的值不为visible；
position的值为fixed / absolute；
display的值为table-cell / table-caption / inline-block / flex / inline-flex。
3 盒模型哪两种模式？
前端面试之盒子模型（标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
4 清除浮动
当父元素不给高度的时候，内部元素不浮动时会撑开, 而浮动的时候，父元素变成一条线, 造成塌陷.

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
父元素添加overflow:hidden;(触发BFC)
使用after伪元素清除浮动（推荐使用）
使用before和after双伪元素清除浮动
CSS-清除浮动

5 纯css实现三角形

<html><body><div class="triangle"></div></body></html>
.triangle {
    width: 0;
    height: 0;
    border-top: 20px solid black;
    border-right: 20px solid black;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    transform: rotate(135deg);
  }

在这里插入图片描述
6. rem实现自适应布局
em（font size of the element）是指相对于父元素的字体大小的单位。rem（font size of the root element）是指相对于根元素的字体大小的单位
7. 关于vh/vw
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
8. flex布局

容器属性：
flex-direction控制主副轴
flex-wrap控制换行(默认不换行)
flex-flow是上两个的结合
justify-content主轴对齐方式 start/end/center/space-between/space-around
align-items交叉轴对齐方式同上
项目属性：
flex-grow控制放大比例（有多余空间时）默认0不放大。
flex-shrink控制缩小比例（空间不足时）默认1缩小。
flex-basis定义项目占据的空间（分配多余空间前）默认auto。
flex是上面三项的合并写法。flex: 1表示flex: 1 1 0%.

9 css优先级
选择器的特殊性值表述为4个部分，用0,0,0,0表示。

通配选择器*对特殊性没有贡献，即0,0,0,0。
元素和伪元素，加0,0,0,1。
类选择器、属性选择器或伪类，加0,0,1,0。
ID选择器的特殊性值，加0,1,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

JS

1 ES5和ES6继承方式
ES5以构造函数定义类，以prototype实现继承。
ES6以class形式定义类，以extend形式继承。

// ES5继承 构造函数+原型对象模拟继承，即组合继承

function Star(uname, age) {
  // this 指向父构造函数的对象实例
  this.uname = uname;
  this.age = age;
}
Star.prototype.show = function () {
  console.log('我会演出');
}

function Dancer(uname, age, title) {
  // this 指向子构造函数的对象实例
  Star.call(this, uname, age);
  this.title = title;
}

Dancer.prototype = new Star();
// 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
Dancer.prototype.constructor = Star;
// 这个是子构造函数专门的方法
Dancer.prototype.dance = function () {
  console.log('我还会跳舞');
}

var lyf = new Dancer('刘亦菲', 18, '小龙女饰演者');
lyf.show();
lyf.dance();

// ES6继承 class+extends继承

class Star {
  // 构造函数，里面写上对象的属性
  constructor(props) {
    this.uname = props.uname;
    this.age = props.age;
  }
  //方法写在后面
  show() { //父类共有的方法
    console.log('我会演出');
  }
}

class Dancer extends Star {
  constructor(props, myAttribute) { //props是继承过来的属性，myAttribute是自己的属性
    super(props); //调用实现父类的构造函数
    this.type = props.type; // 父类的属性，也可写在父类中
    this.title = myAttribute; //自己的私有属性
  }
  dance() { // 自己私有的方法
    console.log('我还会跳舞');
  }
}

// new实例化
var lyf = new Dancer({
  uname: '刘亦菲',
  age: '18',
  type: '舞者'
}, '小龙女饰演者');

lyf.show();
lyf.dance();

2 构造函数原型prototype，对象原型和原型链
构造函数是特殊函数，用来初始化对象，即为对象成员赋初值。它总与new一起使用。对象中的一些共有属性和方法封装到构造函数内。
构造函数每次实例化都会开辟一片空间存放对象的方法，因此存在浪费内存问题。
构造函数原型：

构造函数通过原型分配的函数是所有对象所共享的。JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

Andrew_SJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试总结

CSS居中css：盒子垂直水平居中的几种方法已知宽高：父，子盒子固定宽高，子绝父相，子盒子left50%，top50%，margin-left, margin-right子盒子宽高。父，子盒子固定宽高，子绝父相，子盒子left50%，top50%，transform: translate(-50%, -50%)。父，子盒子固定宽高，子绝父相，子盒子left, right, top, bottom全0，margin: auto。未知宽高：父盒子设置flex，justify-content:
复制链接

扫一扫

专栏目录