CSS高度和宽度（CSS样式编写） _前端开发

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 = "https://www.lsbin.com/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 >

【CSS高度和宽度（CSS样式编写）】输出如下：

文章图片
最小高度：
用于设置盒子的最小高度。调整浏览器的大小可以看到效果。
例子：

< !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 >

输出如下：