【 CSS 尺寸/宽高属性 height&width 】

最新推荐文章于 2024-05-15 09:00:00 发布

Hey_Coder

最新推荐文章于 2024-05-15 09:00:00 发布

阅读量2.1k

点赞数 2

分类专栏：【CSS】文章标签： CSS尺寸属性 CSS宽高属性最大宽度max-widtht最大高度max-height 高度height和宽度width 最小宽度min-width和最小高度min-height

本文链接：https://blog.csdn.net/VickyTsai/article/details/103395592

版权

【CSS】专栏收录该内容

28 篇文章 3 订阅

订阅专栏

CSS 尺寸/宽高属性 height&width

CSS 尺寸/宽高属性

尺寸: dimension, 美 [dɪ’mɛnʃ(ə)n; daɪ-]

用于	属性名	CSS 版本
① 元素的高度。(auto/长度值/ 百分比值) 。	`height`	1
❶ 元素的最大高度。 (当最小高度是最小, 高度超出时,实际高度= 最大高度,无最大值none/ 长度值/ 百分比值(包含块) ) 。	`max-height`	2
❷ 元素的最小高度。 (最小高度不是最小时,实际高度= 最小高度,默认高度(`auto`)/长度值/ 百分比值(包含块)) 。	`min-height`	2
② 元素的宽度。 (默认用于内容区,浏览器默认 `auto`/ 长度值/ 百分比值（父元素） )。	`width`	1
❶ 元素的最大宽度。 (无最大宽度值 `none`/ 长度值/ 百分比值 (包含块的内容区 width) )。	`max-width`	2
❷ 元素的最小宽度。 (当最小宽度不是最小时,实际宽度 = 最小宽度 )。	`min-width`	2

1. height 属性: 设置元素的高度 (auto/长度值/ 百分比值)

⑴ 设置元素的高度: height 属性
- 高度: 属性指定了一个元素的高度。
- ① 适用范围和对象: 默认内容区
  - 适用对象: 所有元素
    - 除了 (不可替换的)行内元素 non-replaced inline elements, 表列 table columns, 列组 column groups
  - 适用范围: 默认情况下，这个属性决定的是内容区（ content area）的高度。
- ② 改变适用范围:
  - 如果将 box-sizing 设置为 border-box , 这个属性决定的将是边框区域（border area）的高度。
- ③ 不适用对象
  - 行内非替换元素: 会忽略这个属性。
  - 行内元素:无法设置高度。
- ④ 属性值覆盖
  - min-height 和 max-height 属性会覆盖 height。

⑵ 高度的语法
- height: auto|length|%|inherit;
  - 含实验中的属性值: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

/* 关键字值 Keyword value */
height: auto;

/* 长度值 <length> values */
height: 120px;
height: 10em;

/* 百分比值 <percentage> value */
height: 75%;

/* 全局 关键字值 Global values */
height: inherit;
height: initial;
height: unset;

⑶ 高度的属性值
- auto /长度值 /百分比值（父元素）
- ① 浏览器决定(默认值): auto
  - 浏览器会计算出实际的高度。
  - 浏览器将计算,并为指定元素选择一个高度。
- ② 长度值: length
  - 使用 px、cm 等单位定义高度。
  - 将高度定义为绝对值。
- ③ 百分比值 (包含块): %
  - 将高度定义为包含块的(内容区的)高度height 的百分比。
    - 如果父元素/包含块没有设置具体的高度值,默认是 auto
      - 则子元素无论百分比值是多少,效果都等同 auto
        未显式指定包含块的高度,百分比值取决于内容高度，此元素不是绝对定位的话，值计算为 auto。
    - 父元素设置了具体的高度
      - 百分比值才会变化和有效
    - 根元素上的高度百分比: 相对于初始包含块。
- ④ 继承父亲: inherit
  - 规定应该从父元素继承 height 属性的值。
- 以下的为 实验中属性值:
  - ① border-box
    - 如果存在，则将前面的长度值/百分比值应用于元素的边框框。
  - ② content-box
    - 如果存在，则将前面的长度值/百分比值应用于元素的内容框。
  - ③ fill
    - 使用 fill-available 内联大小 inline size 或 fill-available 块大小 block size, 根据书写模式。
  - ④ max-content
    - 固有的首选高度。
  - ⑤ min-content
    - 固有的最小高度。
  - ⑥ available
    - 包含块的高度减去垂直外边距、边框和内边距。
  - ⑦ fit-content
    - 两者中的较大值:
      - 固有的(intrinsic) 最小高度
      - 固有的首选高度和可用高度中的较小值

⑷ 高度的浏览器支持

示例1: 给一段文字,设置高度
css

* {
    /*去除各个浏览器默认的 内外边距*/
    margin: 0;
    padding: 0;
}

.boxparent {
    width: 20em;
    height: 10em;
    margin: 10px;
    background-color: #daffcc;
    border: solid 5px indianred;
}

.paddingStyle {
    width: 15em;
    border: solid 2px deepskyblue;
    background-color: #dddde3;

    /*给元素 设置内边距*/
    padding: 10px;
    margin: 10% auto;

    height: 10px;
    height: 6em;
    /*如果 父元素/包含块 没有设置 具体的高度值,默认是 auto,则 子元素 无论百分比值是多少,都等同 auto,父元素设置了具体的高度,百分比值 才有效*/
    height: 45%;
    height: 55%;
    height: auto;
}

html

<div class="boxparent">
    <p class="paddingStyle"><strong>伏魔先伏自心，驭横先平此气。</strong><br /> <span>降魔者先降自心</span>，<span>心伏则群魔退听</span>；驭横者先驭此气，气平则外横不侵。</p>

</div>

绝对长度值: height: 10px; 高度太小,内容溢出了	绝对长度值: height: 6em;

百分比值: height: 45%; 并没有按照45%显示,因为父元素没有指定具体高度值父元素高度默认是 auto,子元素百分比值无效此时, 百分比值等同于右边的 auto 属性值效果	关键字 auto: height: auto; = 左边的父元素高度默认 auto 的百分比值

指定父元素高度后的百分比值: height: 45%; 有一部分文本还是溢出内容区了,显示在内边距中	指定父元素高度后的百分比值: height: 55%;

1.1 max-height 属性: 设置元素的最大高度 (最小高度是最小, 高度超出时,实际高度= 最大高度,无最大值none/ 长度值/ 百分比值(包含块) )

⑴ 设置元素的最大高度: max-height 属性
- ① 限制值: 它可以防止 height 属性的使用值大于为 max-height 指定的值,高度大于最大高度时,真实高度 = 最大高度。
  - 失效和替换:
    - ❶ 如果 height ＞max-height ,
      - 则 height 属性会失效,此时真实/实际高度 = max-height
    - ❷ 如果 height ≤max-height
      - 则真实高度 = height值,max-height不影响
- ② 覆盖: max-height 覆盖了 height (超出最大高度时)，而 min-height 覆盖了 max-height。
  - ❶ 最小高度,不是最小时,实际高度 = 最小高度
  - ❷ 前提: 最小高度是最小, 但最大高度,不是最大时,实际高度 = 最大高度
- ③ 适用对象:
  - 所有元素
  - 除了 (不可替换的)行内元素 non-replaced inline elements, 表列 table columns, 列组 column groups
- ④ 适用区域: 高度 height和最大高度 max-height的范围
  - 默认为: 内容区
  - 不包括: 内边距、边框、外边距。

⑵ 最大高度的语法
- max-height: none|length|%|inherit;
  - 含实验中的属性值: <length> | <percentage> | none | max-content | min-content | fit-content | fill-available;

/* 长度值 <length> value */
max-height: 3.5em;

/* 百分比值 <percentage> value */
max-height: 75%;

/* 关键字值 Keyword values */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/* 全局值 Global values */
max-height: inherit;
max-height: initial;
max-height: unset;

⑶ 最大高度的属性值
- 无最大值none/ 长度值/ 百分比值(包含块)
- ① 无最大高度值(默认值): none
  - 高度没有最大值。
- ② 长度值: length
  - 定义元素的最大高度值。
  - 以绝对值表示的最大高度。
- ③ 百分比值(包含块): %
  - 最大高度，用包含块的 (内容区的)高度height 的百分比表示。
  - 前提: 父元素指定具体高度值,百分比值才有效,否则,百分比值＝ none 属性值
    - 父元素高度未指定+不是绝对定位元素: 百分比值 = none
      - 如果未显式指定包含块的高度,则取决于内容的高度
      - 且这个元素不是绝对定位的，百分比值被视为 none。
- ④ 继承父亲: inherit
  - 从父元素继承 max-height 属性的值。
- 负值:
  - 高度和最大高度, 都不允许为负值。
- 下列为实验中的属性值
- ① max-content
  - 固有的首选高度。
- ② min-content
  - 固有的最小高度。
- ③ fill-available
  - 包含块的高度减去垂直外边距、边框和内边距。
  - (注意，有些浏览器为这个关键字实现了一个旧名称 available。)
- ④ fit-content
  - 与 max-content 相同.

⑷ 最大高度的浏览器支持
- CSS 2.1在表未定义的情况下保留了 max-height 的行为。
  - Firefox 支持对表元素 table应用最大高度。
  - Opera 支持将 max-height 应用于表元素table。
- 实验中属性值,需要带前缀: -webkit-、-moz-
- WebKit 中的别名: 实现了一个早期的建议，将高度设置为固有高度:
  - 用 intrinsic, 替代 max-content
  - min-intrinsic, 替代 min-content.

示例1: 给一段文字设置最大高度


    height: 80px;
    height: 90px;
    height: 100px;
    height: 105px;
    height: 120px;
    max-height: 100px;

① 当 height : 80px| 90px|100px;时, height ≤ max-height
- 此时真实高度 = 对应的 80px| 90px|100px
② 当 height : 105px| 120px;时, height ＞ max-height (最大高度)
- 真实高度 = 最大高度 max-height
- (超出最大高度的高度,真实高度值全部等于最大高度的值)

1.2 min-height 属性: 设置元素的最小高度 (最小高度不是最小时,实际高度= 最小高度,默认高度(auto)/长度值/ 百分比值(包含块))

⑴ 设置元素的最小高度: min-height 属性
- ① 限制高度:
  - 不允许一个元素的高度（height）小于这个元素指定的最小高度（min-height）。
- ② 实际高度 = 最小高度值的情况:
  - 最小高度不是最小时,实际高度= 最小高度
    - 即, 当前的 max-height 或 height 小于最小高度min-height，那么这两个值都不合格, 此时, 实际高度 = min-height 的值。

⑵ 最小高度的语法
- min-height: length|%|inherit;
  - 含实验中的属性值: <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

/* 长度值 <length> value */
min-height: 3.5em;

/* 百分比值 <percentage> value */
min-height: 10%;

/* 关键字值 Keyword values */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;

/* 全局值 Global values */
min-height: inherit;
min-height: initial;
min-height: unset;

⑶ 最小高度的属性值
- 默认高度(auto)/长度值/ 百分比值(包含块)
  - ① 长度值: length
    - 默认值 0.
    - 指定绝对值作为最小高度。
  - ② 百分比值(包含块): %
    - 相对于包含块的(内容区的)高度height 的百分比
  - ③ 浏览器默认高度(默认值)auto
    - auto 是 flex 伸缩元素的默认最小高度，为其他布局提供了更多合理的大于0 的默认数值。
  - 负值: 不允许指定负值。
    - 最小高度、高度、最大高度,都不允许负值。
    - 高度类属性,不允许有负值。
- 以下为实验中的属性值
  - ① max-content
    - 固有的建议高度。
  - ② min-content
    - 固有的最低高度。
  - ③ fill-available
    - 包含块的高度减去垂直外边距、边框和内边距。
    - 别名: 注意，有些浏览器为这个关键字实现了一个旧名称 available。
  - ④ fit-content
    - 根据 CSS3Box，这是 min-content 的同义词。
    - CSS3 Sizing 定义了一个更复杂的算法，但是没有浏览器实现它，即使是以实验的方式。

⑷ 最小高度、高度、最大高度三者的区别和联系
- min-height, height, max-height
- ① 大小关系: min-height≤ height ≤max-height
  - ❶ 最小高度,不是最小时,实际高度 = 最小高度
  - ❷ 前提: 最小高度最小, 但最大高度,不是最大时,实际高度 = 最大高度
- ② 负值: 都不能为负值。
- ③ 适用对象: 相同。
- ④ 百分比的相对对象: 相同。= 父元素/包含块的内容区的高度 height 值。

⑸ 最小高度的浏览器支持
- css2.1 在表table未定义的情况下保留最小高度的行为。
  - Firefox 支持对表元素table 应用最小高度。
  - Opera 支持对表元素table 应用最小高度。
- 在Internet Explorer 10和11中，列方向伸缩容器上的最小高度声明 , 不适用于容器的伸缩项。
- Firefox 18和之后版本使用 auto作为 min-height 的初始值。
- 实验中属性值,需要浏览器前缀: -webkit-、-moz-

示例1: 给一段文字设置最小高度
- ① 最小高度,不是最小时: 大于高度,小于最大高度
  - 实际高度 = 最小高度

    height: 100px;
    max-height: 110px;
    min-height:105px;

② 最小高度,不是最小时: 同时大于高度和最大高度
- 实际高度 = 最小高度

    height: 100px;
    max-height: 110px;
    min-height:115px;

2. width 属性: 设置元素的宽度 (默认用于内容区,浏览器默认auto/ 长度值/ 百分比值（父元素） )

⑴ 设置元素的宽度: width 属性
- ① 适用区域
  - 内容区: 默认情况下，它设置内容区域的宽度。
    - 不包括: 在内容区外面可以增加内边距、边框和外边距。
  - 修改适用区域: 但是如果 box-sizing 设置为 border-box，它设置边框区域的宽度。
- ② 适用元素
  - 所有元素,除了以下的元素
  - 不适用元素: 除了 (不可替换的)内联元素 non-replaced inline elements、表行 table rows和行组 row groups
    - 行内非替换元素，会忽略这个属性。
- ③ 覆盖
  - min-width 和 max-width 属性可能会覆盖 width.

⑵ 宽度的语法
- width: auto | length| %| inherit;
  - 含实验中的属性值: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto;

/* 长度值 <length> values */
width: 300px;
width: 25em;

/* 百分比值 <percentage> value */
width: 75%;

/* 关键字值 Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* 全局值 Global values */
width: inherit;
width: initial;
width: unset;

⑶ 宽度的取值
- 以下关键字值之一
  - available, min-content, max-content, fit-content, auto.
- 一个长度值/百分比值 (可选地后跟以下关键字之一)
  - border-box, content-box.

⑷ 宽度的属性值
- 浏览器默认auto/ 长度值/ 百分比值（父元素）
- ① 浏览器默认宽度(默认值): auto
  - 浏览器计算出实际的宽度。
- ② 长度值: length
  - 将宽度定义为绝对值。
  - 使用 px、cm等单位定义宽度。
- ③ 百分比值(包含块): %
  - 定义为包含块的(内容区的)宽度width 的百分比。
  - 如果包含块的(内容区的)宽度width 取决于元素的宽度，则结果布局是未定义的。
- 以下是实验中的属性值
- ① 边框区: border-box
  - 如果存在，则将前面的长度值/百分比值应用于元素的边框区。
- ② 内容区: content-box
  - 如果存在，则将前面的长度值/百分比值应用于元素的内容区。
- ③ fill
  - 使用 fill-available 行内尺寸或者 fill-available 块级尺寸其中一种, 根据书写模式来决定。
- ④ max-content
  - 固有的首选宽度.
    - 火狐浏览器中使用非标准名称:intrinsic替代
- ⑤ min-content
  - 固有的最小宽度.
    - 谷歌、火狐浏览器中,使用非标准名称:min-intrinsic 替代
- ⑥ 可用宽度: available
  - 包含块的宽度减去水平的 margin, border 和 padding.
- ⑦ fit-content
  - 以下两种情况下的较大值:
  - 固有的最小宽度
  - 固有首选宽度（max-content）和可用宽度（available）的较小值

宽度的浏览器支持
- 实验中的属性值，需要浏览器前缀: -moz-、-webkit-

示例1: 给一段文字设置宽度

不设置宽度 = width: auto; 浏览器根据内容自动调整了内容	设置为长度值: width: 15px; 因为宽度太小,高度未设置值,自动调整看起来像是把内容竖起来了

同时设置高度和宽度: height: 100px; width: 150px; 高度为固定大小时, 宽度不够,内容就会发生溢出	百分比值: width: 75%; 百分比的计算值 = 父元素的内容区的宽度 width *百分比 =320 × 75% = 240px

2.1 max-width 属性: 设置元素的最大宽度 (无最大宽度值none/ 长度值/ 百分比值(包含块的内容区 width) )

⑴ 设置元素的最大宽度: max-width 属性
- ① 宽度的限定和覆盖
  - 覆盖: max-width 会覆盖 width 设置, 但 min-width 设置会覆盖 max-width.
    - 设置了最大宽度 max-width 的元素会在达到 max-width 值之后避免进一步按照 width 属性设置变大.
    - ❶ width ＞最大宽度 max-width时
      - 实际宽度 = 最大宽度max-width (不会超过最大值)
    - ❷ 最小宽度的限定最优先:
      - 当最小宽度不是最小值时,即使,此时 width ＞ max-width,实际宽度 ≠最大宽度 ,实际宽度 = 最小宽度
- ② 适用元素
  - 所有元素,除了以下的元素
  - 不适用元素: 除了 (不可替换的)内联元素 non-replaced inline elements、表行 table rows和行组 row groups
    - 行内非替换元素，会忽略这个属性。

⑵ 最大宽度的语法
- max-width: none|length|%|inherit;
  - 包含实验中的属性值: <length> | <percentage> | none | max-content | min-content | fit-content | fill-available

/* 长度值 <length> value */
max-width: 3.5em;

/* 百分比值 <percentage> value */
max-width: 75%;

/* 关键字值 Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* 全局值 Global values */
max-width: inherit;
max-width: initial;
max-width: unset;

⑶ 最大宽度的属性值
- 无最大宽度值none/ 长度值/ 百分比值(包含块的内容区 width)
- ① 无最大宽度值(默认值): none
  - 宽度没有最大值。
- ② 长度值: length
  - 定义元素的最大宽度值。
  - 以绝对值表示的最大宽度。
- ③ 百分比值(包含块): %
  - 最大宽度，用包含块的 (内容区的)宽度width 的百分比表示。
  - 前提: 父元素指定具体宽度值,百分比值才有效,否则,百分比值＝ none 属性值
    - 父元素宽度未指定+不是绝对定位元素: 百分比值 = none
      - 如果未显式指定包含块的宽度,则取决于内容的宽度
      - 且这个元素不是绝对定位的，百分比值被视为 none。
- ④ 继承父亲: inherit
  - 从父元素继承 max-width 属性的值。
- 负值:
  - 宽度和最大宽度, 都不允许为负值。
- 下列为实验中的属性值
- ① max-content
  - 固有的首选宽度。
- ② min-content
  - 固有的最小宽度。
- ③ fill-available
  - 包含块的宽度减去水平外边距、边框和内边距。
  - (注意，有些浏览器为这个关键字实现了一个旧名称 available。)
- ④ fit-content
  - 与 max-content 相同.

⑷ 最大宽度的浏览器支持
- 实验中的属性值,需要浏览器前缀: -webkit-、-moz-

示例1: 给一段文字设置最大宽度
① width ≤ 最大宽度 max-width时
- 实际宽度 = width

    width: 159px;
    max-width: 160px;

② width ＞最大宽度 max-width时
- 实际宽度 = 最大宽度max-width (不会超过最大值)

    width: 161px;
    max-width: 160px;

2.2 min-width 属性: 设置元素的最小宽度 (当最小宽度不是最小时,实际宽度 = 最小宽度 )

⑴ 设置元素的最小宽度: min-width 属性
- ① 限制宽度的下限:
  - 阻止 width 属性的应用值小于 min-width 的值。
- ② 覆盖:
  - min-width 的值会同时覆盖 max-width 和 width。
  - 当最小宽度不是最小时,实际宽度 = min-width
    - 当 min-width大于 max-width 或width 时，将元素的宽度设置为 min-width的值。
⑵ 最小宽度的语法
- min-width: length|%|inherit;
  - 包含实验中的属性值: <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

/* 长度值 <length> value */
min-width: 3.5em;

/* 百分比值 <percentage> value */
min-width: 10%;

/* 关键字值 Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* 全局值 Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

⑶ 最小宽度的属性值
- 浏览器默认auto/ 长度值/ 百分比值(包含块)
- ① 浏览器默认(默认值): auto
  - 指定一个自动的最小的宽度。
  - 弹性元素: 用于弹性元素的默认最小宽度。
    - 相比其他布局中以0为默认值，auto 能为弹性布局指明更合理的默认表现。
  - 解析值: 但是，除非相关布局模块另有定义，否则它将解析为使用值 0。
- ② 长度值: length
  - 设置元素的最小宽度值为长度值。
  - 负值: 使声明无效。
- ③ 百分比值(包含块): %
  - 表示为包含块的 (内容区的)宽度 width 的一个百分比。
  - 负值: 使声明无效。
- 负值: 不允许指定负值,负值使声明无效。
- 下方为实验中的属性值
- ① max-content
  - 固有的首选宽度。
- ② min-content
  - 固有的最小宽度
- ③ fill-available
  - 包含块的宽度减去水平的 margin、border 和 padding。
  - 有些浏览器在实现时使用了该关键字的早期名字： available。
- ④ fit-content
  - 取较小值:
  - 等同于 min (max-content, max(min-content, fill-available).

⑷ 最小宽度的浏览器支持

示例1: 给一段文字设置最小宽度
当最小宽度,不是最小时,实际宽度 = min-width
- ① 当 width ＜ min-width ＜max-width
  - 实际宽度 = min-width

    width: 150px;
    min-width: 155px;
    max-width: 160px;

② 最小宽度,同时大于另外两个宽度: width ＜ min-width , max-width＜ min-width
- 实际宽度 = 最小宽度 min-width
- (最小宽度的限定最优先: 注意,即使,此时 width ＞ max-width,实际宽度 ≠最大宽度 )

    width: 165px;
    max-width: 160px;
    min-width: 169px;

♣ 结束语和友情链接

参考文档
- MDN CSS 教程

友情链接
- 【CSS 单位 (详细介绍)】

感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
- 可以备注支持的理由或想对作者说的话哦~
赞助二维码:

转载请评论告知作者并注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/103395592
- 版权声明：本文为博主原创文章，转载请评论告知作者并附上博文链接！

在这里插入图片描述

Hey_Coder

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【 CSS 尺寸/宽高属性 height&width 】

CSS 尺寸/宽高属性1. height 属性: 设置元素的高度 (auto/长度值/ 百分比值)1.1 max-height 属性: 设置元素的最大高度 (最小高度是最小, 高度超出时,实际高度= 最大高度,无最大值none/ 长度值/ 百分比值(包含块) )1.2 min-height 属性: 设置元素的最小高度 (最小高度不是最小时,实际高度= 最小高度,默认高度(auto)/长度值/ 百分比值(包含块))2. width 属性: 设置元素的宽度 (默认用于内容区,浏
复制链接

扫一扫