言

在響應式布局逐漸成為主流的今天，網(wǎng)頁或者app的流式布局已經(jīng)不算是一個新鮮的詞匯了。今天我要講的一個內容也是跟頁面流式布局有關，如何讓你的網(wǎng)頁實現(xiàn)完美的縮放？

網(wǎng)頁布局

我們可以很快速的寫出一個響應式布局的頁面，首先看一下效果圖。

網(wǎng)頁布局

其中html部分的代碼如下：

html部分代碼

css中的item代碼為：

css代碼

通過以上代碼，完成上述的流式布局后，在我們改變?yōu)g覽器窗口大小時，div也會隨之進行縮放。

問題

But，你以為這就是我們想要的結果嗎？

當然不是！在改變?yōu)g覽器窗口大小時，我們發(fā)現(xiàn)雖然div的寬度是進行了縮放，但是高度卻沒變，因此div的寬高比并未保持原始比例，我們可以看下以下的效果。

縮放后寬高比

從上圖中可以很容易看出，縮放后的div寬高比比之前小很多，這并不是我們想要的結果。

我們需要達到的效果是在改變?yōu)g覽器窗口大小時，div也會隨之進行等比例的縮放。

實現(xiàn)辦法

首先，可以使用Javascript代碼去實現(xiàn)，這是沒有問題的。但是綁定Javascript的onresize事件，在拖拽時可能會出卡頓現(xiàn)象，體驗不是很好。

接下來我們通過CSS來實現(xiàn)以上的效果。

使用的核心屬性是我們平時并不太注意的padding-bottom。

padding-bottom有一個很容易讓人忽略的特性是，當取值為百分比形式時，其百分比的基數(shù)是父元素的寬度，而不是高度。

因此我們可以在不用給父元素設置高度的時候，就可以通過padding-bottom屬性確定當前元素的高度。我們的做法如下。

1. 將元素的height屬性設為0，通過padding-bottom屬性確定元素高度。

2. 設置合理的padding-bottom值，例如上述的例子中，在寬度為21%時，如果需要高度是寬度的1.62倍，我們可以將padding-bottom取值為34%

修改后的CSS代碼如下。

修改后的CSS

修改后，我們再次調整瀏覽器窗口的大小，就會發(fā)現(xiàn)div是等比例的進行縮放，完美達到了我們的要求。

修改后等比例縮放

疑問

在這里，可能會有人有疑問如果設置overflow:hidden;那么里面的文字會不會因為超過height，就會被隱藏了？

答案是不會的，根據(jù)CSS2.1的規(guī)范，overflow只會對處于padding外面的內容生效，即只有超出了 padding區(qū)域的內容才會被overflow屬性隱藏掉。而在設置padding-bottom后，實際已經(jīng)決定了元素的height屬性，因此overflow:hidden;不會生效。

總結

今天這篇文章主要講解了利用CSS完成頁面等比例縮放的最簡單方式，你學會了嗎？

年來，從事JavaScript的程序員越來越多，JavaScript的曝光率也越來越高，如果你想轉行試試JavaScript，不妨收下這份面試題及答案，沒準用得上。當然，如果針對這些問題，你有更棒的答案，歡迎移步至評論區(qū)。

1、什么是JavaScript？（這是基本題，對很多程序員來說也是送分題！）

JavaScript是客戶端和服務器端腳本語言，可以插入到HTML頁面中，并且是目前較熱門的Web開發(fā)語言。同時，JavaScript也是面向對象編程語言。

類似的基本題目還包括：JavaScript都有哪些類型?JavaScript是誰發(fā)明的？......

2、列舉Java和JavaScript之間的區(qū)別？

Java是一門十分完整、成熟的編程語言。相比之下，JavaScript是一個可以被引入HTML頁面的編程語言。這兩種語言并不完全相互依賴，而是針對不同的意圖而設計的。 Java是一種面向對象編程（OOPS）或結構化編程語言，類似的如C ++或C，而JavaScript是客戶端腳本語言，它被稱為非結構化編程。

3. JavaScript和ASP腳本相比，哪個更快？

JavaScript更快。JavaScript是一種客戶端語言，因此它不需要Web服務器的協(xié)助來執(zhí)行。另一方面，ASP是服務器端語言，因此總是比JavaScript慢。值得注意的是，Javascript現(xiàn)在也可用于服務器端語言（nodejs）。

4、什么是負無窮大？

負無窮大是JavaScript中的一個數(shù)字，可以通過將負數(shù)除以零來得到。

5、如何將JavaScript代碼分解成幾行嗎？

在字符串語句中可以通過在第一行末尾使用反斜杠“\”來完成

例：document.write("This is \a program");

如果不是在字符串語句中更改為新行，那么javaScript會忽略行中的斷點。

例：

var x=1, y=2,

z=

x+y;

上面的代碼是完美的，但并不建議這樣做，因為阻礙了調試。

6、什么是未聲明和未定義的變量？

未聲明的變量是程序中不存在且未聲明的變量。如果程序嘗試讀取未聲明變量的值，則會遇到運行時錯誤。未定義的變量是在程序中聲明但尚未給出任何值的變量。如果程序嘗試讀取未定義變量的值，則返回未定義的值。

7、如何編寫可動態(tài)添加新元素的代碼？

8、什么是全局變量？這些變量如何聲明，使用全局變量有哪些問題？

全局變量是整個代碼長度可用的變量，也就是說這些變量沒有任何作用域。var關鍵字用于聲明局部變量或對象。如果省略var關鍵字，則聲明一個全局變量。

例：// Declare a global globalVariable = “Test”;

使用全局變量所面臨的問題是本地和全局變量名稱的沖突。此外，很難調試和測試依賴于全局變量的代碼。

9、解釋JavaScript中定時器的工作？如果有，也可以說明使用定時器的缺點？

定時器用于在設定的時間執(zhí)行一段代碼，或者在給定的時間間隔內重復該代碼。這通過使用函數(shù)setTimeout，setInterval和clearInterval來完成。

• setTimeout（function，delay）函數(shù)用于啟動在所述延遲之后調用特定功能的定時器。

• setInterval（function，delay）函數(shù)用于在提到的延遲中重復執(zhí)行給定的功能，只有在取消時才停止。

• clearInterval（id）函數(shù)指示定時器停止。

定時器在一個線程內運行，因此事件可能需要排隊等待執(zhí)行。

10、ViewState和SessionState有什么區(qū)別？

“ViewState”特定于會話中的頁面。

“SessionState”特定于可在Web應用程序中的所有頁面上訪問的用戶特定數(shù)據(jù)。

11、什么是===運算符？

===被稱為嚴格等式運算符，當兩個操作數(shù)具有相同的值而沒有任何類型轉換時，該運算符返回true。

12、說明如何使用JavaScript提交表單？

要使用JavaScript提交表單，請使用

document.form [0] .submit（）;

document.form [0] .submit（）

13、元素的樣式/類如何改變？

可以通過以下方式完成：

document.getElementById(“myText”).style.fontSize = “20?;

或

document.getElementById(“myText”).className = “anyclass”;

14、JavaScript中的循環(huán)結構都有什么？

For、While、do-while loops

15、如何在JavaScript中將base字符串轉換為integer？

parseInt() 函數(shù)解析一個字符串參數(shù)，并返回一個指定基數(shù)的整數(shù)。parseInt（）將要轉換的字符串作為其第一個參數(shù)，第二個參數(shù)是給定字符串的基礎。

為了將4F（基數(shù)16）轉換為整數(shù)，所使用的代碼是 ：parseInt ("4F", 16);

16、說明“==”和“===”之間的區(qū)別？

“==”僅檢查值相等，而“===”是一個更嚴格的等式判定，如果兩個變量的值或類型不同，則返回false。

17、3 + 2 +“7”的結果是什么？

由于3和2是整數(shù)，它們將直接相加。由于7是一個字符串，它將會被直接連接，所以結果將是57。

18、說明如何檢測客戶端機器上的操作系統(tǒng)？

為了檢測客戶端機器上的操作系統(tǒng)，應使用navigator.appVersion字符串（屬性）。

19、Javascript中的NULL是什么意思？

NULL用于表示無值或無對象。它意味著沒有對象或空字符串，沒有有效的布爾值，沒有數(shù)值和數(shù)組對象。

20、delete操作符的功能是什么？

delete操作符用于刪除程序中的所有變量或對象，但不能刪除使用VAR關鍵字聲明的變量。

21、JavaScript中有哪些類型的彈出框？

Alert、Confirm and、Prompt

22、Void（0）怎么用？

• Void（0）用于防止頁面刷新，并在調用時傳遞參數(shù)“zero”。

• Void（0）用于調用另一種方法而不刷新頁面。

23、如何強制頁面加載JavaScript中的其他頁面？

必須插入以下代碼才能達到預期效果：

24、escape字符是用來做什么的？

使用特殊字符（如單引號，雙引號，撇號和＆符號）時，將使用轉義字符（反斜杠）。在字符前放置反斜杠，使其顯示。

例：

25、什么是JavaScript Cookie？

Cookie是用來存儲計算機中的小型測試文件，當用戶訪問網(wǎng)站以存儲他們需要的信息時，它將被創(chuàng)建。

26、解釋JavaScript中的pop（）方法？

pop（）方法與shift（）方法類似，但不同之處在于Shift方法在數(shù)組的開頭工作。此外，pop（）方法將最后一個元素從給定的數(shù)組中取出并返回。然后改變被調用的數(shù)組。

例：

var cloths = [“Shirt”, “Pant”, “TShirt”];

cloths.pop();

//Now cloth becomes Shirt,Pant

27、在JavaScript中使用innerHTML的缺點是什么？

如果在JavaScript中使用innerHTML，缺點是：內容隨處可見；不能像“追加到innerHTML”一樣使用；即使你使用+ = like“innerHTML = innerHTML +'html'”舊的內容仍然會被html替換；整個innerHTML內容被重新解析并構建成元素，因此它的速度要慢得多；innerHTML不提供驗證，因此我們可能會在文檔中插入有效的和破壞性的HTML并將其中斷。

28、break和continue語句的作用？

• Break語句從當前循環(huán)中退出。

• continue語句繼續(xù)下一個循環(huán)語句。

29、在JavaScript中，dataypes的兩個基本組是什么？

• Primitive

• Reference types

原始類型是數(shù)字和布爾數(shù)據(jù)類型。引用類型是更復雜的類型，如字符串和日期。

30、如何創(chuàng)建通用對象？

通用對象可以創(chuàng)建為：

var I = new object();

31、operator類型用來做什么？

'Typeof'是一個運算符，用于返回變量類型的字符串描述。

32、哪些關鍵字用于處理異常？

try... Catch-finally用于處理JavaScript中的異常。

33、JavaScript中不同類型的錯誤有幾種？

有三種類型的錯誤：

• Load time errors：該錯誤發(fā)生于加載網(wǎng)頁時，例如出現(xiàn)語法錯誤等狀況，稱為加載時間錯誤，并且會動態(tài)生成錯誤。

• Run time errors：由于在HTML語言中濫用命令而導致的錯誤。

• Logical Errors：這是由于在具有不同操作的函數(shù)上執(zhí)行了錯誤邏輯而發(fā)生的錯誤。

34、在JavaScript中使用的Push方法是什么？

push方法用于將一個或多個元素添加或附加到數(shù)組的末尾。使用這種方法，可以通過傳遞多個參數(shù)來附加多個元素。

35、什么是JavaScript中的unshift方法？

Unshift方法就像在數(shù)組開頭工作的push方法。該方法用于將一個或多個元素添加到數(shù)組的開頭。

36、對象屬性如何分配？

屬性按以下方式分配給對象：

obj["class"] = 12;

或

obj.class = 12;

37、獲得CheckBox狀態(tài)的方式是什么？

alert（document.getElementById（'checkbox1'）。checked）;

如果CheckBox被檢查，此警報將返回TRUE。

38、解釋window.onload和onDocumentReady？

在載入頁面的所有信息之前，不運行onload函數(shù)。這導致在執(zhí)行任何代碼之前會出現(xiàn)延遲。

onDocumentReady在加載DOM之后加載代碼。這允許早期的代碼操縱。

39、你將如何解釋JavaScript中的閉包？ 什么時候使用？

Closure是與函數(shù)返回時保留在內存中的函數(shù)相關的本地聲明變量。

例如：

40、一個值如何附加到數(shù)組？

可以以給定的方式將值附加到數(shù)組：

arr [arr.length] = value;

41、解釋for-in循環(huán)？

for-in循環(huán)用于循環(huán)對象的屬性。

for-in循環(huán)的語法是：

在每次循環(huán)中，來自對象的一個屬性與變量名相關聯(lián)，循環(huán)繼續(xù)，直到對象的所有屬性都被耗盡。

42、描述JavaScript中的匿名函數(shù)？

被聲明為沒有任何命名標識符的函數(shù)被稱為匿名函數(shù)。一般來說，匿名函數(shù)在聲明后無法訪問。

匿名函數(shù)聲明：

43、.call（）和.apply（）之間有什么區(qū)別？

函數(shù).call（）和.apply（）在使用上非常相似，只是有一點區(qū)別。當程序員知道函數(shù)參數(shù)的編號時，使用.call（），因為它們必須在調用語句中被提及為參數(shù)。另一方面，當不知道數(shù)字時使用.apply（）,函數(shù).apply（）期望參數(shù)為數(shù)組。

.call（）和.apply（）之間的基本區(qū)別在于將參數(shù)傳遞給函數(shù)。它們的用法可以通過給定的例子進行說明。

44、定義事件冒泡？

JavaScript允許DOM元素嵌套在一起。在這種情況下，如果單擊子級的處理程序，父級的處理程序也將執(zhí)行同樣的工作。

45、什么樣的布爾運算符可以在JavaScript中使用？

“And”運算符（&&），'Or'運算符（||）和'Not'運算符（！）可以在JavaScript中使用。

*運算符沒有括號。

46、一個特定的框架如何使用JavaScript中的超鏈接定位？

可以通過使用“target”屬性在超鏈接中包含所需幀的名稱來實現(xiàn)。

<a href=”newpage.htm” target=”newframe”>>New Page</a>

47、在web-garden和web-farm之間有何不同？

web-garden和web-farm都是網(wǎng)絡托管系統(tǒng)。唯一的區(qū)別是web-garden是在單個服務器中包含許多處理器的設置，而web-farm是使用多個服務器的較大設置。

48、如何分配對象屬性？

將屬性分配給對象的方式與賦值給變量值相同。例如，表單對象的操作值以下列方式分配為“‘submit”：Document.form.action =“submit”

49、在JavaScript中讀取和寫入文件的方法是什么？

可以通過使用JavaScript擴展（從JavaScript編輯器運行），打開文件的示例來完成：

fh = fopen(getScriptPath(), 0);

50、在JavaScript中如何使用DOM？

DOM代表文檔對象模型，并且負責文檔中各種對象的相互交互。DOM是開發(fā)網(wǎng)頁所必需的，其中包括諸如段落，鏈接等對象。可以操作這些對象以包括添加或刪除等操作，DOM還需要向網(wǎng)頁添加額外的功能。除此之外，API的使用比其他更有優(yōu)勢。

51、JavaScript中如何使用事件處理程序？

事件是由用戶生成活動（例如單擊鏈接或填寫表單）導致的操作。需要一個事件處理程序來管理所有這些事件的正確執(zhí)行。事件處理程序是對象的額外屬性。此屬性包括事件的名稱以及事件發(fā)生時采取的操作。

52、解釋延遲腳本在JavaScript中的作用？

默認情況下，在頁面加載期間，HTML代碼的解析將暫停，直到腳本停止執(zhí)行。這意味著，如果服務器速度較慢或者腳本特別沉重，則會導致網(wǎng)頁延遲。在使用Deferred時，腳本會延遲執(zhí)行直到HTML解析器運行。這減少了網(wǎng)頁加載時間，并且它們的顯示速度更快。

53、JavaScript中的各種功能組件是什么？

JavaScript中的不同功能組件是：

• First-class函數(shù)：JavaScript中的函數(shù)被用作第一類對象。這通常意味著這些函數(shù)可以作為參數(shù)傳遞給其他函數(shù)，作為其他函數(shù)的值返回，分配給變量，也可以存儲在數(shù)據(jù)結構中。

• 嵌套函數(shù)：在其他函數(shù)中定義的函數(shù)稱為嵌套函數(shù)。

54、解釋unshift（）方法？

該方法在數(shù)組啟動時起作用，與push（）不同。 它將所需數(shù)量的元素添加到數(shù)組的頂部。例如：

輸出如下所示：

[" joseph "," Jane ", " charlie ", " john "]

55、decodeURI（）和encodeURI（）是什么？

EncodeURl（）用于將URL轉換為十六進制編碼。而DecodeURI（）用于將編碼的URL轉換回正常。

56、為什么不建議在JavaScript中使用innerHTML？

innerHTML內容每次刷新，因此很慢。 在innerHTML中沒有驗證的余地，因此，更容易在文檔中插入錯誤代碼，從而使網(wǎng)頁不穩(wěn)定。

57、如何在不支持JavaScript的舊瀏覽器中隱藏JavaScript代碼？

• 在<script>標簽之后的代碼中添加“<！ - ”，不帶引號。

• 在<script>標簽之前添加“// - >”代碼中沒有引號。

• 舊瀏覽器現(xiàn)在將JavaScript代碼視為一個長的HTML注釋。而支持JavaScript的瀏覽器則將“<！ - ”和“// - >”作為一行注釋。