設定html5尺寸的方法

下面我們給大家介紹一下html5尺寸吧!希望大家可以在這裡學習!

HTML

設定尺寸

定位的祖父元素

沒有定位的父元素

設定尺寸的浮動元素

設定尺寸的靜態元素

.selectTdClass{background-color:#edf5fa !important}table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}table{margin-bottom:10px;border-collapse:collapse;display:table;}td,th{padding: 5px 10px;border: 1px solid #DDD;}caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}th{border-top:1px solid #BBB;background-color:#F7F7F7;}table tr.firstRow th{border-top-width:2px;}.ue-table-interlace-color-single{ background-color: #fcfcfc; } .ue-table-interlace-color-double{ background-color: #f7faff; }td p{margin:0;padding:0;}

設定尺寸的表格

CSS

*.z { padding:5px; border:5px solid black; }

#float { width:150px; height:50px; }

#static { width:150px; height:50px; }

#table { width:150px; height:50px; }

#abs { width:150px; height:50px; }

#star { width:26px; height:26px; }

/* 隱去了不必要的規則 */

問題

想為元素的高和/或寬設定一個尺寸或者比例(是相對於它容器的高與寬的比例)。

解決方案

為你選擇的類和ID賦予以下樣式。

n  使用height為元素的高設定一個值或者相對於容器高的百分比。

n  使用width為元素的寬設定一個值或者相對於容器寬的百分比。

n  width與height是獨立設置的。換句話說，你可以單獨設置高，單獨設置寬，或者兩者都設置。

n  如果你不想固定高或寬，可以把width或height設成auto.auto是寬和高的默認值。

模式

SELECTOR { width:+VALUE; height:+VALUE; }

適用范圍

此模式可應用於靜態內聯元素之外的所有元素。

解釋

帶有尺寸的元素必須把width和height設成一個值或百分比。100%通常用於拉伸一個元素，但是其他的百分比通常令元素的尺寸小於或大於它的容器。

height和width用於定義元素的內盒。圍繞著內盒的是內邊距。內邊距外是邊框。邊框外是外邊距。外邊距的外圍才是外盒。內邊距、邊框和內邊距都會影響外盒的大小，但是不能影響由height和width所確定的內盒大小。負的外邊距會導致鄰近元素的重疊，但是不能影響它的height和width.

表格是一個例外，因為它的height和width定義的是表格邊框外的尺寸。這導致表格所定義的高和寬是包括了邊框和內邊距的。這就是為什麼例子中的表格要小於其他元素。

如果浮動元素設定了尺寸，它會改變排列的順序。width會改變浮動內容的左右邊界，影響相鄰內容和浮動元素的定位。height會把鄰近浮動元素擠下去或拉上來。

當靜態塊狀元素被設定尺寸後，它會改變排列的順序。height會把下一個塊狀元素擠下去或拉上來。height會增加或減小父元素的高度(除非父元素已被設定了尺寸)。width會改變內容排列的左右邊界。

當絕對定位元素被設定尺寸後，它不會改變原始排列的順序，也不會改變其他元素的位置。寬度和高度中的百分比是相對於離它定位最近的祖先的寬度和高度。

當為一個可替代元素(例如圖片)設定尺寸後，浏覽器會把它調整到設定的值。如果想用其原來的尺寸，要把height和width設置為auto.

以上就是我們給大家介紹的html5尺寸的內容了。希望大家繼續個在我們的網站!