前端知识点-混合

问题：

轮播图原理？如何实现无缝滚动？
给定一个块盒，假设里面有5张图片，设定显示宽度为一张图片，其余隐藏，通过修改图片的margin-left的值，来实现图片轮播；无缝滚动时，将最后一张图片与第一张图片设置为一样的来实现；

说说事件委托？
js中的事件流:冒泡和捕获
冒泡: 当下级节点触发某个事件时，该事件会由下向上逐级触发上级节点的同类事件(由下而上)；
捕获: 当上级节点触发某个事件时，该事件会自上而下逐级出发下级节点的同类事件(自上而下)；
事件委托原理：基于js事件流产生的，利用事件冒泡，将事件加在父元素或者祖先元素上，触发该事件。
好处：减少页面绑定事件数目，提高页面性能；可以灵活处理子节点动态变化的场景，子节点变化时事件不用重新绑定。

CSS盒模型？
CSS核盒模型本质上是一个盒子，用于包裹HTML元素，盒子包含4个属性，由外到内分别为包括margin，border，padding，content。
margin：清除外边框的区域，外边距是透明的；
border：围绕在内边距和内容外的边框；
padding：清除内容周围的区域，内边距是透明的；
content：盒子的内容，显示文本和图像；
盒模型允许在其他元素和周围元素边框之间放置元素；
盒模型有2种，IE盒模型，标准盒模型；（宽度和高度的计算方式不同）
IE盒模型(怪异盒模型)：box-sizing: border-box:一个块的宽度为width+margin，其中包含了content，border，padding区域。
W3C盒模型(标准盒模型)：box-sizing: content-box:一个块的总宽度包含content, padding,margin,border区域。
在文档首部未定义DOCTYPE时，会触发怪异模式！！！

如何给行内元素添加宽度？
display：block/inline-block/flex/inline-flex;
position:absolute/fixed;
float:left/right;
其中position和float的原理是将行内元素修改为display:block;

说说inline-block的空白空隙产生原因，以及如何消除？
产生原因：元素作为行内元素排版时，元素之间的空白符(空格、回车、换行等)都会被浏览器处理，由white-space处理方式(默认normal，合并多余空白),会把html中的回车换行转换成一个空白符，所以元素之间就出现了空隙(这些元素之间的间距会随着字体的大小变化而变化)。
消除：将上一个元素的闭合标签与下一个元素的开始标签写在同一行；父元素font-size设置为0，子元素单独再设置字体大小；设置margin-right为负值；inline-block元素添加float或者flex;设置字符间距或单词间距(给父元素设置letter-spacing或者word-spacing的负值，子元素调整为0)；

说说BFC？
BFC（块级格式化上下文）：是一个独立的渲染区域，它规定了内部的块级盒子如何布局，同时与这个区域外部不相关。
BFC布局规则：
内部的盒子会在垂直方向，一个接一个放置；
盒子垂直方向的距离，由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠；
BFC的区域不会与float 元素重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
会触发BFC：
根元素或包含根元素的其他；
float属性不为none的其他；
overflow不为visible的其他；
position为absolute或fixed；
display为inline-block时；

CSS选择器有哪些，说说选择器的权重？
类型选择器(如-> h1标签选择器，如-> ::after伪元素选择器)
类选择器(如-> .test, 属性选择器如-> [type="radio"]，伪类如->:hover)
ID选择器(如-> #test)
通配符选择器(*)，关系选择器(+,>,~,'_',||),否定伪类选择器(:not()),这几种对优先级没有影响；
优先级*：
分配给指定CSS声明的一个权重，由匹配的选择器的每一种选择器类型数值来决定。当同一个元素有多个声明时，优先级才有意义。
内联样式会覆盖外部样式表的样式；！important例外，此声明会覆盖其他任何声明；
规则：**
内联：1000>ID选择器:100>类和伪类:10>元素选择器:1>通配符:0
继承的样式没有优先级；若选择器优先级一样，使用靠后的；
伪类：4个优先级一样，爱恨法则。

如何让一个元素消失？
display:none;不占据空间，不能冒泡，后代元素不渲染，会改变页面布局，理解成在页面中删掉该元素；
visibility:hidden；占据空间，简单隐藏；但是不改变页面布局，不会触发绑定事件；
overflow:hidden,；隐藏溢出元素；
opacity:0;元素变透明，不改变布局，绑定事件仍然有效，也可以被transition和animate；
position:absolute；采用margin负值。脱标；
z-index图层遮盖；
也可以直接width:0,height:0；但是不能隐藏文字；
针对文字隐藏：font-size:0；
transform:scale(0),讲一个元素无限缩小至不可见，位置保留; fliter:blur(0)，模糊度设置为0;

对于原型、原型链的理解？

数组的map，filter，reduce方法区别？
map()：对数组的每个元素都遍历一次，同时返回一个新的值（返回的数据长度和原始数据长度一样），不改变原始数组；
filter()：它的回调函数必须返回一个boolean值；当返回true时，函数内部会自动将这次调用的n加入到新的数组中，返回false时，函数内部会自动过滤到这次的n；
reduce():对数组中所有的内容进行汇总；
需要一个数据-用map；需要一个结果-用reduce；需要过滤一个结果-用filter。

说说回调函数？

说说回调地域？
介绍一下promise？

call，apply，bind的区别？
调用对象的一个方法，用于改变this指向；
call和apply：第一个参数均为指代的对象，第二个参数不同。call可以接收多个参数，后面可以为一串参数列表；apply只能接收两个参数，第二个是数组对象；若第一个参数为null，则this指向的是window对象。
bind: 返回的是一个修改后的函数，需要进行调用。bind可以有多个参数，但是参数是按照形参的顺序进行的。
总结：call和apply是改变上下文的this并立即执行这个函数，bind方法可以让对应的函数在合适的时候调用，在执行时候也可以添加参数。

说说position属性？
position：规定元素的定位类型。
absolute: 绝对定位，相对于static定位以外的最近一个父元素进行定位，脱标，不占据空间；若没有已经定位的父元素，它相对于定位。它的定位会和其他元素重叠。
relative：相对定位，相对其正常位置进行定位，元素仍占据原来的空间；可以通过设置垂直或水平位置，让这个元素相对于它的起点进行移动。
fixed:生成绝对定位的元素，相对于浏览器窗口进行定位；
static:无定位，元素出现在正常的流中；
inherit:规定应该从父元素继承position属性的值；
sticky:相对定位+固定定位的混合，元素在跨越特定阈值前为相对定位，之后为固定定位;

说说let和var的区别？
ES6可以使用let定义块级作用域；let配合for循环的应用，不会受到外面循环体的影响，不会受到变量污染；let没有变量提升和暂时性死区；let变量不能重复声明；
总结：ES6新增了let命令，用来声明局部变量，用法类似于var，但所声明的变量只在let命令所在的代码块内有效，而且有暂时性死区的约束。

暂时性死区

说说作用域链和作用域？

v-if和v-show的区别？
同：根据表达式的真假，切换元素的显示和隐藏；
异：v-show是修改元素的display属性实现，指令后的内容会解析为布尔值；v-if是操纵元素的DOM树，值为false时会将元素从dom树中移除。

如何画一条0.5px的线？

1.采用meta viewport的方式
<meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5" />
缩放至原来的0.5倍，则1px会变成0.5px；但viewport针对于移动端，在移动端才有效果。
2.transform:scale()的方式； transform:scale(0.5, 0.5);
3.boxshadow
4.线性渐变linear-gradient

link标签和import标签的区别？
link是html标签，@import在css中使用；
link没有兼容性，@import只能在IE5以上才可以识别；
页面被加载时，link会同时被加载，@import引用的css会等到页面加载结束后再加载；
link方式权重高于@import；

css动画如何实现
实现CSS动画有两种主要的方法：过渡动画(transition)和animation动画。
transition过渡动画，也就是元素从一种样式逐渐改变为另一种样式的效果。要实现过渡动画有两个必须点(和其他可选属性)：1.指定要添加过渡效果的CSS属性(或者"all");2.指定过渡效果的持续时间。transform只是一个css转换属性。
animation动画：使用animation动画的关键：1.用@keyframes定义规则，并绑定到一个选择器上。 2.规定动画的名称(animation-name),规定动画的时长(animation-duration)。

transition和animation的区别？

1.指代不同：
animation：属性是简写属性，用于设置6个动画属性；
transition：属性是简写属性，用于设置4个过渡属性；
2.特点不同
animation也叫关键帧，通过和keyframe结合设置中间帧的一个状态；transition是过渡，是样式值的变化过程，只有开始和结束。
animation配合@keyframe可以不触发时间就触发这个过程，而transition需要通过hover和js事件配合触发；
animation可以设置很多属性，如循环次数，动画结束状态等；transition只能触发一次；
animation可以结合keyframe设置每一帧，但是transition只有2帧；
3.性能
animation可以改变很多属性，其中改变width，height，position等文档流的属性时会引起页面的回流重绘，而transition使用一般结合transform进行旋转和缩放不会引起页面的重排。

Flex布局
参考阮一峰老师flex布局讲解

元素的垂直居中方法
vertical-align:middle;它的生效前提是display:inline-block;
给父元素添加flex属性，同时子元素设置align-self:center;
父元素设置display:table，同时子元素设置display:table-cell;不推荐
已知父元素高度，给子元素设置position:relative，再通过translateY(-50%)；
未知父元素高度，给父元素设置position:relative,子元素设置position:absolute，再通过translateY(-50%);
height=line-height;（子元素为单行文本的情况）
给定宽度，再设置margin：0 auto;
margin负值，margin-top和margin-left设置为height，width的一半；

设置图片在某个容器内居中
（1）父元素设置宽高，利用定位及设置子元素margin为自身的一半；
（2）父元素设置宽高，子元素设置position:absolute，margin:auto均分margin；
（3）css3属性transform，子元素设置position:absolute，left:50%;top:50%;transform(-50%,-50%);
(4)父元素设置display:table,子元素设置display:table-cell;
(5)弹性布局，display:flex；设置align-ites:center; justify-content:center;

js动画和css3动画的差异性？
js动画：
优点：控制能力强，可以在动画播放过程中对动画进行控制，如开始暂停取消等；动画效果丰富，如曲线运动，冲击闪烁，视觉色差滚动等只有js动画才能完成；大多数情况下没有兼容性问题；
缺点：复杂度较高；js动画在浏览器的主线程中执行，但主线程还有其他任务，可能出现阻塞导致丢帧现象；js
动画通常需要操作DOM元素来实现视觉上的动画效果，需要不断执行重回重排。
css3动画：
优点:部分情况下在浏览器上可以对动画进行优化，如在chromium基础上的浏览器中，css动画不触发layout和paint；部分效果可以强制使用硬件加速(通过GPU来提高动画性能);
缺点：运行进程控制较弱，css3动画只能在某些场景下控制动画的暂停和继续，不能在特定的位置添加回调函数；
总结：若两者都能实现的基础上才会考虑谁的性能更好，需要看具体的需求和也去场景。

块级元素、行内元素、行内块元素
块级元素：独占一行，可设置宽，高，若无法设置宽度，则默认为父元素的100%；
行内元素：与其他行内元素并排显示，宽高无效，默认宽度为文字宽度。水平方向的padding,margin有效，垂直方向无效。
行内块元素:对象呈现为inline对象，但对象的内容为block对象呈现。之后的内联对象会被排列在同一行内。

文本溢出省略号
单行文本：text-overflow:ellipsis，部分浏览器需要添加宽度属性；
多行文本：webKit浏览器或移动端，直接使用其CSS扩展属性，-webkit-line-clamp
写法：
display: webkit-box //必须，将对象作为弹性盒子模型显示
webkit-box-orient:vertical; //必须，设置对象的子元素的排列方式
webkit-line-clamp:3; //
overflow:hidden; //超出部分隐藏

margin合并问题
两个垂直相邻的块级元素，当上下两个边距相遇时，外边距会产生合并现象，合并后的值等于两个发生合并的外边距的高度中的较大者。

1.盒子嵌套：给外部盒子设置内边距padding-top：1px即可；给下面的盒子设定overflow:hidden/auto即可；
2.相邻盒子:给下面的盒子设置定位position:absolute即可；给下面的盒子设置浮动float:left即可；将其中任意一个盒子设置为行内块元素display:inline-block即可。

如何清除浮动
（1）使用clear:both清除浮动
在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单，方便兼容性好，但会造成结构混乱，不利于后期维护。
（2）利用伪元素clearfix来清除浮动, .clearfix::after{}
给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的
（3）overflow方法的使用
给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动，只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果
（4）双伪元素方法的使用
通过给父元素设置双伪元素来达到清除浮动的效果,.clearfix:before, .clearfix:after{}

CSS3新特性
1、圆角效果；2、图形化边界；3、块阴影与文字阴影；4、使用RGBA实现透明效果；5、渐变效果；6、使用“@Font-Face”实现定制字体；7、多背景图；8、文字或图像的变形处理；9、多栏布局；10、媒体查询等。
CSS3新增属性用法整理：
1、box-shadow（阴影效果）2、border-color（为边框设置多种颜色）3、border-image（图片边框）
4、text-shadow（文本阴影）5、text-overflow（文本截断）6、word-wrap（自动换行）
7、border-radius（圆角边框）8、opacity（透明度）9、box-sizing（控制盒模型的组成模式）
10、resize（元素缩放）11、outline（外边框）12、background-size（指定背景图片尺寸）
13、background-origin（指定背景图片从哪里开始显示）14、background-clip（指定背景图片从什么位置开始裁剪）15、background（为一个元素指定多个背景）16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）
17、hsla（在hsl的基础上增加透明度设置）18、rgba（基于rgb设置颜色，a设置透明度）

三栏布局的实现方式
两列顶宽一列自适应！
使用float+margin--注意清除浮动
左右盒子确定宽高，再给左边的div设置float:left，右边的div设置float:right；中间的盒子添加magrin-left：左边盒子宽度；margin-right:右边盒子宽度。
(2)position--直接定宽高，不利于布局修改
父盒子设置position:relative;子盒子设置position:absolute;同时需要计算好三个子盒子的宽度和间隔去设置位置，兼容性较好。
(3)table实现--方便，不利于搜索引擎抓取信息
父盒子设置display:table, border-spacing:10px;margin:10px;取值随意，子盒子div设置display:table-cell，兼容性较好，是哦那个与高度宽度未知的情况，但是margin失效。
(4)flex布局--存在IE9兼容问题
父盒子设置display:flex；left和center设置margin-right，right设置flex:1,使right自适应。
(5)grid布局
父盒子设置display:grid;设置grid-template-columns属性，固定第一二列宽度，第三列auto；

浮动布局时，3个div的生成顺序有没有影响
shengc哼有影响，应先生成左右两侧的div，再生成中间的div；

calc属性
calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。运算符的两边必须要有空白字符(+,-必须，其余建议，除数不能为0)，使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距。

display:table和本身的table有什么区别
display:table系列几乎是和table系的元素相对应的。
区别：
display:table的css声明可以让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，使得能够轻松定义一个单元格的边界，背景等样式，不会产生因为使用了table那样的制表标签所导致的语义化问题；
目前基本不使用table系表格元素，因为div+css写的文件比table写出来的文件小；且table必须在页面完全加载后才会显示，div则逐行显示；table的嵌套性太多，没有div简洁；非表格内容用table来装，不符合标签语义化要求，不利于SEO；

z-index的定位方法
z-index设置元素的堆叠顺序，z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。取值:auto；这时盒子不会创建一个新的本地堆叠上下文，在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同；设置整型数值。

如何改变一个DOM元素的字体颜色，不在它本身上操作？
考虑css继承属性，通过更改父元素的color属性。

height和line-height的区别
height:指的是元素自身的高度；line-height指的是元素内部文字上下行之间的高度，是针对字体来设置的。
当line-height=height时，表示这行元素处于垂直居中状态(仅限于一行文字时)。

设置一个元素的背景颜色，会填充哪些区域

display的取值
有以下取值：none / block / inline / inline-block / table-cell / Flex
none:此元素不会被显示
block：元素显示为块级元素，会换行
inline：默认，显示内联元素，不换行
inline-block：行内块元素，结合block和inline的部分属性
table-cell：会作为一个表格单元格显示
Flex：弹性盒模型