CSS高度和宽度:CSS样式编写

2021年3月27日17:37:21 发表评论 336 次浏览

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 >

输出如下:

最小高度

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: