CSS Dimension 尺寸

前言

• CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

属性	描述	CSS	备注	🔗
height	设置元素的高度	1		🔗
line-height	设置行高	1		🔗
min-height	设置元素的最小高度	2		🔗
max-height	设置元素的最大高度	2		🔗
width	设置元素的宽度	1		🔗
min-width	设置元素的最小宽度	2		🔗
max-width	设置元素的最大宽度	2		🔗

1、高度

• height 属性设置元素的高度。

• height、min-height、max-height 属性不包括填充，边框，或页边距。

• line-height 负值是不允许的。

属性	描述	CSS	备注	🔗
height	设置元素的高度	1		🔗
line-height	设置行高	1		🔗
min-height	设置元素的最小高度	2		🔗
max-height	设置元素的最大高度	2		🔗

• 属性值

height 值	描述
auto	默认。浏览器会计算出实际的高度
length	使用 px、cm 等单位定义高度
%	基于包含它的块级对象的百分比高度
inherit	规定应该从父元素继承 height 属性的值

line-height 值	描述
normal	默认。设置合理的行间距
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距
length	设置固定的行间距
%	基于当前字体尺寸的百分比行间距
inherit	规定应该从父元素继承 line-height 属性的值

min-height 值	描述
length	定义元素的最小高度。默认值是 0
%	定义基于包含它的块级对象的百分比最小高度
inherit	规定应该从父元素继承 min-height 属性的值

max-height 值	描述
none	默认。定义对元素被允许的最大高度没有限制
length	定义元素的最大高度值
%	定义基于包含它的块级对象的百分比最大高度
inherit	规定应该从父元素继承 max-height 属性的值

• 实例

  <style>
      html {
          height: 100%;
      }
      body {
          height: 100%;
      }
      img.normal {
          height: auto;
      }
      img.big {
          height: 50%;
      }
      img.small {
          height: 10%;
      }
  </style>

  <img class="normal" src="https://demo.qianchia.com/media/image/demo/demo1.png" width="95" height="84" /><br>
  <img class="big" src="https://demo.qianchia.com/media/image/demo/demo1.png" width="95" height="84" /><br>
  <img class="small" src="https://demo.qianchia.com/media/image/demo/demo1.png" width="95" height="84" />

• 效果

  

2、宽度

• width 属性设置元素的宽度。

• width、min-width、max-width 属性不包括填充，边框和页边距。

属性	描述	CSS	备注	🔗
width	设置元素的宽度	1		🔗
min-width	设置元素的最小宽度	2		🔗
max-width	设置元素的最大宽度	2		🔗

• 属性值

width 值	描述
auto	默认值。浏览器可计算出实际的宽度
length	使用 px、cm 等单位定义宽度
%	定义基于包含块（父元素）宽度的百分比宽度
inherit	规定应该从父元素继承 width 属性的值

min-width 值	描述
length	定义元素的最小宽度值。默认值：取决于浏览器
%	定义基于包含它的块级对象的百分比最小宽度
inherit	规定应该从父元素继承 min-width 属性的值

max-width 值	描述
none	默认。定义对元素的最大宽度没有限制
length	定义元素的最大宽度值
%	定义基于包含它的块级对象的百分比最大宽度
inherit	规定应该从父元素继承 max-width 属性的值

• 实例

  <style>
      img {
          width: 200px;
      }
  </style>

  <img src="https://demo.qianchia.com/media/image/demo/demo1.png" width="95" height="84" />

• 效果

  

3、CSS 实例

• 使用像素值设置图像的高度


• 使用百分比设置图像的高度


• 使用像素值来设置元素的宽度


• 使用百分比来设置元素的宽度


• 设置元素的最大高度


• 使用像素值设置元素的最大宽度


• 使用百分比来设置元素的最大宽度


• 设置元素的最低高度


• 使用像素值来设置元素的最小宽度


• 使用百分比来设置元素的最小宽度