CSS - 维度

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

我们有以下属性允许您控制框的尺寸.

  • height 属性用于设置框的高度.

  • 宽度属性用于设置框的宽度.

  • 行 - height 属性用于设置文本行的高度.

  • 使用 max-height 属性设置框的最大高度.

  • min-height 属性用于设置a的最小高度框可以.

  • max-width 属性用于设置框的最大宽度.

  • min-width 属性用于设置框的最小宽度.

高度和宽度属性

高度宽度属性允许您到了等箱子的高度和宽度.他们可以获取长度,百分比或关键字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>

The line-height Property

line-height属性允许您增加文本行之间的空间。 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>

The max-height Property

max-height属性允许您指定框的最大高度。 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>

The min-height Property

min-height属性允许您指定框的最小高度。 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>

The max-width Property

max-width属性允许您指定框的最大宽度.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>

The min-width Property

min-width属性允许您指定框的最小宽度。 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>