CSS ::尺寸

您已经看到了包围每个框的边框,即。元素,可以出现在每个框内的填充以及可以围绕它们的边距。在本教程中,我们将学习如何更改盒子的尺寸。

我们具有以下属性,可让您控制盒子的尺寸。

  • 该 高度 属性用于设置框的高度。

  • 的 宽度 属性用于设置一个盒子的宽度。

  • 所述 行高 属性被用来设置一个文本行的高度。

  • 在 最大高度 属性是用来设置一个最大高度,一个箱子即可。

  • 的 最小高度 属性用于设置的最小高度,一个盒即可。

  • 的 最大宽度 属性用于设置一个盒可以是最大宽度。

  • 的 最小宽度 属性用于设置的最小宽度,一个盒即可。

高度和宽度属性

在 高度 和 宽度 属性允许您设置框的高度和宽度。它们可以采用长度,百分比或关键字auto的值。

这是一个例子-现场演示

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400pixels wide and 100 pixels high
      </p>
   </body>
</html>

行高属性

该 行高 属性可以增加文本行之间的空间。line-height属性的值可以是数字,长度或百分比。

这是一个例子-现场演示

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
         This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
         This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
      </p>
   </body>
</html>

最大高度属性

在 最大高度 属性允许你指定一个盒子的最大高度。max-height属性的值可以是数字,长度或百分比。

 –此属性在Netscape 7或IE 6中均不起作用。

这是一个例子

<html>
   <head>
   </head>  
   <body>
      <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
      </p>
      <br>
      <br>
      <br>
      <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
   </body>
</html>

最小高度属性

的 最小高度 属性允许你指定框的最小高度。min-height属性的值可以是数字,长度或百分比。

 –此属性在Netscape 7或IE 6中均不起作用。

这是一个例子

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
   </body>
</html>

最大宽度属性

的 最大宽度 属性允许你指定一个盒子的最大宽度。max-width属性的值可以是数字,长度或百分比。

 –此属性在Netscape 7或IE 6中均不起作用。

这是一个例子

<html>
   <head>
   </head>

   <body>
      <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
      </p>
      <img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
   </body>
</html>

最小宽度属性

的 最小宽度 属性允许你指定框的最小宽度。min-width属性的值可以是数字,长度或百分比。

 –此属性在Netscape 7或IE 6中均不起作用。

这是一个例子-现场演示

<html>
   <head>
   </head>

   <body>
      <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 100px high and min width is 400px
         This paragraph is 100px high and min width is 400px
      </p>
      <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
   </body>
</html>