CSS寬度、高度屬性詳解
- WBOY原創
- 2022-08-02 17:44:553939瀏覽
本篇文章為大家帶來了關於css的相關知識，其中主要介紹了關於設定元素高度和寬度屬性的相關問題，height和width屬性用於設定元素的高度和寬度，height和width屬性不包括內邊距、邊框或外邊距。下面一起來看一下，希望對大家有幫助。 .
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>设置元素的高度和宽度</h1>
<p>这个 div 元素的高度为 200 像素，宽度为 50%：</p>
<div></div>
</body>
</html>輸出結果：
記住，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>设置元素的最大宽度</h1>
<p>这个 div 元素的高度为 100 像素，最大宽度为 500 像素：</p>
<div></div>
<p>请调整浏览器窗口来查看效果。</p>
</body>
</html>輸出結果：
css尺寸屬性：
以上是CSS寬度、高度屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn