前端面试题总结
JavaScript面试题总结
CSS面试题总结
VUE面试题总结
img中alt和title的区别
图片中的 alt属性是在图片不能正常显示时出现的文本提示。alt有利于SEO优化
图片中的 title属性是在鼠标在移动到元素上的文本提示。
如何理解CSS的盒子模型
盒子模型由Margin(外边距) +Border(边框)+Padding(内边距)+Content(内容)
标准盒模型：属性width,height只包含内容content，不包含border和padding。
IE 盒模型：属性width,height包含border和padding，指的是content+padding+border。
在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。
用纯CSS创建一个三角形
<style>
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 50px solid #000000;
}
</style>
</head>
<body>
<div></div>
</body>
如何让一个div水平居中
已知宽度，block元素 ，添加添加margin:0 auto属性。
已知宽度，绝对定位的居中 ，上下左右都为0，margin:auto
如何让一个div水平垂直居中
不够全面，欢迎补充
<div class="parent">
<div class="child"></div>
</div>
<style>
/* 第一种 */
div.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* 第二种 */
div.parent {
position: relative;
}
div.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 或者 */
div.child {
width: 50px;
height: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -10px;
}
/* 或 */
div.child {
width: 50px;
height: 10px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* 第三种 */
div.parent {
display: grid;
}
div.child {
justify-self: center;
align-self: center;
}
/* 第四种 */
div.parent{
display:flex;
}
div.child{
margin:auto;
}
</style>
如何清除浮动？
万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
CSS中 link 和@import 的区别是？
link属于HTML标签，而@import是CSS提供的，页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
import只在IE5以上才能识别，而link是HTML标签，无兼容问题
link方式的样式的权重 高于@import的权重.
CSS优先级
不同级别：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一级别：后写的会覆盖先写的
ID选择器, 权重:100;class,属性选择器和伪类选择器，权重:10;标签选择器和伪元素选择器，权重:1;
BFC（块级格式化上下文，用于清除浮动，防止margin重叠等）
块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
BFC区域不会与float box重叠
BFC是页面上的一个独立容器，子元素不会影响到外面
计算BFC的高度时，浮动元素也会参与计算
哪些元素会生成BFC：
根元素
float不为none的元素
position为fixed和absolute的元素
display为inline-block、table-cell、table-caption，flex，inline-flex的元素
overflow不为visible的元素
了解重绘和重排吗，知道怎么去减少重绘和重排吗
DOM的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重排，浏览器将受到影响的部分重新绘制在
屏幕上的过程称为重绘。
引起重排重绘的原因有：
- 添加或者删除可见的DOM元素，
- 元素尺寸位置的改变
- 浏览器页面初始化，
浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，
减少重绘重排的方法有：
- 不在布局信息改变时做DOM查询，
- 使用csstext,className一次性改变属性
- 使用fragment
- 对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素
使元素消失的方法有哪些？
- opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
- visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
- display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。
