为什么CSS width属性与输入元素一起使用 [英] why css width property is working with input element

问题描述

根据CSS 文档:

width CSS属性...适用于所有元素，但不可替换的嵌入式元素，表行和行组

The width CSS property ... applies to all elements but non-replaced inline elements, table rows, and row groups

输入是内联元素.那么为什么 width 属性可以与 input 元素一起使用?

Input is inline element. So why width property is work with input element?

推荐答案

该异常适用于不可替换的内联元素.输入是一个替换的元素.

The exception is for non-replaced inline elements. Input is a replaced element.

已替换的元素

在CSS中，被替换的元素是表示为不在CSS范围内.这些是外部对象，其表示形式独立于CSS.典型的替换元素是< img> ，< object> ，< video> 或表单元素，例如< textarea> 和< input> .某些元素，例如< audio> 或< canvas> 仅在特定情况下.使用CSS内容插入的对象属性是匿名替换的元素.

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.

CSS在某些情况下专门处理替换的元素，例如计算边距和一些自动值.

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

请注意，某些替换的元素(而非全部)具有内在的尺寸或定义的基线，某些CSS属性使用像垂直对齐.

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like vertical-align.

参考: MDN-替换元素

这篇关于为什么CSS width属性与输入元素一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！