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就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。