搭建網(wǎng)站基礎(chǔ)知識(shí)：網(wǎng)站元素的高度與寬度設(shè)置

作者：佚名   時(shí)間：2014-03-19   分享到：

網(wǎng)站元素的高度與寬度設(shè)置該信息屬于搭建網(wǎng)站基礎(chǔ)
網(wǎng)站元素的高度（height）

如同想像中的那樣，height屬性控制相關(guān)標(biāo)簽顯示區(qū)域的高度。你將發(fā)現(xiàn)這個(gè)屬性最常用于圖像和表格，但它不能被用來控制其他文檔元素的高度。

height屬性的值或者是一個(gè)長度值，或者是默認(rèn)值關(guān)鍵字auto。使用auto意味著受影響的標(biāo)簽在顯示時(shí)應(yīng)該使用初始值。否則，標(biāo)簽的高度被設(shè)為希望高度。如果使用的是絕對(duì)值，高度將被設(shè)置為長度值。例如：img{height: 100px}

這將告訴瀏覽器將<img>標(biāo)簽引用的圖像顯示為100像素高。如果例用相對(duì)值，與其相對(duì)的基本大小是由瀏覽器和標(biāo)簽決定的。

當(dāng)縮放元素為一定高度時(shí)，對(duì)象的外觀也可以通過將標(biāo)簽的width屬性高為auto來保留。這樣：img{height:100px; width: auto}

這確保了圖像永遠(yuǎn)是100像素高，同時(shí)有一個(gè)合適的縮放高度。

如果想把元素的高度限制為某個(gè)范圍而不是某特定值，可以例用min-height和max-height屬性。這些屬性接受height屬性這樣的屬性，并會(huì)為元素的高度建立一個(gè)范圍。然后瀏覽器將把元素的高度調(diào)整為符合指定范圍。

這個(gè)屬性得到到了IE和其他瀏覽器的支持。但是所有瀏覽器還都不支持max-height屬性。

如果想把元素的高度限制為某個(gè)范圍而不是某特定值，可以例用min-height和max-height屬性。這些屬性接受height屬性這樣的屬性，并會(huì)為元素的高度建立一個(gè)范圍。然后瀏覽器將把元素的高度調(diào)整為符合指定范圍。 網(wǎng)站元素寬度（width）屬性

width屬性和height屬性總是同時(shí)出現(xiàn)在網(wǎng)站代碼中，它控制著相關(guān)標(biāo)簽的寬度。特別的是，它定義了元素內(nèi)容區(qū)域的寬度，你可以看到這個(gè)屬性最常用于圖像和表格，但你也可以放心地用它來控制其他元素的寬度。

width屬性的值可以是長度或百分比值，或者是關(guān)鍵了auto。值auto是默認(rèn)值，它暗示當(dāng)顯示這個(gè)標(biāo)簽時(shí)受影響的標(biāo)簽有一個(gè)必須使用的起始值。如果是一個(gè)長度值，寬度就被設(shè)置為那個(gè)長度值；百分比值表示那個(gè)寬度與包含元素寬度的百分比。例如:img{width：100px}

顯示了<img>標(biāo)簽引用的圖像給它放為100像素寬。

當(dāng)縮放元素為一個(gè)指定寬度時(shí)，如果這個(gè)標(biāo)簽的height屬性被設(shè)置為auto值，那么將保留對(duì)象的外觀縱橫比。這樣：img{width:100px; height:auto}

使得所有圖像都為100像素寬，并按比例縮放它們的高度。

如果想要將元素的寬度限制為某個(gè)范圍內(nèi)而不是一個(gè)特定的值，那么就要使用min-width和max-width屬性。這些屬性接受像width屬性這樣的值，并為元素的寬度建立了一個(gè)范圍。然后瀏覽器會(huì)調(diào)整元素的寬度，使其符合指定范圍。width屬性與margin-left和margin-right屬性相互作用來決定元素的總寬度。