1. 程式人生 > >web前端面試之浮動(碼動未來)

web前端面試之浮動(碼動未來)

web前端面試之浮動(碼動未來)
1.3.1、iframe有那些缺點?
iframe會阻塞主頁面的Onload事件;
搜尋引擎的檢索程式無法解讀這種頁面,不利於SEO;
iframe和主頁面共享連線池,而瀏覽器對相同域的連線有限制,所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript動態給iframe新增src屬性值,這樣可以繞開以上兩個問題。

1.3.2、Label的作用是什麼?是怎麼用的?
label標籤來定義表單控制間的關係,當用戶選擇該標籤時,瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。


<input type=“text“name=“Name” id=“Name”/>

1.3.3、HTML5的form如何關閉自動完成功能?
給不想要提示的 form 或某個 input 設定為 autocomplete=off。

1.3.4、title與h1的區別、b與strong的區別、i與em的區別?
title屬性沒有明確意義只表示是個標題,H1則表示層次明確的標題,對頁面資訊的抓取也有很大的影響;
strong是標明重點內容,有語氣加強的含義,使用閱讀裝置閱讀網路時:會重讀,而是展示強調內容。
i內容展示為斜體,em表示強調的文字;
Physical Style Elements – 自然樣式標籤
b, i, u, s, pre
Semantic Style Elements – 語義樣式標籤
strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 如果不能確定時首選使用自然樣式標籤。

1.3.5、解釋下浮動和它的工作原理。
關於浮動我們需要了解,浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。要想使元素浮動,必須為元素設定一個寬度(width)。雖然浮動元素不是文件流之中,但是它浮動後所處的位置依然是在浮動之前的水平方向上。由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣,下面的元素填補原來的位置。有些元素會在浮動元素的下方,但是這些元素的內容並不一定會被浮動的元素所遮蓋,對內聯元素進行定位時,這些元素會考慮浮動元素的邊界,會圍繞著浮動元素放置。也可以把浮動元素想象成是被塊元素忽略的元素,而內聯元素會關注浮動元素的。

1.3.6、列舉不同的清除浮動的技巧,並指出它們各自適用的使用場景。
1.使用空標籤清除浮動。這種方法是在所有浮動標籤後面新增一個空標籤定義css clear:both.弊端就是增加了無意義標籤。
2.使用overflow。給包含浮動元素的父標籤新增css屬性overflow:auto;zoom:1;zoom:1用於相容IE6。
3.使用after偽物件清除浮動。該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。
一、該方法中必須為需要清除浮動元素的偽物件中設定height:0,否則該元素會比實際高出若干畫素;
二、content屬性是必須的,但其值可以為空,content屬性的值設為”.”,空亦是可以的。
4.浮動外部元素
此三種方法各有利弊,使用時應擇優選擇,比較之下第二種方法更為可取。
QQ技術交流群:815302226

在這裡插入圖片描述