CSS高度和寬度尺寸

CSS尺寸屬性

CSS的尺寸屬性允許你控制元素的高度和寬度。

該元素具有100％的寬度。

的height和width屬性用於設置一個元件的高度和寬度。

的height和width可以設置為自動（這是缺省值。也就是說，瀏覽器計算的高度和寬度），或在長度值來指定，例如px, cm等，或者以百分比(%)的包含塊的。

這個<div>元素為100像素，高度為500像素的寬度。

注意： height和width屬性不包括填充，邊框，或利潤率; 它們設置填充，邊界內的區域的高度/寬度，以及該元件的餘量！

下面的例子顯示了一個<div>與100像素，高度為500像素的寬度元素：

div {
    width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

的max-width屬性用於設置一個元件的最大寬度。

的max-width可在長度值來指定，例如px, cm等，或者以百分比(%)的包含塊的，或者設置為無（這是缺省值。也就是說，沒有最大寬度）。

與這個問題<div>當瀏覽器窗口比元素（500像素）的寬度以上發生。瀏覽器然後添加一個水平滾動條到頁面上。

使用max-width代替，在這種情況下，將提高的小窗口瀏覽器的處理。

提示：在瀏覽器窗口拖動到小於500像素寬，看到兩個div的區別！

這個<div>元素為100像素，高度為500像素的最大寬度。

注：值max-width屬性覆蓋width 。

下面的例子顯示了一個<div>與100像素，高度為500像素的最大寬度元素：

div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

設置元素的高度和寬度
這個例子演示了如何設置不同元素的高度和寬度。

設置的圖像使用百分之的高度和寬度
這個例子說明了如何使用一個百分比值以設置圖像的高度和寬度。

設置最小寬度的元素和最大寬度
這個例子演示了如何設置最小寬度和使用像素值的元素的最大寬度。

設置最小高度和元素的最大高度
這個例子演示了如何設置一個最低高度，並使用像素值的元素的最大高度。