时间戳

首页 > 解决方案 > 宽度/高度 html 属性在非 img html 元素中是否重要？

javascript - 宽度/高度 html 属性在非 img html 元素中是否重要？

问题描述

像styled-components和styled-system这样的React 库非常流行，我注意到经常使用以下策略：

import {
  space,
  width,
  color,
  top,
  position,
  bottom,
  opacity
} from 'styled-system';
import styled from 'styled-components';

export const Relative = styled.div`
  position: relative;
  ${position}
  ${space}
  ${width}
  ${height}
`;

const MyComponent = () => <Relative width={1}>some stuff...</Relative>

position: relative这是一种在组件上使用的声明性方式。还使用了其他 CSS 设置，如宽度和高度（来自styled-system）。

但是我注意到这种用法将导致div具有width="1"价值：

<div width="1">some stuff...</div>

然而，在样式系统width={1}中，width: 100%这会导致width="1"实际的 html。我想知道是否width="1"可以忽略它，因为从技术上讲，这个宽度值没有任何意义。这可能是img元素的问题，因为浏览器实际上可能依赖于宽度/高度 html 属性，但对于非 img 标签，这有什么影响吗？

标签： javascripthtmlcssreactjs

解决方案

推荐阅读