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.οnlοad=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.οnlοad=js.onreadystatuschange=function(){

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

        //callback函數在此

       js.οnlοad=is.onreadystatechange=null;

    }

}

還有其他的方法,在剛剛的博客上也用詳細的講解,目前還是沒法理解,慢慢的去琢磨,去運用。

3.reflow是什麼?

reflow是迴流的意思,作用在瀏覽器渲染頁面時對元素的構建,理解是理解了,但還是不能很好的道出個所以然,所以查了很多資料,覺得別人寫的不錯,所以轉載了一下,地址:如何減少瀏覽器reflow,方便以後看。

4.other other

其他的相對而言還是比較簡單的,考的都是基礎,基礎較紮實細心的話一般都沒有問題--期待走得更遠更高!come on!




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章