web前端面试官会问什么?这个也要分人分基础，如果你是应届生的话，面试官可能会问一些偏重书本上的知识，如果你有工作经验，面试官可能会问一些与项目结合的问题来了解你的技术水平、逻辑思维以及学习状态。

　　1.什么是盒子模型?盒子模型有哪些类型?如何计算?

　　css中所有的html元素都可以看成一个盒子，盒子模型包括margin border padding content

　　盒子模型分为两类：W3C盒子模型和IE盒子模型。

　　W3C盒子计算：margin+border+padding+width

　　IE盒子计算： margin+width

　　2.描述cookies、sessionStorage和localStorage的区别

　　(1)数据存储大小限制不同。

　　cookies：数据始终携带在同源https请求中，即cookies可以在服务器和浏览器之间传回。所以存储的数据量最小，一般为4096B。

　　sessionStorage：数据存储在本地，不会自动发送到服务器。一般5M以上

　　localStorage：数据存储在本地，不会自动发送到服务器。一般5M以上

　　(2)数据有效期不同。

　　Cookies：数据在 cookie 设置的过期日期之前有效，即使窗口和浏览器已关闭。

　　sessionStorage：关闭浏览器窗口后自动清除数据。存储的数据只在同一个源窗口有效，即使在不同浏览器的同一个页面也是无效的，一般用于session数据的存储

　　localStorage：一直有效，所以作为持久化数据使用

　　(3)数据范围不同。

　　cookies、localStorage：在所有同源窗口之间敏感共享

　　sessionStorage：不再在不同浏览器窗口之间共享

　　同源窗口共享是一款连接PC和移动设备的软件。使用同源窗口共享，您可以轻松地在 PC 和移动设备之间共享屏幕内容和数据。

　　3.什么是内联元素?什么是块级元素?什么是空(void)元素?

　　内联元素包括：a、b、span、img、input、strong、select、label、em、button、textarea等;

　　块级元素包括：div、ul、li、dl、dt、dd、p、h1-h6、blockquote等;

　　空元素(没有内容的html元素)是：br、meta、hr、link、input、img。

　　4. 'data-attribute' 的目的是什么?

　　data-attribute是html5引入的新特性。前端开发者可以使用它来设置需要的自定义属性来存储一些数据。当然，在高级浏览器中，可以通过 JS 脚本进行定义和数据访问。

　　5.iframe 有什么作用?的优点和缺点?

　　iframe称为内嵌框架，用于为文本或图形设置浮动框架或容器;

　　优点是：

　　①.iframe可以完整显示嵌入的网页。

　　②.如果有多个网页引用了iframe，只需要修改iframe的内容就可以改变每个被调用页面的内容，方便快捷。

　　③。如果网页为了统一样式而有相同的header和version，可以写成一个page，用iframe嵌套，这样可以增加代码的复用性。

　　④.可以解决图标、广告等第三方内容加载缓慢的问题。

　　⑤。重新加载页面时，不需要重新加载整个页面，只需要重新加载页面中的一帧页面，减少了数据的传输，提高了网页的下载速度

　　缺点是：

　　①。页面样式调试比较麻烦，会有多个滚动条，而且会生成多个页面，不好打印;

　　②.浏览器的返回按钮不可用;

　　③。如果 iframe 标签过多，会增加服务器的 HTTP 请求;

　　④.小型移动设备无法充分显示边框，即设备兼容性差;

　　⑤.代码复杂，部分搜索引擎无法解析。

　　6.您如何优化您的网站文件和资源?

　　文件合并、文件压缩、使用cdn(内容分发网络)托管您的资产、使用缓存、优化元标记、启用css/js文件的Gzip压缩

　　将css/js文件放在外部文件中，避免写在同一个页面，引用时把css放在最上面，把js放在最下面等等。

　　7.常见的浏览器兼容性问题?您使用哪些浏览器来调试您的项目?他们的核心是什么?

　　①不同浏览器的标签默认的外补丁(margin)和内补丁(padding)是不同的;

　　②图片之间有默认间距;

　　③边距重叠问题;当相邻的两个元素都设置了边距时，边距取最大值，舍弃最小值;

　　④两个块级元素，父元素设置为overflow:auto;子元素设置为位置：相对;并且高度大于父元素，在IE6、IE7中会隐藏而不是溢出;

　　⑤IE9以下的浏览器不能使用不透明度;

　　⑥当标签的高度设置为小于10px时，会超过自己在IE中设置的高度6、IE7;

　　⑦IE6双边距问题;如果在IE6中设置了float，同时设置了margin，就会出现margin问题。

　　使用谷歌浏览器、QQ浏览器、火狐浏览器，内核分别为Webkit、webkit和IE内核、Gecko内核

　　8.javascript 数据类型：

　　值类型(基本类型)：String、Number、Boolean、Null、Undefined、Symbol。

　　参考数据类型：对象(Object)、数组(Array)、函数(Function)。

　　9.js中var和let与const的区别

　　var声明的变量属于函数作用域，let和const声明的变量属于块作用域;

　　Var有变量提升的现象，而let和const则没有;

　　var变量可以重复声明，而在同一个块级作用域内，let变量不能重新声明，const变量不能修改。

　　10.有哪些方法可以清除浮标?

　　(1)父div定义overflow：隐藏

　　(2)在clear末尾添加一个空div标签：both

　　(3)父div定义height

　　(4)父div定义overf：auto

　　(5)使用伪元素，父div定义伪类：after(必须设置内容)

　　上述知识列举了一些常见的web前端面试官会问什么的问题，供大家参考，实际面试时可能被问到的问题比这要多得多，同学们还是要多看多积累。更多关于“web前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。