前端常见的面试题-附答案（HTML、CSS）

一、HTML

1.H5新特性

1.语义化更好的标签： （header，nav，gooter，aside，article，section）
2.画布 Canvas
3.本地存储。 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除
4.表单控件 （calendar date time email url search tel file number）
5.音频、视频API （audio,video）
如果浏览器不支持音频、视频不自动播放？ 禁音播放

二、CSS

1.CSS3新特性

1、弹性布局 ： flex
2、文字阴影（text-shadow）
3、边框： 圆角（border-radius）边框阴影： box-shadow
4、盒模型（怪异盒）:box-sizing:bordder-box
5、过渡： transition
6、渐变： linear-gradient 、 radial-gradient
7、自定义动画 animate @keyfrom
8、2D、3D转换： transform" tramslate(x,y,z) rotate(x,y,z) skew(x,y,z) scale(x,y,z)
9、媒体查询
@media screen and (min-width: 375px) and (max-width: 960px) {}

2.CSS 优先级

!importent > 行内 > id > 类 >标签 | 伪类 | 属性选择 > 伪元素选择器 > 继承 > 通配符

3.CSS中哪些属性可继承

文本系列：text-indent，text-align，line-height，word-spaceing，letter-spacing，text-transform，direction，color；
列表相关：list-style，list-style-image，list-style-position，list-style-type，list-style-color；
字体系列：font-family，font-size，font-style，font-weight，font-stretch，font-size-adjust；
光标属性：cursor；
以 text list font 开头cursor 的属性都可以被继承

4.display:none和visibility:hidden的区别

同：
都是可以使元素不可见
异：
display:none;元素不可见，并且在页面中不占有位置，宽高等属性“消失”
visibility:hidden;元素不可见，但是在页面中还占有位置，宽高等属性依然存在

5.让img图片和文字垂直居中

给img标签添加 vertical-align: middle;

6.画一条0.5px的线

height: 1px; transform: scaleY(0.5);
高1px、 c3缩放0.5

7.rgba和opticy的区别

同：
都可以设置元素的透明度

异：
opacity 是属性，rgba()是函数，计算之后是个属性值；
opacity 作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；
rgba() 一般作为背景色 （background-color） 或者颜色（ color ） 的属性值，透明度由其中的 alpha 值生效，取值0-1；

8.清除浮动

1.父级设置高度
2.父级设置overflow:hidden;
3.父级末尾添加一个空盒子，设置clear:both;

9.CSS的盒模型

怪异盒子模型
box-sizing: border-box; 内容content+填充padding+边框border

标准（传统）盒模型
box-sizing:content-box；内容content+填充padding+边框border+边界margin

10.纯CSS创建一个三角形

宽高为 0 、利用边框大小 和透明色 transparent 制作

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

11.em,rem,px的区别

同：
都是像素单位

异：
px 是像素值，是一个固定的长度，绝对单位。
em 的值并不是固定，继承父级元素的字体大小，相对单位。

rem 相对的只是HTML根元素，相对单位。

12.link和@important的区别

同：
都可以加载CSS代码

异：
1、本质的差别：
link属于HTML标签，除了加载CSS外，还可以定义RSS等其他事务；
而@import只能加载CSS

2、加载顺序的差别：
当一个页面被加载时（或者被浏览者浏览时），link引用的CSS会同时被加载；
而@import引用的CSS会等到页面全部被下载完再被加载。
Tips： 所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会很明显。

3、兼容性的差别：
link是XHTML标签，无兼容问题；
@import是在CSS2.1提出的，低版本的浏览器不支持，只有在IE5以上的才能识别

4、使用dom：
link支持使用Javascript控制DOM去改变样式；
而@import不支持。
当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

13.如何使一个盒子水平居中、垂直居中、水平垂直居中

1、水平居中

行内元素
方案一 ：
首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;
如果不是，则先将其父元素设置为块级元素 display: block;，再给父元素设置 text-align: center;

块级元素
方案一 ：
display: block;定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）
不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为 display: inline-block; 或 display: inline; 即将其转换成行内块级/行内元素，给父元素设置 text-align: center;
方案二：使用定位属性
第一：设置父元素为相对定位 position: relative; ，再设置子元素为绝对定位 position: absolute;
第二：设置子元素的left:50%，即让子元素的左上角 水平居中；
第三：若 已知子元素宽度
设置绝对子元素的 margin-left: -子元素宽度的一半px; 或者设置 transform: translateX(-50%);
若 未知子元素宽度
css3新增属性 transform: translateX(-50%);

方案三 ：使用flex布局实现（宽度定不定都可以）
使用flex布局，只需要给需要处理的块状元素的父元素添加属性 display: flex; justify-content: center;

2、垂直居中

方案一： margin
margin:auto ,0;

方案二：line-height
只需要设置 行高等于盒子的高 line-height: 盒子的高 px; 即可；

方案三： table-cell 适用于块级元素
display: table-cell; vertical-align: middle;

方案四： flex布局
display: flex; align-items: center;

3、水平垂直居中

方案一：margin
最好使的是： margin: auto;
不好使的原因：
1、元素没有设置宽度，没有宽度怎么居中嘛！
2、设置了宽度依然不好使，你设置的是行内元素吧，转化为块元素或者行内块元素

方案二：元素已知宽度 position
父元素设置为： position: relative;
子元素设置为： position: absolute;
距上50%，据左50%， left: 50%; top: 50%;
然后减去元素自身宽度的距离就可以实现 margin: tramslate(x,y)

方案三：元素未知宽度 position transform
只需将方案二最后一步 margin: tramslate(x,y) 替换为 transform: translate(-50%,-50%);

方案四：flex布局
display: flex; //flex布局
justify-content: center; //使子项目水平居中
align-items: center; //使子项目垂直居中