HTML 中，通过 JavaScript 来获取当前元素的高度通常使用以下属性：

var element = document.getElementById("yourElementId"); // 获取元素var height = element.offsetHeight; // 获取元素高度（包括padding、border，但不包括margin）

如果你想获取元素的 CSS 定义的高度（不包括 padding 和 border），可以使用 style.height，但这只能获取到直接写在元素行内样式中的高度，而不是计算后的实际高度或 CSS 样式表中定义的高度：

var heightInStyle = element.style.height; // 只获取行内样式设置的高度

在 React 中获取当前元素的高度方式与 JavaScript 相似，但是你需要确保在 DOM 更新后获取元素高度。可以使用 ref 来访问实际 DOM 节点并获取其高度：

import React, { useRef, useEffect } from 'react';function YourComponent() {  const elementRef = useRef(null);  useEffect(() => {    if (elementRef.current) {      // 在这里，elementRef.current.clientHeight 获取元素的内容区域高度（不包括padding和border）      // elementRef.current.offsetHeight 获取元素的实际渲染高度（包括padding和border，但不包括margin）      console.log('Element height:', elementRef.current.offsetHeight);
    }
  }, []); // 确保此useEffect只在组件挂载后执行一次  return (    <div ref={elementRef}>
      {/* 你的组件内容 */}    </div>
  );
}export default YourComponent;

在上述代码中，useRef 创建了一个可变的引用对象，它可以用来保存任何可变值，包括 DOM 节点。然后通过将这个 ref 对象赋给元素的 ref 属性，React 会将对应的 DOM 节点保存到这个 ref 对象的 .current 属性上，这样我们就可以在回调函数或者其他适当的地方访问到该 DOM 节点，并获取其高度了。

如果要在图片加载完成后获取包含图片的元素高度，可以监听图片的 load 事件。在 React 中，你可以在组件内创建一个图片引用，并在 useEffect 中监听图片加载完成：

import React, { useRef, useEffect } from 'react';function YourComponent() {  const elementRef = useRef(null);  const imgRef = useRef(null);  useEffect(() => {    const handleImageLoad = () => {      if (elementRef.current) {        console.log('Element height after image load:', elementRef.current.offsetHeight);
      }
    };    // 如果img已经存在于DOM中，则立即触发handleImageLoad    // 否则，在img加载完成后触发handleImageLoad    if (imgRef.current && imgRef.current.complete) {      handleImageLoad();
    } else {
      imgRef.current.onload = handleImageLoad;
    }    // 可以选择在组件卸载时清除事件监听，避免内存泄漏    return () => {
      imgRef.current.onload = null;
    };
  }, []); // 确保此useEffect只在组件挂载后执行一次  return (    <div ref={elementRef}>      <img src="your-image-source.jpg" ref={imgRef} alt="Your Image" />
      {/* 其他内容 */}    </div>
  );
}export default YourComponent;

这样，当图片加载完成后，就会触发 handleImageLoad 函数，从而获取到包含图片的元素的实际高度。

如果图片是服务端渲染的，并且你无法直接在 img 标签上添加 ref，你可以考虑监听整个组件的 onLoad 事件来判断图片是否加载完成。由于 React 在浏览器中重新渲染时会保留 DOM 节点（除非有更改），所以可以通过检查元素的 offsetHeight 是否有变化来判断图片是否加载完毕。

常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。比如说，我们有一个按钮，它的宽度应该是最小的，不应该低于它的宽度。这就是最大和最小属性变得方便的地方。

在本文中，我们将详细介绍CSS的最大和最小宽度和高度属性，并使用可能的用例和技巧详细解释每一个属性。

width 属性

首先要讨论的是与宽度相关的属性。我们有min-width和max-width，它们中的每一个都很重要，都有自己的用例。

Min Width

设置min-width的值时，其好处在于防止width属性使用的值变得小于min-width的指定值。 请注意，min-width的默认值是auto，它解析为0。

让我们举一个基本的例子来说明这一点。

我们有一个按钮，里面有一个变化的文本。文本的范围可能从一个单词到多个单词。为了确保即使只有一个单词，它也有最小宽度，应该使用min-width。

最小宽度为100px，这样即使按钮的内容很短，比如Done，或者只有一个图标，它仍然足够大，可以被注意到。在使用阿拉伯语等多语言网站时，这一点非常重要。 考虑以下来自Twitter的示例：

在以前的情况下，按钮上带有单词“تم”，表示完成。 按钮的宽度太小，因此在后面的案例中，我增加了它的最小宽度。

min-width 和 padding

在内容较长的情况下，min-width可以扩展按钮的宽度，而水平方向上的padding应该被添加，以实现一个合适的外观按钮。

Max Width

在设置max-width值时，它的好处在于防止width属性使用的值超过max-width的指定值。max-width的默认值是none。

max-width的常见且简单的用例是将其与图像一起使用。 考虑以下示例：

图像比它的父元素大。通过使用max-width: 100%，图像的宽度不会超过其父图像的宽度。如果图像比父图像小，则max-width: 100%不会对图像产生实际影响，因为它比父图像小。

使用最小宽度和最大宽度

当min-width和max-width都用于一个元素时，它们中的哪一个将覆盖另一个?换句话说，哪个优先级更高?

html

<div class="wrapper">
  <div class="sub"></div>
</div>

css

.sub {
  width: 100px;
  min-width: 50%;
  max-width: 100%;
}

初始width值为100px，并在其上加上min-width和max-width值。 结果是元素宽度未超过其包含的块/父元素的50％。

height 属性

除了最小和最大宽度属性外，我们还具有与高度相同的属性。

min-height

设置min-height的值时，其好处在于防止使用的height属性值变得小于min-height的指定值。 请注意，最小高度的默认值为auto，它解析为0。

我们用一个简单的例子来演示一下。

我们有一个带有描述文本的部分。目标是为section设置一个最小高度，这样它就可以处理短或长内容。考虑下面的基本情况

.sub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100px;
  color: #fff;
  background: #3c78dB;
}

最小高度为100px，使用flexbox时，内容水平和垂直居中。 如果内容更长，会发生什么？ 例如一段？

是的，你猜对了!section的高度将展开以包含新内容。有了它，我们就可以构建灵活的组件，并对其内容做出响应。

事例源码:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf

max-height

在设置max-height值时，它的好处在于防止height属性使用的值超过max-height的指定值。注意，max-height的默认值是none。

考虑下面的示例，其中我为内容设置了max-height。 但是，因为它大于指定的空间，所以会发生溢出。 因此，文本超出了其父边界。

最小和最大属性的用例

我们将介绍min-width，min-height，max-width和max-height的一些常见和不常见的用例。

标签列表

当有一个标签列表时，建议限制一个标签的最小宽度，这样如果它的内容很短，它的外观就不会受到影响。

通过具有这种灵活性，无论内容有多短，标签都将看起来不错。 但是，如果内容作者输入了一个非常长的标签名称，而他使用的内容管理系统没有标签的最大字符长度，将会发生什么情况呢？ 我们也可以使用max-width。

.c-tag {
  display: inline-block;
  min-width: 100px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*Other styles*/
}

通过使用max-width，标签宽度将被限制为特定值。 但是，这还不够，标签名称应被截断。

事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

按钮

对于按钮的最小值和最大值有不同的用例，因为按钮组件有多种变体。考虑下面的图：

请注意，按钮的“Get”宽度太小。 如果不设置最小宽度，则由于任何原因而没有文本时，情况可能会变得更糟。 在这种情况下，设置最小宽度很重要。

使用 flexbox 将最小宽度设置为零

min-width的默认值是auto，它被计算为0。当一个元素是一个flex项时，min-width的值不会计算为零。flex 项目的最小大小等于其内容的大小。

根据CSSWG：

默认情况下，flex项目不会缩小到它们的最小内容大小(最长单词或固定大小元素的长度)以下。要更改此设置，请设置min-width或 min-height属性。

考虑下面的例子

这个人的名字有一个很长的单词，这导致了溢出和水平滚动。尽管如此，我还是在标题中添加了下面的CSS来截断它

.c-person__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

由于title是flex项目，因此解决方案是重置min-width并将其强制为零。

.c-person__name {
    /*Other styles*/
    min-width: 0;
}

下面是修复后的样子

根据CSSWG：

在弹性项目的主轴上可见溢出的项目上，当在弹性项目的主轴min-size属性中指定时，指定自动最小尺寸。

意味着，将overflow设置为visible值以外的值会导致min-width被计算为0，这解决了我们不设置min-width: 0的问题。

事例源码：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57

使用 flexbox 将最小高度设置为零

虽然与min-width相比，这是一个不太常见的问题，但是它可能发生。 只是为了确认，问题与不能少于其内容的弹性项目有关。 结果min-height值被设置为与内容一样长。

考虑以下示例：

用红色表示的文本应该在父文本中裁剪。因为面板主体是一个flex项目，所以它的min-height与它的内容相等。为了防止这种情况，我们应该重新设置最小高度值。看看HTML和CSS是怎么样的。

HTML

<div class="c-panel">
  <h2 class="c-panel__title"><!-- Title --></h2>
  <div class="c-panel__body">
    <div class="c-panel__content"><!-- Content --></div>
  </div>
</div>

CSS

.c-panel {
  display: flex;
  flex-direction: column;
  height: 180px;
}

.c-panel__body {
  min-height: 0;
}

.c-panel__content {
  overflow-y: scroll;
  height: 100%;
}

通过向面板主体添加min-height: 0，这将重置该属性，并且现在应该可以正常工作。

事例源码：https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100

混合最小宽度和最大宽度

在某些情况下，我们有一个最小宽度的元素，但同时，它没有最大宽度。这可能会导致组件太宽，而我们并不想这样做。考虑以下示例

由于宽度是以像素为单位定义的，因此不能保证上面的方法适用于移动视口。为了解决这个问题，我们可以使用百分比来代替像素作为最小和最大属性。考虑下面这个具有article主体的示例。

我为图像添加了以下CSS：

img {
  min-width: 35%;
  max-width: 70%;
}

事例源码:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124

####　页面包装器/容器

最常用的｀max-width｀用例之一是页面包装器或容器。通过向页面添加最大宽度，我们可以确保内容对用户来说是可读的、易于浏览的。

下面是一个包装器的例子，它是居中的，左右两边有水平的填充。

.wrapper {
    max-width: 1170px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}

最大宽度和ch单位

ch 是一个相对于数字0的大小，1ch 就是数字 0 的宽度。如定义一个3ch的宽度，那么就只能装下 3个0。

<!-- HTML代码 -->

<div>0000</div>

/* CSS代码 */

div {
  width: 3ch;
  background: powderblue;
}

在前面的wrapper元素示例中，我们可以利用ch单元，因为它是一个article 主体。

.wrapper {
    max-width: 70ch;
    /* Other styles */
}

对高度未知的元素进行动画处理

在某些情况下，我们面临着使手风琴或移动菜单具有意想不到的内容高度的挑战。在这种情况下，max-height可能是一个很好的解决方案。

请考虑以下示例：

单击菜单按钮后，菜单应随动画从上到下滑动。 如果没有固定的高度（不建议这样做），除非使用JavaScript，否则这是不可能的。 但是，对于max-height，这是可能的。 想法是为高度添加一个较大的值，例如max-height：20rem，可能无法达到，然后我们可以使用动画从max-height: 0变换到max-height: 20rem。

.c-nav {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s linear;
}

.c-nav.is-active {
    max-height: 22rem;
}

点击菜单按钮可以看到动画的运行。

事例源码：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da

Hero 元素的最小高度

一般来说，我不喜欢给元素添加固定的高度。我觉得这样做，会破坏流式布局的结构。但有些情况设置固定高度却很有用。

考虑下面的例子，在这里我们有一个设置了固定高度的hero部分。

是，当内容较长时，它会溢出并离开hero包装器，这可不太好。

为了预先解决这个问题，我们可以使用min-height来代替height。我们可以用这种方式先解决问题，尽管这可能会导致页面看起来很奇怪，但是我认为应该首先防止内容管理系统(CMS)中发生这样的事情。这样，问题就解决了，看起来也不错。

内容溢出的问题不仅在于内容是否大于固定的hero 高度。它可以发生在屏幕大小调整作为文本换行的结果。

如果改用min-height，则上述情况根本不会发生。

模态组件

对于模态组件，它需要最小和最大宽度，以便可以适应移动设备到PC的屏幕上的适应。

思路1

.c-modal__body {
    width: 600px;
    max-width: 100%;
}

思路2

.c-modal__body {
    width: 100%;
    max-width: 600px;
}

对于我来说，我更喜欢第二个思路，因为我只需要定义max-width: 600px。modal是一个<div>元素，因此它已经具有其父元素的100％宽度，对吗？

考虑下面为模态设计简化的测试案例。 请注意，如果可用视口空间不足，则宽度如何更改为其父级的100％。

事例源码：https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443

最小高度和粘性页脚

当一个网站的内容不够长，它希望看到页脚粘到底部。让我们用一个可视化的例子来更好地展示这一点。

请注意，页脚未粘贴在浏览器窗口的末尾。 那是因为内容不足以达到浏览器窗口高度的长度。 修复后，其外观应如下所示：

首先，将body元素作为flexbox容器，然后将其最小高度设置为视口高度的100％。

事例源码：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100

最大宽度/高度和视口单位的流体比率

为了使比例容器能够根据视口大小进行响应缩放，引入了padding hack。 现在，我们可以通过组合CSS中的视口单位和最大宽度/高度来模仿相同的行为。

我们有一个尺寸为644 * 1000像素的图像。 为了使其流畅，我们需要以下内容：

• 纵横比：高度/宽度
• 容器的宽度：可以是固定数字，也可以是动态数字（100％）
• 设置height为视口宽度的100％乘以纵横比
• 设置max-heigh，该高度是容器的宽度乘以纵横比
• max-width设置为等于容器宽度

人才们的 【三连】 就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。

作者：Ahmad shaded 译者：前端小智 来源：sitepoint 原文：https://www.impressivewebs.com/min-max-width-height-css

TML全局属性是所有HTML元素共有的属性。它们可以应用于所有元素，尽管它们可能对某些元素没有影响。

HTML属性

HTML元素可以设置属性

属性可以在元素中添加附加信息

属性一般描述于开始标签

属性总是以名称/值对的形式出现，比如：name="value"。

属性和属性值对大小写不敏感。不过，万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。而新版本的(X)HTML要求使用小写属性。

大多数HTML元素支持的属性：

class：为html元素定义一个或多个类名（classname）(类名从样式文件引入)

id：定义元素的唯一id

style：规定元素的行内样式（inlinestyle）

title：描述了元素的额外信息(作为工具条使用)

HTML超链接及其属性

HTML使用标签<a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

如果为这些超链接设置了CSS样式，展示样式会根据CSS的设定而显示。

在标签<a>中使用了href属性来描述链接的地址。

实例

<a href="https://www.kaikeba.com/">访问开课吧</a>1复制代码类型：[html]

上面这行代码显示为：访问开课吧

点击这个超链接会把用户带到开课吧的首页。

使用target属性，你可以定义被链接的文档在何处显示。

实例

<ahref="https://www.kaikeba.com/"target="_blank">访问开课吧</a>  

target="_blank":在新窗口中打开被链接文档。  

target="_self":	默认，在相同的框架中打开被链接文档。  

target="_parent":在父框架集中打开被链接文档。  

target="_top":	在整个窗口中打开被链接文档。  

target=framename:在指定的框架中打开被链接文档。  1234567891011复制代码类型：[html]

HTML图像标签及其属性

在HTML中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。

定义图像的语法是：

<imgsrc="url"alt="some_text">  1复制代码类型：[html]

URL指存储图像的位置。

alt属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

height（高度）与width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素。

<imgsrc="logo.jpg"alt="kaikeba"width="300"height="120">  1复制代码类型：[html]

提示:指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

开课吧广场-人才学习交流平台