CSS中的高度和宽度用于设置盒子的高度和宽度。可以使用长度, 百分比或自动设置其值。
![宽度和高度](https://www.lsbin.com/wp-content/uploads/2021/03/abc-2.png)
例子:
<!DOCTYPE html>
< html >
< head >
< title >width and height</ title >
< style >
.GFG{
height: 120px;
width: 50%;
border: 5px solid black;
padding-left: 50px;
padding-top: 50px;
font-size:42px;
font-weight:bold;
color:green;
margin-left:50px;
margin-top:50px;
}
</ style >
</ head >
< body >
< div class = "GFG" > lsbin </ div >
</ body >
</ html >
输出如下:
![宽度和高度](https://www.lsbin.com/wp-content/uploads/2021/03/Capture-143.png)
图片的高度和宽度:
它用于设置图像的高度和宽度。值可以是px, cm, 百分比等。
例子:
<!DOCTYPE html>
< html >
< head >
< title >Height and width of image</ title >
< style >
.GFG {
width:300px;
height:200px;
border:3px solid black;
}
</ style >
</ head >
< body >
< h3 >Set the width and height of an Image</ h3 >
< img class = "GFG" src = "4.jpg" >
</ body >
</ html >
输出如下:
![图片的高度和宽度](https://www.lsbin.com/wp-content/uploads/2021/03/d1-4.png)
设置元素的最大宽度和最小宽度:
最大宽度:
用于设置盒子的最大宽度。调整浏览器的大小可以看到效果。
<!DOCTYPE html>
< html >
< head >
< title >max-width of element</ title >
< style >
.GFG {
max-width:500px;
border:2px solid black;
}
</ style >
</ head >
< body >
< div class = "GFG" >
< h3 >lsbin</ h3 >
< p >lsbin is a computer science platform
where you can learn programming. It is a Computer
Science portal for geeks. It contains well written, well thought and well explained computer science
and programming articles, quizzes etc.
</ p >
</ body >
</ html >
输出如下:
![最大宽度](https://www.lsbin.com/wp-content/uploads/2021/03/d4-2-1.png)
最小宽度:
用于设置盒子的最小宽度。调整浏览器的大小可以看到效果。
例子:
<!DOCTYPE html>
< html >
< head >
< title >min-width of element</ title >
< style >
.GFG {
min-width:400px;
border:2px solid black;
}
</ style >
</ head >
< body >
< div class = "GFG" >
< h3 >lsbin</ h3 >
< p >lsbin is a computer science platform
where you can learn programming. It is a Computer
Science portal for geeks. It contains well written, well thought and well explained computer science
and programming articles, quizzes etc.
</ p >
</ body >
</ html >
输出如下:
![最小宽度](https://www.lsbin.com/wp-content/uploads/2021/03/d4-3-1.png)
设置元素的最大高度和最小高度:
最大高度:
用于设置盒子的最大高度。调整浏览器的大小可以看到效果。
例子:
<!DOCTYPE html>
< html >
< head >
< title >max-height of element</ title >
< style >
.GFG {
max-height:100px;
border:2px solid black;
}
</ style >
</ head >
< body >
< div class = "GFG" >
< h3 >lsbin</ h3 >
< p >lsbin is a computer science platform
where you can learn programming. It is a Computer
Science portal for geeks. It contains well written, well thought and well explained computer science
and programming articles, quizzes etc.
</ p >
</ body >
</ html >
输出如下:
![最大高度](https://www.lsbin.com/wp-content/uploads/2021/03/d4-4-1.png)
最小高度:
用于设置盒子的最小高度。调整浏览器的大小可以看到效果。
例子:
<!DOCTYPE html>
< html >
< head >
< title >min-height of element</ title >
< style >
.GFG {
min-height:50px;
border:2px solid black;
}
</ style >
</ head >
< body >
< div class = "GFG" >
< h3 >lsbin</ h3 >
< p >lsbin is a computer science platform
where you can learn programming. It is a Computer
Science portal for geeks. It contains well written, well thought and well explained computer science
and programming articles, quizzes etc.
</ p >
</ body >
</ html >
输出如下:
![最小高度](https://www.lsbin.com/wp-content/uploads/2021/03/d4-5-1.png)