前端实习遇到的面试题及答案(一) - 好文

1.请你描述一下什么是盒模型，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

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

盒模型主要分为两类：W3C标准盒子模型和IE盒子模型，
在编写页面代码的时候应该尽量使用标准的W3C盒子模型，可在页面中声明DOCTYPE类型，将页面设置为"标准模式"(解决兼容性最简洁和值得推荐的方式)，在页面开头加上：
<!DOCTYPE html>
标准模型-width与height按照content宽高计算，而IE模型-width与height则按照content+padding+border计算；
* { box-sizing：content-box; // 标准盒模型 box-sizing：border-box; // IE盒模型 }
2.请描述cookies、sessionStorage和localStorage的区别（每次笔试都能遇到）

①.数据存储大小限制不同。
cookies：数据始终在同源的http请求中携带，即cookie能在服务器和浏览器间回传。故存储的数据大小最小，一般为4096B。
sessionStorage：数据保存在本地，不会自动发给服务器。所以一般5M或者更大。
localStorage：数据保存在本地，不会自动发给服务器。所以一般5M或者更大。
②.数据有效期不同
cookies：数据在cookie设置的有效期之前都有效，即使窗口和浏览器关闭。
sessionStorage：数据在关闭浏览器窗口后自动清除。存储的数据仅在同源窗口内有效，即使在不同浏览器相同页面也是无效的。一般用于存储会话数据。
localStorage：始终有效，因此用作持久数据。
③.数据作用域不同
cookies、localStorage：在所有同源窗口敏感词享。

sessionStorage：不在不同浏览器窗口敏感词享。

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.如何居中一个浮动元素？
.content{ height: 任意px; width: 任意px; border: 1px solid red; /*垂直居中*/ display:
table-cell; vertical-align: middle; } .left{ height:Npx; width: Npx; border:
1px dashed blue; /*水平居中，但设置浮动后失效 margin: 0 auto;*/ float: left; /*水平居中*/
margin-left: 50%; position: relative; left: -(N/2)px; }
5.'data-属性'的作用是什么？

data-属性为html5推出的一个新功能，前端开发者可以利用其设置需要的自定义属性，来进行一些数据的存放。当然，在高级浏览器下可通过JS脚本进行定义和数据的存取。

6.iframe有什么作用？优缺点？

iframe被称作嵌入式框架，用于设置文本或图形的浮动图文框或容器；

优点有：

①.iframe能够原封不动的把嵌入的网页展现出来。

②.如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

③.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用性。

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

⑤.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页，减少了数据的传输，增加了网页下载速度

缺点有：

①.页面样式调试麻烦，会出现多个滚动条，并产生多个页面，不容易打印；

②.浏览器的后退按钮不可用；

③.若有过多iframe标签会增加服务器的HTTP的请求；

④.小型的移动设备无法完全显示框架，即设备兼容性差；

⑤.代码复杂，某些搜索引擎无法解读。

7.你如何对网站的文件和资源进行优化？

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

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

8.常见的浏览器的的兼容问题？你使用过哪些浏览器调试你的项目？它们的内核分别是？

①不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同；
②图片之间默认有间距；
③边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
④两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative
;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
⑤IE9以下版本浏览器不能使用opacity；
⑥当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度；

⑦IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题。

用过Google Chrome、QQ浏览器以及Firefox浏览器，它们的内核分别是Webkit、webkit和IE的核以及Gecko内核

热门工具换一换