如何确定文本输入框的默认宽度与实际渲染宽度？

嘿，我来帮你把这个问题理清楚～

首先，咱们先解决核心问题：怎么获取这个输入框的实际渲染宽度，有两种常用的方式：

1. 用JavaScript实时获取 #

这是最直接能拿到浏览器渲染后真实宽度的方法：

• getComputedStyle：能拿到精确的计算后宽度（包括小数），返回的是带单位的字符串，比如你这个场景里会返回 "436.5px"。如果需要数字的话，可以用parseFloat转换：

  const input = document.querySelector('input[type="text"]');
  const computedWidth = getComputedStyle(input).width;
  console.log(computedWidth); // 输出 "436.5px"
  console.log(parseFloat(computedWidth)); // 输出 436.5
  

• offsetWidth/clientWidth：前者返回包含边框、内边距的总宽度，后者返回内容+内边距的宽度（不含边框），都是整数数值（会四舍五入）：

  console.log(input.offsetWidth); // 比如 437（如果有边框的话）
  console.log(input.clientWidth); // 比如 436
  

2. 理解CSS宽度的计算逻辑 #

你提到的场景里，输入框的宽度其实很好推导：

• 你的父容器<div>是块级元素，没有设置宽度的话，默认会占满包含块的100%宽度——这里就是文档的宽度485px，所以div的宽度就是485px。
• 输入框设置了width: 90%，这个百分比是相对于父容器（div）的宽度来计算的，所以实际宽度就是 485px × 0.9 = 436.5px，和你用JS拿到的结果完全一致。

关于你那个假设的澄清 #

你说“若父容器未设置宽度，输入框会将自身宽度设为(10*font-size)rem”——这个其实是误解哦：

• 如果你不给输入框设置width，它的默认宽度是浏览器的内置样式决定的（比如Chrome里input[type=text]默认宽度是20ch，1ch是当前字体下字符“0”的宽度，和font-size相关，但不是固定的10rem）。
• 但你这里显式设置了width: 90%，这个样式的优先级比默认样式高，所以输入框的宽度完全由父容器的宽度决定，和font-size没有直接关系（font-size只影响输入框内文字的大小，不影响宽度）。

内容的提问来源于stack exchange，提问作者BobbyOrr4