前端面试常见问题

HTML
1、meta元素可以定义文档的哪些元数据？
meta元素可定义的元数据可简要概括为四类
（1）定义文档的字符编码

定义文档的字符编码
<meta chaset="utf-8">

（2）完善文档描述信息，让搜索引擎更容易解析索引
使用name和http-equiv完善信息

（3）适配移动设备，使页面在各种尺寸的屏幕显示正确
使用name的viewport属性

关键字	描述	值
width	视口宽度	device-width或具体值｜
initial-width	初始宽度	0-10
maximum-scale	视口缩放的最大值	0-10
minimun-scale	视口缩放的最小值	0-10
user-scaleble	是否手动缩放	yes/no

（4）指定首选样式表，执行重定向或重载

设置默认样式表
<meta http-equiv="default-style" content="main"> 

重载或重定向
<meta http-equiv="refresh" content="2" />
<meta http-equiv="refresh" content="2;url='http://www.baidu.com'" />

2、请列举表格布局的弊端
（1）可访问性差，布局中按照从上到下或从左到右读取的数据不一定有意义，影响用户浏览
（2）难以实现响应式，不能使用css简单维护
（3）可维护性差，使用大量元素属性，代码难以阅读
（4）不够语义化，单元格html标签没有明确含义
（5）加载时间长，表格嵌套会增加渲染时间

3、除了video和audio，HTML5还支持哪些多媒体元素
（1）embed:嵌入外部资源，如svg,应用程序
（2）track:audio和video的子元素，添加辅助文本信息，如字幕

4、canvas元素用属性和用css设置宽高有什么区别
canvas元素可以简单理解为两部分，容器和画布，css控制的是容器的宽高，canvas控制的是画布的宽高

5、 css预处理器有什么优缺点？
优点：
（1）用变量存储多次引用的信息，方便修改
（2）内置丰富的函数，也可自定义函数，适应特定需求
（3）选择器可嵌套，选择器之间关系更明显，增强文件可读性
（4）导入文件让代码保持独立，实现模块化管理
缺点：
（1）降低对css文件的控制，容易出现冗余
（2）调试难度增加
（3）带来一定学习成本

6、什么是外边距塌陷
外边距塌陷也称为外边距合并，指两个在正常流中相邻的元素（父子元素、兄弟元素）的块级元素的外边距，组合成单个边距，只有上下边距会塌陷，有以下4种情况：

（1）父元素没有上边框上内边距,定义上外边距，第一个子元素没有内容，同时定义上外边距

<div style="margin-top: 20px; " >
<div style="margin-top:10px" ></div>
</div>

(2)父元素没有下边框，下内边距，定义下外边距，子元素没有内容，同时定义了下外 边距

<div style="margin-bottom: 20px; " >
<div style="margin-bottom:10px" ></div>
</div>

(3)两个兄弟元素，同时定义了下外边距和上外边距

<div style="margin-top: 20px" ></div>
<div style="margin-bottom: 20px" ></div>

(4)一个空元素没有上下边框和上下内边框，只定义上下外边框

<div style="margin-top: 10px; margin-bottom: 10px"></div>

7、display:none;与visibility:hidden都可隐藏元素，两者有何区别？
display：none相当于元素没有后代元素，在正常流中不占用空间，元素真实尺寸会丢失，还会导致浏览器的重排和重绘，visibility：hidden在正常流中会占用空间，具有真实尺寸，只会导致浏览器重绘

8、BFC（块格式化上下文）的规则？
（1）BFC内部元素不会受到外部元素的影响
（2）一个元素只能存在于一个BFC内
（3）BFC内部按正常流排列，元素之间间隔由margin控制
（4）BFC不会与外部浮动元素重叠
（5）计算BFC的高度，需要包括BFC的浮动子元素的高度

9、如何创建BFC
满足下列其中一个条件
（1）根元素即html元素
（2）float属性不为none的浮动元素
（3）display属性为inline-block/table-cell/table-caption/flex/inline-flex
（4）position属性为absolute/fixed的定位元素
（5）overflow属性不为visible的块级元素

10、BFC的作用
（1）清除浮动
（2）解决外边距塌陷
（3）宽度自适应的两栏布局

11、css选择器有哪些？
（1）基本选择器：
通配选择器：* {}
元素选择器：以元素名选择元素，span{}
类选择器： 以类名选择元素：.input {}
id选择器：以ID选择元素：#ID{}
属性选择器：以属性选择元素，可单独使用也可以组合使用，组合使用只能和元素选择器组合

条件	匹配说明
[attr^=‘val’]	属性值以字符串‘val’开头
[attr-=‘val’]	属性值分割成几个字符串，其中一个为字符串‘val’
[attr$=‘val’]	属性值以字符串‘val’结尾
[attr*=‘val’]	属性值包含字符串‘val’开头
[attr|=‘val’]	属性值为‘val’或以‘val-’开头

（2）关系选择器

条件	说明
后代选择器	以空格分隔
子选择器	只选择直接子级元素，以>分隔
相邻选择器	选择当前元素相邻一个元素，以+分隔
兄弟选择器	选择当前元素同级所有元素，以～分隔

（3）伪选择器
伪类选择器
对链接元素而言有

选择器	说明
:link	未访问
:visited	已访问
:active	激活
:hover	悬停

对元素位置而言有

选择器	说明
:first-child :first-of-type	第一个子元素或与父元素同类型
:last-child :last-of-type	最后一个子元素或与父元素同类型
:nth0child :nth-of-type	第n个子元素或与父元素同类型

伪元素选择器

选择器	说明
::first-letter	首字母
::first-line	首行
::placeholder	占位符
::selection	选中内容
::before	元素前插入内容
::after	元素后插入内容

12、链接的状态样式定义顺序是怎样的？
使用LVHA, (:link)(:visited)(:hover)(:active)

13、相对长度单位

长度	说明
px	像素
em	元素字体大小
ex	元素字体大小的一半,2ex=1em
rem	根元素字体的大小
%	元素百分比
ch	数字0的宽度
vw/vh	视口的宽度和高度
vmax/vmin	视口的1%最大最小的一个

14、定位类型有哪几种？

定位	说明
static	默认值，不能使用偏移属性
relative	包含块为离元素最近的块级/单元格/行内块祖先元素，不脱离文档流，不改变盒模型
fixed	包含块为视口
absolute	包含块为离元素最近的position不为static的祖先元素，脱离文档流，元素改为块级元素

给fixed或absolute的元素设置浮动时不会生效

15、绝对定位和浮动有哪些区别？

不同点	绝对定位	浮动
包含块	离元素最近的position不为static的元素的内容区域	离元素最近的块级祖先元素的内容区域
兄弟元素的影响	原先占用的空间被删除，不影响兄弟元素	影响兄弟元素的位置和样式
摆放位置	摆放任意位置	不能超出包含块内容区域
z-index	设置任意值	无法设置z-index

16、background：transparent:与opacity:0有什么区别？
前者相当于rgba(0,0,0,0),只把背景颜色改成透明，文字还能展示，后者把文字和背景作为一个整体，文字和背景都会透明

17、怎样使用css做出三角形？
利用边框透明

    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left-color: gray;

18、如何使用css实现超出文本替换为省略号？
1.设置一定宽度 2.强制一行展示 3.超出部分隐藏 4.溢出内容替换为省略号

    width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;