随着疫情持续好转，各地陆续复工。当然，对于我们来说，正所谓金三银四的跳槽季也即将迎来，这里分享一些我在前端领域积累的经验，供自己温故知新.对于前端来说，涉及的知识面广，内容也多，但不变的是，主要围绕html(5)、css(less、scss、sass、styus、css3)、js(es5、es6)，以及vue、react等几个常见的流行框架，废话不多说，直接进入正题。1、请列举几个html5的新特性答：html5新增的特性有：新增语义/结构标签，如新增footer、article、main、nav等；新增input的type类型和属性，如：email、tel、number等；HTML5专有API地理位置本地存储缓存等新的图形标签svgcanvas两者的区别是新的多媒体标签videoaudiosource丢弃了一些元素标签，如：font自定义元素标签DOCTYPE和字符编码charset声明2.使用z-index的答案：z-index是用来设置标签的层级关系的。使用z-index时，需要同时设置标签的position属性（如relative或absolute或fixed），标签默认z-index为0，可以设置负数，值越大越靠前3.position的属性及使用方法答：position是css的定位属性，其中主要包括以下不同的属性值，具体如下：absolute生成一个绝对定位的元素，相对于静态定位以外的第一个父元素进行定位。元素的位置由“left”、“top”、“right”和“bottom”属性指定。fixed生成绝对定位的元素，相对于浏览器窗口定位。元素的位置由“left”、“top”、“right”和“bottom”属性指定。relative生成??相对定位的元素，相对于它们的正常位置定位。因此，“left:20”将向元素的左侧位置添加20个像素。静态是默认值。没有定位，元素出现在正常流中（忽略顶部、底部、左侧、右侧或z-index声明）。inherit指定位置属性的值应该从父元素继承。4、float的使用答：该属性定义了元素向哪个方向浮动。传统上，此属性总是应用于图像，使文本环绕图像，但在CSS中，任何元素都可以浮动。不管元素本身如何，浮动元素都会生成一个块级框。具体如下：float造成的效果使得元素本身变成了一个类似于inline-block的元素，使得包裹它的元素忽略了它的高度，即父元素没有高度。例如：为子元素框设置高度：100px；此时父元素的高度也是100px。float的效果float使元素按指定方向移出文档流，直到其外边缘碰到包含框或另一个浮动边框。浮动只会影响它后面的元素。如果上面的元素不是浮动的，它就不会上升。如果父元素太窄无法容纳所有浮动元素，则无法容纳的浮动元素将换行显示。以换行的元素为基准，如果浮动元素的高度大于换行的元素，换行时就会被更高的元素“卡住”。因此，需要消除浮动带来的影响一般有以下解决方案：对于子元素：在浮动子元素后添加一个元素，添加一个clear:both属性即可正常显示，缺点是随机添加一个空元素，这不符合代码规范。对于父元素：在父元素后面添加一个相邻的空元素，设置clear属性，但只让后面的元素正常显示，不扩大父元素的高度。Forparentelement:为父元素设置高度，可以正常显示，但是扩展性不好，因为一般里面的内容都是用来展开高度的。对于父元素：为父元素设置display:inline-block，可以正常显示，但是父元素的margin:auto无效，你会发现上下两部分之间会有空隙。对于父元素：为父元素设置overflow:hidden，可以正常显示，但需要匹配宽度，否则默认占满一行。6.css动画属性（比如用css刹车一个旋转的三角形）答：做一个三角形，直接用border属性即可。具体可以将框的高和宽设置为0px，然后设置宽度对应的不同边框的颜色属性。Triangle对应的底边设置为特定的三角形颜色，对应的应设置为nothing或宽度为0。另外两条斜边设置为透明。旋转动画涉及css的两个属性，分别是：1）transition：动画属性，对应动画的属性名可以写四个值也可以直接全部设置，动画完成时间（以s或ms为单位），动画变化曲线，以及动画开始时间2）transform：旋转属性主要有rotate（弧度Rotation还有rotate3d，rotateX，rotateY，rotateZ），translate（同理有四个），scale（里面有四个同理)7.Regularboxmodel和informalboxmodel答：两者的主要区别是计算box的宽度或高度不同。标准框模型包括：margin、border、padding和内容的宽度，即：框的实际宽度=内容的左右margin+左右border+左右padding+内容的实际宽度；而在css3中引入了box-sizing属性，可以改变标准框模型的计算方式，具体为：设置box-sizing:border-box时，框的实际宽度=内容的左右边距+content的实际宽度，当然也可以直接设置box-sizing：content-box可以回到正常的标准box模型8.flex弹性布局答：1.设置box的display属性为flex，或者line-flex，对应的css属性有六个，分别是：1）flex-direction：设置子元素的排列方式（row，column，row-reverse，column-reverse）2）flex-warp：设置子元素是否排列elementswrap(nowarp,warp,warp-reverse)3)flex-flow:flex-direction和flex-warp的缩写，默认为rownowarp4)justify-content:设置子元素的水平排列(flex-start,flex-end,center,span-around,span-between)5)align-items：设置子元素垂直模式(flex-start,flex-end,center,stretch,baseline)6)align-content：设置多轴排列方式(flex-start,flex-end,center,spand-around,span-between,stretch)2.对应的子元素item也有自己的6个css属性，分别是：1）order：设置元素的排列权重值，值越大越靠后2）flex-grow：设置元素的放大比例元素3)flex-shrink:设置元素的缩小比例4)flex-basis:设置多出来的空间项占用主轴空间的比例子元素本身的垂直排列，默认为该值box的align-items的设置??：设置flex布局后，子元素的float,clear,vertical-align无效9.grid网格布局答：1.设置box的gridgrid布局需要设置显示为grid或者line-grid，对应如下属性：1）grid-template-columns：定义每列的宽度mn2)grid-template-rows：定义每一行的高度3)grid-row-gap：定义行与行之间的间隙4)grid-column-gap：定义列之间的间隙5)grid-gap：定义间隙行和列之间的缩写6)grid-teamplate-areas：定义一个区域由多个组成7)grid-auto-flow：定义容器的排列顺序8)justify-items：定义内容的水平排列顺序sub-elements9)align-items：定义子元素内容的垂直排列顺序10)place-items：定义子元素内容水平和垂直顺序的简写方式11)justify-content:定义容器水平排列顺序(grid)12)align-content:定义容器垂直排列顺序(grid)13)place-content:定义容器水平和垂直排列顺序的缩写2.的子元素的属性包括：1)grid-column-start：所在的位置列开始2)grid-column-end:列结束的位置3)grid-row-start:行开始的位置4)grid-row-end：行结束的位置5)grid-column：列的起止位置6)grid-row：行的起止位置7)grid-area：定义元素放在哪个区域8)justify-self:定义元素本身的水平排列9)align-self:定义元素本身的垂直排列10)place-self:定义元素本身的水平和垂直排列??:当设置为网格布局时,子元素的float和inline-block,table-cell,column-*属性都是无效的10.常用居中解决方案答：1.内联元素水平居中：直接使用text-align:center2.垂直居中内联元素：vertical-align:middle并设置父元素行高为父元素的高度3.定宽元素水平居中使用：magin:0auto4。flex弹性布局：设置justify-content:centerhorizo??ntally,align-items:verticallycenter5.通过padding属性居中垂直化6.设置父元素为：display:table-cell,vertical-align:middle7.通过伪元素设置垂直居中：设置一个父元素的伪元素，设置为inline-block，设置vertical-align:middle8。高度确定时：绝对定位+margin垂直居中9.高度不确定时：绝对定位+transform，具体：设置需要垂直居中的元素：position:absolute,top:50%,transform:translateY(-50%)10.使用flex-duration:column垂直居中：display:flex,flex-duration:column,justify-content:center水平垂直居中方法：1.父元素高度已知，和子元素的高和宽是固定的（高度可以不固定）：text-align:center,line-height:parentheight2.绝对定位+margin实现垂直和水平居中，需要知道高度和子元素的宽度3.绝对定位+transform实现纵横居中，不需要知道子元素高宽：position:absolute;顶部：50%；左：50%；变换：翻译（-50%，-50%)4.使用显示作为表格，子元素作为显示：table-cell；父元素需要知道高度），设置伪元素的高度为100%，并设置vertical-align:middle,display:inline-block；为子元素设置vertical-align:center；display:inline-block（子元素水平居中可以使用text-align:center或者margin:0auto）6.设置子元素为margin:auto；位置：绝对；顶部：0；左：0；右：0；底部：0；类——:hover,:link,:active,:target,:not(),:focus常见的伪元素——::first-letter,::first-line,::before,::after,::selection::before和::after下的唯一内容用于在css渲染中向元素的逻辑头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档的内容，无法复制，只添加在CSS渲染层。所以不要用:before或:after来显示有意义的内容，尽量用它们来显示装饰性的内容，比如图标12.css选择器答案：通配符选择器，标签选择器，类选择器，id选择器，属性选择器，the空格选择器大于加号选择器。具体权重为：ID>Class>Label>Adjacent>ChildSelector>DescendantSelector>*>Attributes>Pseudo-class13.div设置padding为表达式的100%答：无论是标准模式还是box-sizingmode，padding是元素总宽度的一部分，所以此时div的表现是对应div14的颜色。em、rem、px的用法em是相对长度单位。相对于当前对象中文本的字体大小。如果内联文本的当前字体大小没有手动设置，则它是相对于浏览器的默认字体大小。相对于rem的大小只是HTML根元素的font-size来计算px像素（Pixel）。相对长度单位。Pixelpx是相对于显示器的屏幕分辨率的。15.margin使用及注意事项答：使用margin时，相邻两个标签之间的margin会合并，即设置上下标签的margin-top和margin-bottom时，会自动16.列表几种常见的css3属性及其用途答：常见的有：border-radius：设置标签的圆角；box-shadow：设置Shadow，box-sizing：改变boxmodel等。17.less和sass的区别是Less环境比Sass简单。Sass的安装需要安装Ruby环境。Less基于Javascript。需要引入Less.js来处理代码，输出css到浏览器，在开发过程中也可以使用Less，然后编译成css文件，直接放到项目中。Less比Sass使用起来更简单 Less并没有砍掉CSS原有的特性，而是在现有的CSS语法的基础上，为CSS添加了过程化语言特性。Sass比Less更强大1.Sass有变量和作用域2.Sass有函数的概念3.过程控制：条件、循环遍历、继承、引用4.数据结构：数组，mapLess和Sass有不同的处理机制。前者是通过客户端处理的，后者是服务器处理的。相比之下，前者的解析会比后者慢。Less和Sass关于变量的唯一区别是Less使用@，而Sass使用$。同样的东西Less和Sass在语法上有一些共同点，比如：1.混入（Mixins）——classinclass；2.ParametersMix-in——可以传递参数的类，就像函数一样；3.嵌套规则——类嵌套在Classes中，从而减少重复代码；4.运算——CSS中用到数学；5.颜色功能——颜色可编辑；6.Namespace（命名空间）——对样式进行分组，以便调用；7.Scope——局部修改样式；8.JavaScript赋值——在CSS中使用JavaScript表达式赋值。当然，说到css，也会问到css预处理语言，比如less，scss等，可以自行查看相应的资料。我不会在这里解释太多。下篇文章专门介绍前端常用的本地存储，缓存做一个解释，具体文章地址如下：前端常见面试-存储/缓存
