前端最新面试题

这篇文章将分为三部分css和html为一部分，js、jQuery为一部分，vue与性能优化为一部分，今天会先整理css与html

1，弹性盒布局

父级设置display：flex将对象作为弹性伸缩盒显示

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

容器默认生成两根主轴，水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

设置在容器上的属性有6种

分别为

flex-direction：决定主轴的方向（即项目的排列方向）

flex-wrap：定义换行情况

flex-flow：flex-direction和flex-wrap的简写，默认row nowrap

justify-content：定义项目在主轴上的对齐方式。

align-item：定义在交叉轴上的对齐方式

align-content：定义多根轴线的对齐方式

详细属性值请参阅文档

2，html5新标签与新功能

新标签：

header,footer,article,aside,nav,section,time,progress,

ruby,mark....

新功能：

vidio，audio，canvas，拖放，离线应用，web存储（sessionStorage，localStorage，sessionStorage 方法针对一个session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除，localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用），历史状态管理，地理位置，新增input类型（color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week），新增表单元素，WebSocket

3、css3的新特性

属性选择器：[attribute],[attribute=value],[attribute~=value]...

伪类选择器：:first-letter ，:first-line，:first-child....

伪元素选择器：:before，:after

border：border-image，border-radius,box-shadow

背景：background-size,background-origin,background-clip，background-image

渐变：线性渐变（Linear Gradients）径向渐变（Radial Gradients）

background: linear-gradient(direction, color-stop1, color-stop2, ...);

background: radial-gradient(center, shape size, start-color, ..., last-color);

字体：@font-face

转换和变形：transform

过度：transition

动画：animation，@keyframes

媒体查询：@media all and

4，兼容问题：

各浏览器的margin和padding，图片默认的间距，ios和安卓对fixed的解析，特殊样式的兼容（-moz-：firefox，-webkit-：Chrome，-o-：opera，-ms-：ie）

渐进增强和优雅降级

渐进增强观点认为应该关注于内容本身。内容是我们建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持（Graded Browser Support)“策略的原因所在。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

5、css选择器的优先级

important(1000)>行内（1000）>id(100)>class(10)>标签（1）>*(0)

6、清除浮动

总结有两种方法

方法一：使用clear属性如添加空白div或使用伪元素，添加clear：both

方法二：形成BFC：如：overflow：hidden，display：inline，position：absolute,float:left

7，引入css的方法

link，@importat，他们的不同之处在于important用在css中并且引入的css在页面加载完之后加载，link用在html中并且引入的css 和页面同时加载，

8、盒子模型

包含元素内容（content），内边距（padding），边框（border），外边距（margin），分为标准盒子模型和怪异盒子模型，标准盒子

模型：盒子的总宽度=margin+content。怪异盒子模型：盒子的总宽度=margin+contant+padding+border

CSS3中新增的属性：box-sizing模拟了标准盒子模型和IE盒子模型box-sizing:content-box | bordrer-box | padding-box | inherit。

默认值：

content-box:标准盒子模型(border和padding不计算入width之内)

border-box:IE盒子模型(border和padding计算入width之内，其实就是怪异模式了~)

padding-box:padding计算入width内

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值,只有ff支持padding-box

IE浏览器在getComputedStyle得到width/height是按照标准模式计算的，而不论box-sizing的取值

在HTML页面声明 即可按照标准模型显示页面内容

9，display:none和visibility:hidden两者的区别

空间占据：display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。

子元素继承：

display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~

visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来

opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

事件绑定：

display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；

visibility:hidden 元素上绑定的事件也无法触发；

opacity: 0元素上面绑定的事件是可以触发的。

过渡动画：

transition对于display肯定是无效的，大家应该都知道；

transition对于visibility也是无效的；

transition对于opacity是有效，大家也是知道的:).

10，position所有属性：

position: relative;相对定位：

1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）

2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）

3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）

4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position