无涯教程网

关注我们

CSS - 尺寸(Dimension)

CSS - 尺寸(Dimension)

无涯教程具有以下属性，可让您控制盒子的尺寸。

height : 属性用于设置盒子的高度。
width : 属性用于设置盒子的宽度。
line-height : 属性用于设置一行文本的高度。
max-height : 属性用于设置盒子可以达到的最大高度。
min-height : 属性用于设置盒子的最小高度。
max-width : 属性用于设置盒子可以的最大宽度。
min-width : 属性用于设置盒子的最小宽度。

Height and Width 属性

height 和 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>

它将产生以下输出-

Line-height 属性

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>

它将产生以下输出-

Max-height 属性

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

<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 属性

min-height 属性允许您指定盒子的最小高度。 min-height属性的值可以是数字，长度或百分比。

<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 属性

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

<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 属性

min-width 属性允许您指定盒子的最小宽度。 min-width属性的值可以是数字，长度或百分比。

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

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Kafka核心技术与实战 -〔胡夕〕

研发效率破局之道 -〔葛俊〕

DevOps实战笔记 -〔石雪峰〕

程序员的测试课 -〔郑晔〕

HarmonyOS快速入门与实战 -〔QCon+案例研习社〕

零基础入门Spark -〔吴磊〕

Web 3.0入局攻略 -〔郭大治〕

Vue 3 企业级项目实战课 -〔杨文坚〕

结构思考力 · 透过结构看表达 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)