CSS height
和 width
属性用于设置 元素的高度和宽度。
CSS max-width
属性用于设置元素的最大宽度。
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 100%;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS height and width properties</h2>
<div>This div element has a height of 50 pixels and a width of 100%.</div>
</body>
</html>
height
和 width
属性用于设置 元素的高度和宽度。
高度和宽度属性不包括填充、边框或边距。 它设置内边距、边框和边距内区域的高度/宽度 元素。
height
和 width
属性 可能有以下值:
auto
- 这是默认值。浏览器 计算高度和宽度
length
- 定义高度/宽度,单位为 px、cm、 ETC。
%
- 定义高度/宽度的百分比 包含块
initial
- 将高度/宽度设置为其 默认值
继承
- 高度/宽度将为 从其父值继承
设置 <div> 元素的高度和宽度:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>
</body>
</html>
设置另一个 <div> 元素的高度和宽度:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 100px and a width of 500px.</div>
</body>
</html>
注意:请记住,height
和 width
属性不包括内边距、边框, 或边距!它们设置内边距、边框内区域的高度/宽度, 和元素的边距!
max-width
属性用于设置元素的最大宽度。
max-width
可以用长度值来指定,例如 px、cm 等,或者以百分比 (%) 的形式指定 包含块,或设置为无(这是 默认。意味着没有最大宽度)。
当浏览器窗口的宽度小于 元素(500px)。然后浏览器向页面添加水平滚动条。
在这种情况下,使用 max-width
可以改善浏览器对小窗口的处理能力。
提示:将浏览器窗口拖动到小于 500px 宽,以查看之间的差异 两个div!
注意:如果您出于某种原因同时使用 width
属性和 同一元素上的 max-width
属性,以及该属性的值 width
属性大于 max-width
属性;这 将使用 max-width
属性(并且 width
属性将被忽略)。
这个 <div> 元素的高度为 100 像素, 最大宽度为 500 像素:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
设置元素的高度和宽度
<!DOCTYPE html>
<html>
<head>
<style>
img.one {
height: auto;
}
img.two {
height: 200px;
width: 200px;
}
div.three {
height: 300px;
width: 300px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of elements</h2>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (200x200 pixels):</p>
<img class="two" src="ocean.jpg" width="300" height="300"><br>
<p>The height and width of this div element is 300px:</p>
<div class="three"></div>
</body>
</html>
此示例演示如何设置不同元素的高度和宽度。
使用百分比设置图像的高度和宽度
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">
</body>
</html>
此示例演示如何使用百分比值设置图像的高度和宽度。
设置元素的最小宽度和最大宽度
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 400px;
min-width: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width and min-width of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
此示例演示如何使用像素值设置元素的最小宽度和最大宽度。
设置元素的最小高度和最大高度
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-height: 600px;
min-height: 400px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
此示例演示如何使用像素值设置元素的最小高度和最大高度。
设置元素的高度
设置元素的最大高度
设置元素的最大宽度
设置元素的最小高度
设置元素的最小宽度
设置元素的宽度