YY前端笔试总结

1.一个元素float以后,为什么要清除浮动?清除浮动的方法有哪些?

浮动确实是经常用,也知道清除浮动的必要性,但要我道个所以然,还是得绞尽脑汁。我个人的理解是,当一个元素float以后,就脱离正常的文档流,高度塌陷,也就是浮动元素原来的占位空间就消失了,那么紧跟着的元素的宽度就会占据浮动元素的位置,好像浮动元素不存在似的。那么疑问就来了,如果紧跟着的元素没有任何的清除浮动行为,但是感觉好像认的浮动元素一样,给他让出空间,请看:

<span style="font-size:18px;"><div style="float:left;with:100px;height:100px;background:yellow;">float content</div>
<div class="normal" style="background:red;height:800px;">normal content</div></span>

效果:

其实,经过求证.normal元素并没有认得float元素,他的宽度其实有延伸到float那边,只是float元素覆盖在他的上面,即z-index比较高,不信,你看一下效果(.class{margin-left:-10px;}):

不过,.normal元素的text文本倒像是认得float元素一样,这个不知道该怎么解释,也许是w3c的规定吧?所以大概了解float的工作原理以后,我们就知道该如何去清除浮动了。

(1)父级元素清除浮动:利用定高来清除浮动,不过这个方法的唯一确定是父级元素必须是定高布局。

(2)借用伪元素来清除浮动,在父级元素上使用,.normal:after{content:"";clear:both;display:inline-block||block;} .normal{_zoom:1//触发haslayout}

(3)最方便也最常用的是在紧跟的浮动元素后面用clear:both;

(4)导航栏浮动以后ul元素上经常会用overflow:hidden来清除浮动;

(5)bootstrap经常用的是添加空白元素<div class="clearfix"></div>  .clearfix{clear:both;}

以上就是我能想到的清除浮动的方法。

2.Javascript跨域访问问题

在实际项目中没有机会去领略Javascript跨域访问问题,但倒是听说过。Javascript出于安全考虑以及同源策略的限制,不允许跨域调用其他页面的对象,但是程序员是万能的,总想破不能为万能,因此就有了跨域访问的技术,这样不久减少代码的开发而且还实现代码共享,何乐而不为呢?so,赶紧去补及一下有关的实现技术。

参考:JavaScript跨域总结与解决办法,认真研读以后,对跨域有了进一步的了解,希望尽快用得上这伟大的技术。

跨域技术分不同的场合不同的方法:

(1)主域相同但是子域不同时,采取document.domain+iframe的设置:

域名一:http://www.a.com/a.html  域名二:http://script.a.com/b.html(主域为a.com,二级域为a.com前面的;ps:顺便弄清一下主域和二级甚至多级域的概念,例如:baidu.com是主域,那么*.baidu.com都是二级域。。。不懂继续度娘去)

在www.a.com域名下的a.html下设置代码:

document.domain=a.com;

var iframe=document.createElement("iframe");

iframe.src="http://script.a.com/b.html";

iframe.style.display="none";

document.body.appendChild("iframe");

window.onload=function(){

var doc=iframe.documentContent||iframe.contentWindow.document;

alert(doc.document.getElementsByTagName(‘h1‘)[0].lastChild.nodeValue);

}

另外在script.a.com的b.html上也要加上document.domain=a.com;如果两者之间没有任何挂钩以及约定的话,那后果不堪设想。

这个方法简单是简单,但也会带来一些问题。试想,如果script.a.html受到攻击或是安全上的问题,那同主域的其他域名也会引起安全上的漏洞。还有一个方面是如果页面中引入过多的iframe框架的话,页面会很难控制。

(2)这个方法是最熟悉的,动态创建script标签,然后再用回调函数去处理;

动态创建script以及相关操作就不用详说了,有趣的是判断节点是否加载完毕,不是用window.onload而是js.onload

js.onload=js.onreadystatuschange=function(){

if(!this.readyState||this.readyStatu===‘loaded‘||this.readyState===‘complete‘){

//callback函数在此

js.onload=is.onreadystatechange=null;

}

}

还有其他的方法,在刚刚的博客上也用详细的讲解,目前还是没法理解,慢慢的去琢磨,去运用。

3.reflow是什么?

reflow是回流的意思,作用在浏览器渲染页面时对元素的构建,理解是理解了,但还是不能很好的道出个所以然,所以查了很多资料,觉得别人写的不错,所以转载了一下,地址:如何减少浏览器reflow,方便以后看。

4.other other

其他的相对而言还是比较简单的,考的都是基础,基础较扎实细心的话一般都没有问题--期待走得更远更高!come on!

时间: 2024-10-29 19:07:52

YY前端笔试总结的相关文章

前端笔试总结

一.HTML和CSS 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? <!DOCTYPE> 声明位于文档中的最

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 Hello,移动WEB Linux权限管理之特殊权限 Android高级特效-索引 原文出处: Ico_Coco 的博客(@CHoK__Coco_mAm)   欢迎分享原创到伯乐头条 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习

【转】BAT及各大互联网公司2014前端笔试面试题:JavaScript篇

原文转自:http://blog.jobbole.com/78738/ 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第二篇:BAT及各大互联网公司2014前端笔试面试题–Html,Css篇 前面几题是会很基础,越下越有深度. 初级Javascript: 1.Jav

[转]关于Web前端开发,附:(百度web前端笔试面试题目)

关于Web前端及百度web前端笔试面试题目 随着各大互联网公司设立了Web前端开发工程师.设计工程师等职位,web前端越来越得到互联网企业的认可.而且其重视程度与地位也随着浏览器 端的富客户端的体现而日益提高. 眼前对HTML5的未来和走向,业内的预测是会和Flash.Silverlight等相结合,从而取代传统的客户端应用程序.而实现这个目标的客户端核 心工作是有Web前端工程师来完成的. 从另一个角度,对于web产品来说,交互和用户体验是产品的第一价值,这部分价值的体现就是在web前端.可以

面试题2:BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 S

BAT及各大互联网公司2014前端笔试面试题--JavaScript篇(昨天某个群友表示写的简单了点,然后我无情的把他的抄了一遍)

(某个群友)http://www.cnblogs.com/coco1s/ 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 附上第二篇:BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它

(转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什

记一次糟心的前端笔试(1)

似乎一直以来,自己的笔试成绩都不怎么样.自己算是完全自学的前端,各种知识基本上都是从互联网中拼凑而来,也完全不知道这些知识的可信度有多少.毕业这一路下来的打击基本把我的自信都磨光了.自己学会了用质疑的眼光去看待事物,同时也明白了一个道理,当一件事情涉及到除你之外的任何人时,就不要想当然.我各种观念算是崩溃了,但是自己就是不愿服输.世人总是看结果的,而我现在正是这样一个失败者. 败就败了,没什么好怨的,总结失败,下次再有人这样问就糊他一脸. 这次笔试事先也大概了解了一下,都是一些比较简单的题目.粗