连这些都不知道，怎么去阿里！

时间 2019-11-29

原文原文链接

本次收录了一些面试中常常会遇到的经典面试题以及本身面试过程当中遇到的一些问题，而且都给出了我在网上收集的答案。立刻就要过春节了，开年就是崭新的一年，相信不少的前端开发者会有一些跳槽的悸动，经过对本篇知识的整理以及经验的总结，但愿能帮到更多的前端面试者。（若有错误或更好的答案，欢迎指正，水平有限，望各位不吝指教。:）javascript

CSS权重css

CSS权重指的是样式的优先级，有两条或多条样式做用于一个元素，权重高的那条样式对元素起做用,权重相同的，后写的样式会覆盖前面写的样式。html

权重的等级前端

能够把样式的应用方式分为几个等级，按照等级来计算权重
一、!important，加在样式属性值后，权重值为 10000
二、内联样式，如：style=””，权重值为1000
三、ID选择器，如：#content，权重值为100
四、类，伪类和属性选择器，如： content、:hover 权重值为10
五、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
六、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
复制代码

权重的计算实例vue

一、实例一：html5

<style type="text/css">
 div{
 color:red !important;
 } 
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时做用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
因此文字的最终颜色为red 
-->
复制代码

二、实例二：java

<style type="text/css">
 #content div.main_content h2{
 color:red; 
 }
 #content .main_content h2{
 color:blue;
 }
</style>
......
<div id="content">
 <div class="main_content">
 <h2>这是一个h2标题</h2>
 </div>
</div>
<!-- 
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->
复制代码

CSS3新增选择器node

一、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素webpack

<style type="text/css"> 
 .list div:nth-child(2){
 }
</style>
......
<div class="list">
 <h2>1</h2>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
</div>
<!-- 第2个子元素div匹配 -->
复制代码

二、E:first-child：匹配元素类型为E且是父元素的第一个子元素git

三、E:last-child：匹配元素类型为E且是父元素的最后一个子元素

四、E > F E元素下面第一层子集

五、E ~ F E元素后面的兄弟元素

六、E + F 紧挨着的后面的兄弟元素

本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。对web开发技术感兴趣的同窗，欢迎加入Q群：864305860，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

属性选择器：

一、E[attr] 含有attr属性的元素

<style type="text/css">
 div[data-attr='ok']{
 color:red;
 }
</style>
......
<div data-attr="ok">这是一个div元素</div>
复制代码

二、E[attr=’ok’] 含有attr属性的元素且它的值为“ok”

三、E[attr^=’ok’] 含有attr属性的元素且它的值的开头含有“ok”

四、E[attr$=’ok’] 含有attr属性的元素且它的值的结尾含有“ok”

五、E[attr*=’ok’] 含有attr属性的元素且它的值中含有“ok”

CSS3圆角、rgba

CSS3圆角

设置某一个角的圆角，好比设置左上角的圆角：

border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：

border-radius:50%;

rgba（新的颜色值表示法）

一、盒子透明度表示法：

.box
 {
 opacity:0.1;
 /* 兼容IE */
 filter:alpha(opacity=10); 
 }
复制代码

二、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

CSS3 transition动画

一、transition-property 设置过渡的属性，好比：width height background-color
二、transition-duration 设置过渡的时间，好比：1s 500ms
三、transition-timing-function 设置过渡的运动方式，经常使用有 linear(匀速)|ease(缓冲运动)
四、transition-delay 设置动画的延迟
五、transition: property duration timing-function delay 同时设置四个属性
复制代码

CSS3 transform变换

一、translate(x,y) 设置盒子位移
二、scale(x,y) 设置盒子缩放
三、rotate(deg) 设置盒子旋转
四、skew(x-angle,y-angle) 设置盒子斜切
五、perspective 设置透视距离
六、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
七、translateX、translateY、translateZ 设置三维移动
八、rotateX、rotateY、rotateZ 设置三维旋转
九、scaleX、scaleY、scaleZ 设置三维缩放
十、tranform-origin 设置变形的中心点
十一、backface-visibility 设置盒子背面是否可见
复制代码

举例：（翻面效果）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>翻面</title>
 <style type="text/css">
 .box{
 width:300px;
 height:272px;
 margin:50px auto 0;
 transform-style:preserve-3d;
 position:relative; 
 }
 .box .pic{
 width:300px;
 height:272px;
 position:absolute;
 background-color:cyan;
 left:0;
 top:0;
 transform:perspective(800px) rotateY(0deg);
 backface-visibility:hidden;
 transition:all 500ms ease;
 }
 .box .back_info{
 width:300px;
 height:272px;
 text-align:center;
 line-height:272px;
 background-color:gold;
 position:absolute;
 left:0;
 top:0;
 transform:rotateY(180deg);
 backface-visibility:hidden;
 transition:all 500ms ease; 
 }
 .box:hover .pic{
 transform:perspective(800px) rotateY(180deg);
 }
 .box:hover .back_info{
 transform:perspective(800px) rotateY(0deg);
 }
 </style>
</head>
<body>
 <div class="box"> 
 <div class="pic"><img src="images/location_bg.jpg"></div>
 <div class="back_info">背面文字说明</div>
 </div>
</body>
</html>
复制代码

CSS3 animation动画

一、@keyframes 定义关键帧动画
二、animation-name 动画名称
三、animation-duration 动画时间
四、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
五、animation-delay 动画延迟
六、animation-iteration-count 动画播放次数 n|infinite
七、animation-direction 动画结束后是否反向还原 normal|alternate
八、animation-play-state 动画状态 paused(中止)|running(运动)
九、animation-fill-mode 动画先后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(先后都应用)
十、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
复制代码

理解练习：

一、人物走路动画

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>走路动画</title>
 <style type="text/css"> 
 .box{
 width:120px;
 height:180px;
 border:1px solid #ccc; 
 margin:50px auto 0;
 position:relative;
 overflow:hidden; 
 }
 .box img{
 display:block;
 width:960px;
 height:182px;
 position: absolute;
 left:0;
 top:0;
 animation:walking 1.0s steps(8) infinite; 
 }
 @keyframes walking{
 from{
 left:0px;
 }
 to{
 left:-960px;
 }
 }
 </style>
</head>
<body>
 <div class="box"><img src="images/walking.png"></div>
</body>
</html>
复制代码

CSS3 浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容，须要将某些样式加上浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
div
{ 
 -ms-transform: rotate(30deg); 
 -webkit-transform: rotate(30deg); 
 -o-transform: rotate(30deg); 
 -moz-transform: rotate(30deg); 
 transform: rotate(30deg);
}
复制代码

自动添加浏览器前缀

目前的情况是，有些CSS3属性须要加前缀，有些不须要加，有些只须要加一部分，这些加前缀的工做能够交给插件来完成，好比安装： autoprefixer

能够在Sublime text中经过package control 安装 autoprefixer

Autoprefixer在Sublime text中的设置：

一、preferences/key Bindings-User

{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }
复制代码

二、Preferences>package setting>AutoPrefixer>Setting-User

{
 "browsers": ["last 7 versions"],
 "cascade": true,
 "remove": true
}
复制代码

last 7 versions：最新的浏览器的7个版本

cascade：缩进美化属性值

remove：是否去掉没必要要的前缀

HTML5新增标签

新增语义标签

一、<header> 页面头部、页眉
二、<nav> 页面导航
三、<article> 一篇文章
四、<section> 文章中的章节
五、<aside> 侧边栏
六、<footer> 页面底部、页脚
复制代码

音频视频

一、<audio>
二、<video>
复制代码

PC端兼容h5的新标签的方法，在页面中引入如下js文件:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
复制代码

HTML5 新增表单控件

新增类型：网址邮箱日期时间星期数量范围电话颜色搜索

<label>网址:</label><input type="url" name="" required><br><br> 
<label>邮箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>时间:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br> 
<label>电话:</label><input type="tel" name=""><br><br> 
<label>颜色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>
新增经常使用表单控件属性：
一、placeholder 设置文本框默认提示文字
二、autofocus 自动得到焦点
三、autocomplete 联想关键词
复制代码

移动端与PC端页面布局区别

视口

视口是移动设备上用来显示网页的区域，通常会比移动设备可视区域大，宽度多是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了不这种状况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，能够用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区同样的大小。

设置方法以下( 快捷方式：meta:vp + tab )：

<head>
......
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
......
</head>
复制代码

视网膜屏幕（retina屏幕）清晰度解决方案

视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素能够理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比通常屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是通常屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是通常屏幕的1/9。

图像在视网膜屏幕上显示的大小和在通常屏幕上显示的大小同样，可是因为视网膜屏幕的物理像素点比通常的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可使用比原来大一倍的图像，而后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就能够解决模糊的问题。

背景图强制改变大小，可使用background新属性

background新属性

background-size:
 length：用长度值指定背景图像大小。不容许负值。
 percentage：用百分比指定背景图像大小。不容许负值。
 auto：背景图像的真实大小。
 cover：将背景图像等比缩放到彻底覆盖容器，背景图像有可能超出容器。
 contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
复制代码

适配布局类型

PC及移动端页面适配方法

设备屏幕有多种不一样的分辨率，页面适配方案有以下几种：
一、全适配：响应式布局+流体布局
二、移动端适配：
 流体布局+少许响应式
 基于rem的布局
复制代码

流体布局

流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线没法用百分比，可使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

calc()

能够经过计算的方式给元素加尺寸，好比： width：calc(25% - 4px);
复制代码

box-sizing

一、content-box 默认的盒子尺寸计算方式
二、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
复制代码

响应式布局

响应式布局就是使用媒体查询的方式，经过查询浏览器宽度，不一样的宽度应用不一样的样式块，每一个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面能够适配多种终端屏幕（pc、平板、手机）。

@media (max-width:960px){
 .left_con{width:58%;}
 .right_con{width:38%;}
}
@media (max-width:768px){
 .left_con{width:100%;}
 .right_con{width:100%;}
}
复制代码

基于rem的布局

首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其余的元素相关尺寸设置用rem，这样，全部元素都有了统一的参照标准，改变html文字的大小，就会改变全部元素用rem设置的尺寸大小。

cssrem安装

cssrem插件能够动态地将px尺寸换算成rem尺寸

下载本项目，好比：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。

配置参数 参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例，默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。复制代码