本文的面试题目是比较新的前端题目,适用于初中级的面试者,题目都是面试中高概率的题,也真诚的希望大家能够找到一个好的公司,希望这些真的对大家有用!谢谢,我会不断更新,希望大家能学到知识,进入心仪的公司.

一、CSS问题

一、flex弹性布局，

可以简单的使一个元素居中（包括水平和垂直居中） 栅格式系统布局，bootstrap grid
大家可以专门的找这类文章和书籍关于这些知识点详细了解一下.

二、圣杯和双飞翼布局 三栏是布局（两边两栏宽度固定，中间栏宽度自适应）

方案一：position（绝对定位法） center的div需要放在最后面 ​ 绝对定位法原理将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们的上层，然后margin属性，留出左右两边的宽度。就可以自适应了。

方案二：float 自身浮动法 center的div需要放到后面 ​ 自身浮动法的原理就是对左右使用float:left和float：right，float使左右两个元素脱离文档流，中间的正常文档流中，使用margin指定左右外边距对其进行一个定位。

圣杯布局：原理就是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含的div需要设置float属性使其形成一个BFC，并且这个宽度和margin的负值进行匹配

三、左边定宽，右边自适应

方案一：左边设置浮动，右边宽度设置100% .left{float:left} .right:{width:100%}

方案二：左设置浮动，右用cacl去补宽度计算 .left{float:left} .right:{width:cacl(100vw-200px}

方案三：父容器设置display：flex right部分是设置flex：1

方案四：右边div套个包裹、并前置、左及包裹 双浮动

四、水平居中

行内元素居中（父元素text-align:center）

块状元素居中（块状元素没发用text-align）

 - 1. 宽度一定：margin:auto- 2.宽度不定：块级变行内，然后在父上text-aliginfloat

五、BFC juejin.im/post/5909db…(这个博主讲的不错)

我的理解：BFC是css布局的一个概念，是一块独立的渲染区域，一个环境，里面的元素不会影响到外部的元素

​ 如何生成BFC：（脱离文档流）

​ 【1】根元素，即HTML元素（最大的一个BFC）

​ 【2】float的值不为none

​ 【3】position的值为absolute或fixed

​ 【4】overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）

​ 【5】display的值为inline-block、table-cell、table-caption

BFC布局规则：

1.内部的Box会在垂直方向，一个接一个地放置。

2.属于同一个BFC的两个相邻的Box的margin会发生重叠

3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置float

4.BFC的区域不会与float box重叠。

5.计算BFC的高度，浮动元素也参与计算

BFC作用： 1.自适应两栏布局

2.可以阻止元素被浮动元素覆盖

3.可以包含浮动元素—清除内部浮动 > > >

原理: 触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内

4.分属于不同的BFC时，可以阻止margin重叠

display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩 flex:1; 子元素设置，设置子元素如何分配父元素的空间，flex:1,子元素宽度占满整个父元素align-items:center 定义子元素在父容器中的对齐方式，center 垂直居中justify-content:center 设置子元素在父元素中居中，前提是子元素没有把父元素占满，让子元素水平居中。

2.css3的新特性

transtion transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。

ainimation实现动画效果主要由两部分组成：

通过类似Flash动画中的帧来声明一个动画；

在animation属性中调用关键帧声明的动画。

translate 3D建模效果

3.img中alt和title的区别

这是最简单直接的回答了:

图片中的 alt属性是在图片不能正常显示时出现的文本提示。

图片中的 title属性是在鼠标在移动到元素上的文本提示。

4.用纯CSS创建一个三角形

 <style>div {width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;}</style>
</head>
<body><div></div>
</body>

5.如何理解CSS的盒子模型？

标准盒子模型：宽度=内容的宽度（content）+ border(边框) + padding(内边距)

低版本IE盒子模型：宽度=内容宽度（content+border+padding)

6.如何让一个div水平居中

已知宽度，block元素 ，添加添加margin:0 auto属性。

已知宽度，绝对定位的居中 ，上下左右都为0，margin:auto

7.如何让一个div水平垂直居中

div {
position: relative / fixed; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-top:-150px;
margin-left:-250px;外边距为自身宽高的一半 */
background-color: pink; /* 方便看效果 */}.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */}
.container div {
width: 100px; /* 可省 */
height: 100px; /* 可省 */
background-color: pink; /* 方便看效果 */
}
复制代码
复制代码

8.如何清除浮动？

clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式 {clear:both;height:0;overflow:hidden;}

给浮动元素父级设置高度

父级同时浮动（需要给父级同级元素添加浮动）

父级设置成inline-block，其margin: 0 auto居中方式失效

给父级添加overflow:hidden 清除浮动方法

万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}

9.css3实现三栏布局，左右固定，中间自适应

圣杯布局/双飞翼布局

 <style>* {margin: 0;padding: 0;}.middle,.left,.right {position: relative;float: left;min-height: 130px;}.container {padding: 0 220px 0 200px;overflow: hidden;}.left {margin-left: -100%;left: -200px;width: 200px;background: red;}.right {margin-left: -220px;right: -220px;width: 220px;background: green;}.middle {width: 100%;background: blue;word-break: break-all;}</style>
</head>
<body><div class='container'><div class='middle'></div><div class='left'></div><div class='right'></div></div>
</body>

10.display:none 和 visibility: hidden的区别

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

11.CSS中 link 和@import 的区别是？

link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

import只在IE5以上才能识别，而link是HTML标签，无兼容问题

link方式的样式的权重 高于@import的权重.

12.position的absolute与fixed共同点与不同点

共同点： 改变行内元素的呈现方式，display被置为block 让元素脱离普通流，不占据空间 默认会覆盖到非定位元素上

不同点： absolute的”根元素“是可以设置的 fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

13…transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性， 而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from … to，而animation可以一帧一帧的。

transition 规定动画的名字 规定完成过渡效果需要多少秒或毫秒 规定速度效果 定义过渡效果何时开始 animation 指定要绑定到选择器的关键帧的名称

14.CSS优先级

不同级别：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性1.属性后面加!import 会覆盖页面内任何位置定义的元素样式2.作为style属性写在元素内的样式3.id选择器4.类选择器5.标签选择器6.通配符选择器（*）7.浏览器自定义或继承
**同一级别：后写的会覆盖先写的**

css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素

15.雪碧图：

        多个图片集成在一个图片中的图使用雪碧图可以减少网络请求的次数，加快允许的速度通过background-position，去定位图片在屏幕的哪个位置

JS问题

第一章 初识JavaScript

JavaScript（JS）是什么?

  • JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。
  • JavaScript通常用来操作HTML页面，响应用户操作，验证传输数据等
  • java和JavaScript有什么关系？java和JavaScript没有关系
  • jQuery和JavaScript有什么关系？jQuery是由JS编写的一个js库。

JS代码写在哪里？

  • 内嵌 js，
  • 外链 js文件里面，利用src属性引入
  • 标签属性里面（不推荐）
  • script标签中的属性type="text/javascript"或language=”javascript”，HTML5新规则下可以什么都不用加；
  • script标签可以放置于任何位置，不同的位置要注意加载顺序，通常放在head或body结束之前；

写JS代码需要注意什么?