首页 > 其他分享 >无涯教程-CSS - 尺寸(Dimension)

无涯教程-CSS - 尺寸(Dimension)

时间:2024-01-23 18:07:07浏览次数:20  
标签:min max 无涯 height width paragraph Dimension CSS 属性

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

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

它将产生以下输出-

参考链接

https://www.learnfk.com/css/css-dimension.html

标签:min,max,无涯,height,width,paragraph,Dimension,CSS,属性
From: https://blog.51cto.com/u_14033984/9381629

相关文章

  • 前端打包后上传至服务器,发现css样式都未生效,查看请求preview预览格式不正确问题解决
    参考:https://blog.csdn.net/wzj_110/article/details/112850811 我的问题前端打包后上传至服务器,发现css样式都未生效,查看css请求,发现preview预览格式不正确,Response-Headers里的Content-type未对应 原因服务器的nginx配置中, mime.types文件缺失。 原理 MIME:Multip......
  • CSS_常用文本属性
    1、文本颜色 2、文本间距   3、文本修饰text-decoration  4、文本缩进text-indent  5、文本对齐_水平text-align  6、细说font-saize 7、行高line-height(不能小于字体大小,一般1.5)  8、行高的注意事项-数值一般为1.5 9、文本对齐_......
  • 无涯教程-CSS - 轮廓(Outlines)
    轮廓与边框非常相似,但是也没有什么主要区别-轮廓不占用空间。轮廓不必一定是矩形的。您可以使用CSS设置以下大纲属性。outline-width   : 属性用于设置轮廓的宽度。ouylinr-style    : 属性用于设置轮廓的线条样式。outline-color    : 属......
  • 无涯教程-CSS - 列表(List)
    本章教您如何使用CSS控制listtype,position,style等。无涯教程有以下五个CSS属性,可用于控制列表-list-style-type      : 设置列表项标志的类型。list-style-position  : 设置列表中列表项标志的位置。list-style-image    : 将图象设置为列表......
  • css 起步
    什么是CSSCSS(CascadingStyleSheets,层叠样式表)是为web内容添加样式的代码。和HTML类似,CSS也不是真正的编程语言,甚至不是标记语言。CSS是一门样式表语言,可以用它来选择性地为HTML元素添加样式。一般在HTML文件中头部(也就是head标签之间)引入CSS:<linkhref="styl......
  • 无涯教程-CSS - 边框(Border)
    border属性使您可以指定表示元素的边框。您可以更改边框的三个属性-border-color   : 指定边框的颜色。border-style    : 指定边框样式为solid,dashedline,double。border-width   :指定边框的宽度。现在,无涯教程将通过示例了解如何使用这些属性......
  • 无涯教程-CSS - 表格(Table)
    本教程将教您如何使用CSS设置HTMLTable的不同属性。border-collapse  : 设置是否把表格边框合并为单一的边框。border-spacing  : 设置分隔单元格边框的距离。caption-side     :  设置表格标题的位置。empty-cells      :  设置是......
  • 无涯教程-CSS - 链接(Links)
    当无涯教程讨论CSS的伪类时,将重新访问相同的属性。:link    : 表示普通的、未被访问的链接。:visited  : 表示用户已访问的链接。:hover   : 表示鼠标指针位于链接的上方。:active  : 表示链接被点击的时刻。记住a:hover必须在CSS定义中的a:......
  • CSS中的选择器
    CSS中的选择器1.基本选择器E{}选择某一种元素*{}*代表全部的元素E[attr]{}属性选择器^=attr的开头是?*=包含=严格意义上那个的等于ID选择器#id{}class选择器.class{}包含选择器selector1selector2...{}子元素选择器selector1>selector2>...{}兄弟选择......
  • css变量基本操作
    1.html中css变量写法<divstyle="--color:#ccc;"><spanstyle="border:1pxsolidvar(--color);"></div><ul><listyle="--i:1"></li><listyle="--i:2"></li>......