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 属性的值
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
    html {
    height: 100%;
    }
    body {
    height: 100%;
    }
    img.normal {
    height: auto;
    }
    img.big {
    height: 50%;
    }
    img.small {
    height: 10%;
    }
    </style>
    1
    2
    3
    <img class="normal" src="https://demo.qianchia.com/media/image/demo1.png" width="95" height="84" /><br>
    <img class="big" src="https://demo.qianchia.com/media/image/demo1.png" width="95" height="84" /><br>
    <img class="small" src="https://demo.qianchia.com/media/image/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 属性的值
  • 实例

    1
    2
    3
    4
    5
    <style>
    img {
    width: 200px;
    }
    </style>
    1
    <img src="https://demo.qianchia.com/media/image/demo1.png" width="95" height="84" />
  • 效果

3、CSS 实例

文章目录
  1. 1. 前言
  2. 2. 1、高度
  3. 3. 2、宽度
  4. 4. 3、CSS 实例
隐藏目录