Web前端常用面试总结
Web前端常用面试总结
CSS部分
一、IE盒子模型 and W3C(标准)盒子模型的区别
1、IE盒子模型
包含元素：内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
如图：
2、W3C(标准)盒子模型
包含元素：内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
如图：
相同点：
1、都是由内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素组成；
不同点：
1、IE盒子模型
width、height 由 内容（content）、内边距（padding）、边框（border）组成；
2、W3C盒子模型
width、height 由 内容（content）组成；
二、CSS3 box-sizing 属性有哪几个值分别代表什么意思
box-sizing 属性的值由 content-box、border-box、inherit 3个值组成。
1、content-box：
这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外。
2、border-box：
指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3、inherit：
指定 box-sizing 属性的值，应该从父元素继承。
三、position 属性有哪几个值分别代表什么意思
position 属性的值由 absolute、fixed、relative、static、sticky、inherit 6个值组成。
1、absolute：
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2、fixed：
生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3、relative：
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素(px)。注意：不脱离文档流。
4、static：
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5、sticky：
粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。
6、inherit：
规定应该从父元素继承 position 属性的值。
四、如何让一个DIV垂直水平居中
网上关于这个问题的方法有很多，在这我只列举常用的3种作为示例。
1、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#box {
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0px 0px -100px;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
2、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
3、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html,
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#box {
width: 200px;
height: 200px;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
五、px、em、rem的区别
1、px
1、em
1、rem
一、数组去重
1、ES5去重方法
javascript 代码
var arr=[1,2,2,3,3,4,4,4,-1,-1,-2,-2,-2,-2];
var result=[];//输出数组
for(var i=0; i < arr.length; i++){
//如果在结果数组result中没有找到arr[i],则把arr[i]压入结果数组result中
if(result.indexOf(arr[i]) == -1){
result.push(arr[i]);
}
}
alert(result);
2、ES6去重方法
javascript 代码
const arr=[1,1,1,2,2,2,3,3,3,-1,-1,-1,-2,-2];
function removal(arr){
//Array.from()作用是将类似于数组Set(arr)转换为一个新的数组，new Set(arr)方法是直接去重
return Array.from(new Set(arr));
}
alert(removal(arr));
二、请实现一段字符串反转
let str='welcome to my home';
console.log(str.split('').reverse().join(''));
三、GET、POST的区别
1、GET：
GET一般用于获取/查询资源信息，且可缓存，相对不安全。
2、POST：
POST一般用于更新资源信息，不可缓存，相对安全。