前端面试笔试题
1、列出常用的块级元素和行内元素，怎么用css控制他们，以及如何合理的使用它们。
块级元素：div ul ol li dl dt dd h1 h2 h3 h4…p
行内元素：a b span img input select strong
（1）块级元素会独占一行，其宽度自动填满其父元素宽度；
行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。
（2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。
（3）行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。
注意点：
块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。
2、根据下面列出的ie6浏览器的兼容性问题，写出是有什么原因引起的以及你的解决方法。
1、产生双边距的BUG。
这个bug是ie6有名的双边距bug：同时为一个元素设置向一个方向偏移和对这个方向进行外边距设置，比如float:left,margin-left:45px;在其他浏览器下是显示正常的，在ie6下这个元素的margin-left确是==45*2=90px，
解决方法是给元素设置display:inline;
2、多出3像素问题。
当相邻的两个元素，一个是浮动的，另一个非浮动，那么在IE6 下面将会产生3像素bug。
解决的办法：给后面的元素，也设置float浮动。
3、超链接hover点击后失效。
a:hover{color:#F00;}
＜a href="?">鼠标经过时改变我的颜色＜/a>
是的，这将在所有的浏览器中都有效。但如果换成这样：
a:hover em{color:#F00;}
＜a href="?">鼠标经过时改变我的＜em>颜色＜/em>＜/a>
IE6-下什么都没有发生，我们的样式失效了。
是的，只需要再添加一个a:hover{}样式就可以解决这个问题了，里面可以是zoom, padding, margin等属性。如下：
a:hover{zoom:1;}
a:hover em{color:#F00;}
4、无法定义1px左右的高度容器。
（1）触发的条件---定义一个div,将容器的高度设置成1px
（2） 编码得到的结果---在IE6浏览器中，容器的高度不是1px 而是18px
（3）出现问题的原因---是因为IE6浏览器下默认的行高
（4）解决的方法---添加属性 line-height:1px overflow:hidden; （可有可无的 属性 zoom:1;）
5、png图片不透明。
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
6、overflow：hidden属性失效。
产生原因：当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。
解决办法：我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用position:relative;即可解决该bug
7、max-height和min-height无效。
height:auto!important;
height:500px;
min-height:500px;
3、写出一个宽300，高300的浮动容器，水平且垂直居中的方法
方法一：
.child{
width: 100px;
height: 100px;
background-color:darkcyan;
float: left;
position: absolute;//父元素相对定位
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
方法二：
.child{
width: 100px;
height: 100px;
background-color:darkcyan;
float: left;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
方法三：
.child {
width: 100px;
height: 100px;
background-color: darkcyan;
float: left;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
4、谈谈HTML5和css3的了解情况
HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
CSS3 被划分为模块。
其中最重要的 CSS3 模块包括：
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
5、html5应用缓存和常规的html浏览器缓存有何差别？
离线缓存允许我们在没网的时候通过读取离线文件进行站点的访问，而浏览器缓存即使浏览器又对资源文件的缓存也必须在有网的情况下读取缓存文件以提高文件加载速度，没网的时候依然显示网络断开的错误。
注意点：H5引入了应用程序缓存，意味着WEB应用可进行缓存，可在没有因特网时进行访问
应用程序缓存的优势：
离线缓存：用户可在离线时使用它们
速度：加载速度更快
减少服务器负载：浏览器只从服务器下载更新的或者更改过的资源
实现借助manifest文件
<html manifest="demo.appache">
6、css3实现圆角的属性：border-radius；文字阴影的属性是：text-shadow
7、 运用html5+css3写出一个点击div分别实现2d和3d的旋转的特效。
8、用js打印当前时间，格式2020年12月5日星期5
function myDate(){
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1
month = month < 10 ? '0' + month : month
var day = date.getDate()
day = day < 10 ? '0' + day : day
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var week = date.getDay()
week = arr[week]
return '今天是' + year + '年' + month + '月' + day +'日' + week
}
console.log(myDate()); //今天是2020年05月05日星期二
9、截取字符串abcdefg的efg，请用js编写。
var str='abcdefg';
alert(str.substring(4));
var str='abcdefg';
var re=/efg/;
if(re.test(str)){
var efg=str.substring(str.indexOf('efg'));
alert(efg)
}
这里用到两个截取字符串的方法：
indexOf()：方法可返回某个指定的字符串值在字符串中首次出现的位置。
substring：如果只有一个参数，则是从什么位置开始，到结束
10、用js实现鼠标移到div元素上，这个元素在2秒后向下移动20px
<script language="javascript">
var ismove=false;
function $(val)
{
return document.getElementById(val);
}
$("layer1").onmousemove=function ()
{
if(!ismove)
{
window.setTimeout("$('layer1').style.top='20px'",2000);
ismove=true;
}
}
</script>
13、怎样添加、移动、复制、创建、查找节点。
appendChild() //添加
removeChild() //移除
replaceChild() //替换
cloneNode() //复制
document.createElement() //创建一个具体的元素
document.getElementsByTagName("") //通过标签名称
document.getElementsByName("") //通过元素的Name属性的值
document.getElementById("") //通过元素Id，唯一性
document.getElementsByClassName(""); //通过类查找
document.querySelector("")
14、ajax是什么？ajax的交互模型？同步和异步的区别？如何解决跨域的问题？
Ajax全称为AsynchronousJavaScript and XML”（异步JavaScript和XML），俗称的话说就是一种无需刷新网页的情况下,能够更新部分网页技术
ajax的交互模型
先是通过XMLHTTPReuqest发送请求信息 —— 服务器处理 —— JavaScript接收相应
1--启动 获取XMlHttpRequest对象
2--open 打开url通道，并设置异步传输
3--send 发送数据到服务器
4--服务器接受数据并处理，处理完成后返回结果
5--客户端接收服务器端返回
同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执 行完毕后才会继续运行其他代码页面假死状态解除。
异步，async默认的设置值为true，这种情况为异步方式，就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程
如何解决跨域的问题？
JSONP
跨域资源共享CORS
document.domain+iframe（适用于主域名相同的情况）
window.name + iframe
HTML5中的postMessage（适用于两个iframe或两个页面之间）
15、手机网站和pc端网站有什么区别？
第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。
第二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。
第三： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。
第四： 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。
第五： 微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon等图标的配置，这些还是要会的。
第六： 百度地图的一些API接口，也得去实现一下，这些对于移动端来说，LBS是一个非常重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。
第七： CSS3的动画一定要比较熟练，这在移动端用的还是比较多的。
第八： 一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。
而未压缩的jquery是262kb， 压缩的jquey是83kb，可见两者的差别之大。
第九：最好能掌握一套完整的前端开发架构，比如模块化、打包、压缩、缓存、有条件的还可以做一下自动化测试等等，比较好用的有fis，另外，想要快速提升自己的前端开发技术，钻研前端架构这块是一个非常好的方向。
第十： 性能优化，包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需要特别注意。
第十一： 比如在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，所以可以使用hammer-time.js来移除这300ms的延迟。
本文地址：https://blog.csdn.net/st521314mt/article/details/107385079