前端面试一定要掌握的十道面试题(带答案)

1、页面元素的隐藏方式和各自特点？

        display:none; 设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。

        visibility: hidden 这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。

        opacity:0 设置元素透明度opacity属性为0，也可以隐藏页面元素。在呈现上与visibility:hidden;方式一样,同样会占据页面空间。

        将width heihgt 设置为0 或者使用z-index将数值设置为最小,可以隐藏在其他元素下面

2、用过哪些盒模型，以及他们各自的区别？

         IE盒子模型box-sizing:border-box;（怪异模式）

         W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式

content-box:这是默认样式指定CSS标准。测量width和height属性只包括的内容，但不是border, margin, 或者 padding。
padding-box:width和height属性包括padding的大小，不包括border和margin
border-box:width和height属性包括padding和border，但不是margin。这是盒模型的文档时，Internet Explorer使用Quirks模式。
content-box不包含padding，border-box包含padding。所以如果你设置的大小是一样的，content-box看起来，会比border-box大

3、src和href的区别 ？

1、请求资源类型不同
（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

3、 浏览器解析方式不同
（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

既然我们上面提到了link和@import导入css文件是不同的，那我们就顺便说说两者的区别，如果您已经知道，就可以不用往下看了哈

link和