前言
眼看着2019年就要过去了，你现在的技术达到了哪种程度呢，接下来我们就一起回顾下各大公司的面试题...不过还是要警示一下大家，若是这些面试题还没有彻底搞懂，真的要好好钻研下技术嘞。
正文
css
-
实现一个持续动画效果？
.box{ animation: move infinite 2s linear; } @keyframes move { 0%{ transform:rotate(0); } 100%{ transform: rotate(360deg); } } -
DOM元素如何显示隐藏？
+ overflow:hidden; /*视觉上的隐藏，隐藏元素的不会占据任何空间，不会影响其他元素的布局*/ + opacity:0; /*只是视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局*/ + visibility:hidden; /*隐藏元素的依然占据着空间，影响其他元素的布局*/ + display:none; /*真正意义上的隐藏，元素不会占据任何空间*/ + transform: scale(0,0); 或者 transform: translate(-9999px, -9999px); /*视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局*/ + <div hidden>00000</div> /*HTML5新增的hidden属性，可以直接隐藏元素*/ + clip-path: polygon(0 0, 0 0, 0 0, 0 0);/*通过裁剪元素来实现隐藏*/ + position: absolute; top: -9999px; left: -9999px; /*视觉上的隐藏，实际显示在屏幕的可视区之外，不会占据空间，不影响其他元素的布局*/ -
img标签中 alt和title异同？
alt 是图片加载失败时，显示在网页上的替代文字； title 是鼠标放上面时显示的文字,title是对图片的描述与进一步说明; 这些都是表面上的区别，alt是img必要的属性，而title不是。 -
块级元素、行内元素？
行内元素：与其他行内元素并排 不能设置宽高，默认的宽度就是文字的宽度 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等 块级元素：霸占一行，不能与其他任何元素并列。 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等 -
清浮动clearfix
.clearfix:after { visibility: hidden; display: block; content: " "; clear: both; height: 0; } -
单、多行文本溢出省略号？
单行文本溢出： overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap；（设置文字在一行显示，不能换行） text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本） width：（这个宽度就可以随便定义了） 多行文本溢出： -webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果，它需要组合其他的WebKit属性） display: -webkit-box；（和 1结合使用，将对象作为弹性伸缩盒子模型显示 ） -webkit-box-orient: vertical；（和 1 结合使用，设置或检索伸缩盒对象的子元素的排列方式 ） overflow: hidden；（文本溢出限定的宽度就隐藏内容） text-overflow: ellipsis；（多行文本的情况下，用省略号“…”隐藏溢出范围的文本) -
响应式布局原理？px、rem和em区别？
响应式布局原理？ 利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。 px 、rem 、em 区别？ px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算 机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。 em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置， 则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。 rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小， 但相对的只是 HTML 根元素。 -
语义化标签？
+ 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。 + 有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读？ + 有利于构建清晰的机构，有利于团队的开发、维护。 + 尽可能少的使用无语义的标签div和span；在语义不明显时，既可以使用div或者p时，尽量用p,因为p在默认情况下有上下间距，对兼容特殊终端有利； + 不要使用纯样式标签，如：b、font、u等，改用css设置。需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）； + 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td； + 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。 -
！DOCTYPE HTML 作用？
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为所以，html5只有一种：<!DOCTYPE>但是html4.01有三种，分别是strict（不包含展示性和弃用元素，不允许框架集）、transitional（包含展示性和弃用元素，不允许框架集）、frameset（允许框架集） 声明位于HTML文档的第一行，处于标签之前。用来告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 标准模式：排版和js运作方式都是以该浏览器支持的最高标准运行。 兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法运行。 -
src 和 href 区别？
href: 指定网络资源的位置（超文本引用），从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在 link和a 等元素上使用 src: 属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用 -
position 定位？
static（静态定位） 对象遵循标准文档流中，top, right, bottom, left 等属性失效。 relative（相对定位） 对象遵循标准文档流中，依赖top, right, bottom, left 等属性相对于该对象在标准文档流中的位置进行偏移，同时可通过z-index定义层叠关系。 absolute（绝对定位） 对象脱离标准文档流，使用top, right, bottom, left 等属性进行绝对定位（相对于static定位以外的第一个父元素进行绝对定位） 同时可通过z-index定义层叠关系。 fixed（固定定位） 对象脱离标准文档流，使用top, right, bottom, left 等属性进行绝对定位（相对于浏览器窗口进行绝对定位）同时可通过z-index定义层叠关系。 -
less 中变量的使用？
常规使用：@name 作为选择器或属性名：@{name} 作为URL："@{name}"。 例如： > @lightPrimaryColor: #c5cae9; @accentColor: rgb(99, 137, 185); > @proName: width; @{proName}: 100px; > @imgUrl: "./images/logo.png"; background: #FFF url("@{imgUrl}") -
什么是css盒模型？
CSS盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。 /*标准模型*/ box-sizing:content-box; /*IE模型*/ box-sizing:border-box;
-
常用浏览器内核？
Trident:是微软开发的渲染引擎，又叫MSHTML.但没有开源，也是比较流行的渲染引擎之一。 Gecko:Firefox所使用的渲染引擎就是它，是网景公司在20世纪90年代为其浏览器Netscape Navigator开发的渲染引擎。 Blink:是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。 Webkit:是一个开源项目，是现在流行的渲染引擎之一，很多浏览器都在使用它，比如苹果的Safari。 -
css中哪些属性可以继承？
所有元素可继承：visibility和cursor。 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。 块状元素可继承：text-indent和text-align。 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。 表格元素可继承：border-collapse。 -
优先级？
这个介绍的比较详细，再此就不多说了
-
link 和@import区别？
link属于html标签，而@import是css提供的 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。 link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。 link方式样式的权重高于@import的。 -
c3有哪些新特性？
transition:CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0) animation:动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running） transform:适用于2D或3D转换的元素 box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）; border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch）） background-clip 制定背景绘制（显示）区域 rgba（rgb为颜色值，a为透明度） filter(滤镜)： 黑白色filter: grayscale(100%) 弹性布局 Flex 弹性盒子（ Flexible Box 或 flexbox）， 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 栅格布局 grid 盒模型定义: box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！ 媒体查询media: 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式 -
transition和animation的区别
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。 -
flex布局？
//flex-direction：决定主轴的方向（即子item的排列方法） .box { flex-direction: row | row-reverse | column | column-reverse; } //flex-wrap：决定换行规则 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } //flex-flow： .box { flex-flow: || ; } justify-content：对其方式，水平主轴对齐方式 align-items：对齐方式，竖直轴线方向 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
今天呢，是第一次更新css方面的面试题，稍后还会在空余时间为大家更新的，喜欢就请多多关注哦。
