CSS中的高度和宽度用于设置盒子的高度和宽度。可以使用长度, 百分比或自动设置其值。
例子：
<!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 >输出如下：
图片的高度和宽度：
它用于设置图像的高度和宽度。值可以是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 >输出如下：
设置元素的最大宽度和最小宽度：
最大宽度：
用于设置盒子的最大宽度。调整浏览器的大小可以看到效果。
<!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 >输出如下：
最小宽度：
用于设置盒子的最小宽度。调整浏览器的大小可以看到效果。
例子：
<!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 >输出如下：
设置元素的最大高度和最小高度：
最大高度：
用于设置盒子的最大高度。调整浏览器的大小可以看到效果。
例子：
<!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 >输出如下：
最小高度：
用于设置盒子的最小高度。调整浏览器的大小可以看到效果。
例子：
<!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 >输出如下：
