CSS 尺寸/宽高 属性 height&width

  • CSS 尺寸/宽高 属性
    • 1. height 属性: 设置 元素的高度 (auto/长度值/ 百分比值)
      • 1.1 max-height 属性: 设置元素的 最大高度 (最小高度 是最小, 高度 超出时,实际高度= 最大高度,无最大值none/ 长度值/ 百分比值(包含块) )
      • 1.2 min-height 属性: 设置元素的 最小高度 (最小高度 不是最小时,实际高度= 最小高度,默认高度(auto)/长度值/ 百分比值(包含块))
    • 2. width 属性: 设置 元素的宽度 (默认用于 内容区,浏览器默认auto/ 长度值/ 百分比值（父元素） )
      • 2.1 max-width 属性: 设置元素的 最大宽度 (无最大宽度值none/ 长度值/ 百分比值(包含块的内容区 width) )
      • 2.2 min-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
    • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！

【 CSS 尺寸/宽高 属性 heightwidth 】相关推荐

  1. css限制图片高宽,CSS限定图片宽高在范围内等比缩放（img缺省宽高属性）

    this.p={ m:2, b:2, loftPermalink:'', id:'fks_0870650860840870700840950850640720870830750840840850660 ...

  2. 5分钟学会js上传图片校验图片格式、大小、尺寸宽高

    js上传图片校验图片格式.大小.尺寸宽高 一.前言        js上传图片校验图片格式.大小.尺寸宽高.        在此记录下,分享给大家. 二.代码 <input type=" ...

  3. qtabbar设置不同宽度_前端之css（宽高）设置小技巧

    一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...

  4. CSS：宽高自适应详解

    宽度自适应的应用     1.属性:width     2.属性值:px/%     3.宽度自适应的特点         - HTML,BODY表示浏览器,默认是块级元素,宽度是100%       ...

  5. css 缩放比例缩放,CSS实现宽高成比例缩放

    用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢. html代码如下, con ...

  6. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中 优点:父元素( ...

  7. 将登记照图片尺寸宽高文件大小进行调整修改的工具

    通过该这种登记照宽高.尺寸.背景色.文件大小在线智能调整工具,可以轻松将登记照图片文件的各种参数修改为符合用户需求的值:登记照宽高尺寸文件大小等参数调整工具-吱吱工具箱

  8. css图片宽高自适应盒子（宽＞高就限制宽，高＞宽就限制高）

    效果图: 宽>高就限制宽 即宽度100% ,高度自动.例如:19201088 高>宽就限制高 即高度100%,宽度自动.例如:19442592 很多时候图片宽高比不固定,而且作为一个前端, ...

  9. （转）详解JS位置、宽高属性之一：offset系列

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

最新文章

  1. POJ 3461 还是两种方法
  2. 4次迭代！10w行级别数据的Excel导入优化记录
  3. Form提交前,ajax校验,并阻止提交
  4. 机器学习中的不平衡分类方法(part2)--模型评估与选择
  5. halcon trainf_ocr_class_svm 训练OCR分类器
  6. java多核的利用率_java利用FutureTask、ExecutorService 在多核时代充分利用CPU运算
  7. python if elif else_python:通讯录（字典+while+if/else）
  8. linux head命令作用,Linux查看文件内容之head命令
  9. php 图片服务器搭建,php图像裁剪服务器搭建
  10. mac homebrew chinese mirror
  11. java调用 火眼臻睛,火眼臻睛车牌识别SDK评测
  12. 夜曲歌词 拼音_周杰伦夜曲歌词
  13. Ceres-Solver
  14. JS获取ul中li的值同步到搜索框
  15. 【多线程】初识多线程
  16. 信创只是开始_《作业帮高管团队亲笔信：D轮只是开始，一切归零，重新出发》...
  17. Anaconda - 安装以及使用
  18. 平面解析几何----过抛物线外一点和焦点的连线平分切点弦的两切点和焦点组成的角
  19. JNI字段描述符Ljava/lang/String;
  20. luoguP3600 随机数生成器概率与期望Dp

热门文章

  1. 功能测试和兼容性测试
  2. oracle ogc y,OGC标准介绍 7
  3. MATLAB基础应用精讲-【基础知识篇】MATLAB表达式中的变量和关键字
  4. more command
  5. yoast seo设置中文_如何通过Yoast安装和设置WordPress SEO插件
  6. 2023计算机毕业设计SSM最新选题之java免税店销售系统n969j
  7. java计算机毕业设计H5新冠防疫宣传网站设计与实现源码+mysql数据库+系统+lw文档+部署
  8. 阿里巴巴董事局主席兼首席执行官马云
  9. 2020年11月08中级数据库系统工程师考后说
  10. linux系统的结构