CSS寬度、高度屬性詳解-css教學-PHP中文網

首頁

web前端

css教學

CSS寬度、高度屬性詳解

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 02, 2022 pm 05:44 PM

css

本篇文章為大家帶來了關於css的相關知識，其中主要介紹了關於設定元素高度和寬度屬性的相關問題，height和width屬性用於設定元素的高度和寬度，height和width屬性不包括內邊距、邊框或外邊距。下面一起來看一下，希望對大家有幫助。 .

CSS寬度、高度屬性詳解

（學習影片分享：css影片教學、html影片教學）

CSS 設定高度和寬度

height和width屬性用於設定元素的高度和寬度。
height和width屬性不包括內邊距、邊框或外邊距。它設定的是元素內邊距、邊框以及外邊距內的區域的高度或寬度。

CSS 高度和寬度值

#height 和width 屬性可設定如下值：

auto - 預設。瀏覽器計算高度和寬度。
length - 以 px、cm 等定義高度/寬度。
% - 以包含區塊的百分比定義高度/寬度。
initial - 將高度/寬度設為預設值。
inherit - 從其父值繼承高度/寬度。

實例如下：

設定

元素的高度與寬度：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>
<h1 id="设置元素的高度和宽度">设置元素的高度和宽度</h1>
<p>这个 div 元素的高度为 200 像素，宽度为 50%：</p>
<div></div>
</body>
</html>

輸出結果：

CSS寬度、高度屬性詳解

記住，height 和 width 屬性不包含內邊距、邊框或外邊距！它們設定的是元素的內邊距、邊框和外邊距內的區域的高度/寬度！

設定 max-width

max-width 屬性用來設定元素的最大寬度。

可以用長度值（例如px、cm 等）或包含區塊的百分比（％）來指定max-width（最大寬度），也可以將其設為none（預設值。表示沒有最大寬度）。

當瀏覽器視窗小於元素的寬度（500px）時，會發生之前那個

的問題。然後，瀏覽器會將水平捲軸新增至頁面。

在這種情況下，使用 max-width 能夠改善瀏覽器對小視窗的處理。

提示：將瀏覽器視窗拖曳到小於500px的寬度，以查看兩個 div 之間的差異！

註解：max-width 屬性的值將會覆寫 width（寬度）。

範例如下：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>
<h1 id="设置元素的最大宽度">设置元素的最大宽度</h1>
<p>这个 div 元素的高度为 100 像素，最大宽度为 500 像素：</p>
<div></div>
<p>请调整浏览器窗口来查看效果。</p>
</body>
</html>

輸出結果：

CSS寬度、高度屬性詳解