6、替换元素是什么？

目录一、标准面试回答二、怎么理解“替换”例子 1img例子 2input三、常见替换元素有哪些四、非替换元素是什么五、替换元素的特点1. 内容由外部资源或浏览器决定2. 通常有“固有尺寸”3. 某些布局表现比较特殊六、为什么面试会问这个1. 为什么 img 可以直接设置宽高2. 为什么图片底部会有空隙常见解决方式3. 为什么表单元素样式不完全一致七、替换元素和非替换元素的区别八、举几个具体例子替换元素非替换元素九、面试高分回答模板十、简洁背诵版这是 CSS / HTML 里的一个概念题面试里常和行内元素、块级元素、宽高、vertical-align一起考。先记一句最核心的话替换元素Replaced Element是指元素本身的内容不由普通 HTML/CSS 文本直接决定而是由外部资源或浏览器内部机制“替换”出来的元素。一、标准面试回答替换元素是浏览器根据元素的标签属性和外部资源来决定其显示内容的元素。它的内容通常不是写在标签内部的普通文本而是由资源文件或浏览器机制渲染出来。常见的替换元素有img、input、textarea、select、video、audio、iframe等。二、怎么理解“替换”所谓“替换”可以理解成你写的不是最终展示内容本身而是告诉浏览器去加载一个资源或按控件规则渲染一个界面然后浏览器把最终显示结果“放进去”。例子 1imgimg srcdemo.jpg alt图片 /页面上显示的不是img这个标签文字而是浏览器根据src指向的图片资源把图片内容显示出来。所以img是典型替换元素。例子 2inputinput typetext /你并没有在标签内部写出“输入框长什么样”浏览器会按照自己的控件渲染机制把它显示成一个输入框。所以input也是替换元素。三、常见替换元素有哪些常见的替换元素一般包括imginputtextareaselectbuttoniframevideoaudioembedobjectcanvas通常也会归到这类讨论里四、非替换元素是什么和替换元素相对的就是非替换元素。比如divspanph1section这些元素的内容通常就是标签里的文本或子元素不是浏览器拿外部资源“替换”出来的。例如divHello/div显示的内容就是你写进去的Hello。五、替换元素的特点1. 内容由外部资源或浏览器决定这是最本质的特点。img显示图片资源input显示浏览器控件iframe显示另一个页面video显示视频内容2. 通常有“固有尺寸”很多替换元素有自己的默认尺寸或固有尺寸intrinsic size。比如图片有原始宽高视频有原始尺寸输入框在浏览器里也可能有默认显示尺寸例如img srca.png /如果你不写宽高浏览器也能根据图片原始大小显示。这和普通div不一样div没内容时通常撑不开。3. 某些布局表现比较特殊替换元素在 CSS 里的表现有些地方和普通元素不一样常见体现在宽高计算基线对齐vertical-alignobject-fit默认样式六、为什么面试会问这个因为这个概念会影响你对一些 CSS 现象的理解。1. 为什么img可以直接设置宽高因为img是替换元素它本身有固有尺寸也能直接按资源内容渲染。img { width: 200px; height: 100px; }2. 为什么图片底部会有空隙这是经典题。img默认是inline 替换元素会参与行内排版并且默认按基线 baseline对齐所以图片底部常会出现一点空白缝隙。常见解决方式img { display: block; }或者img { vertical-align: middle; }或者img { vertical-align: bottom; }3. 为什么表单元素样式不完全一致因为像input、select这类替换元素很多是浏览器原生控件不同浏览器、不同系统的默认渲染会有差异。所以实际开发里常会做样式重置。七、替换元素和非替换元素的区别对比项替换元素非替换元素内容来源外部资源或浏览器机制标签内部内容是否有固有尺寸通常有通常没有是否由浏览器特殊渲染是否常见例子img、input、iframediv、span、p八、举几个具体例子替换元素img srca.jpg / input typetext / iframe srchttps://example.com/iframe这些元素显示的内容都不是靠标签里的普通文本决定的。非替换元素divhello/div spanworld/span这些元素显示什么就取决于你写了什么内容。九、面试高分回答模板替换元素是指元素的显示内容不是由标签内部的文本直接决定而是由外部资源或者浏览器的默认机制替换生成的元素。常见的替换元素有img、input、textarea、select、iframe、video等。它们通常有固有尺寸并且在布局和对齐上会有一些特殊表现比如img默认是行内替换元素容易出现基线对齐导致的底部空隙问题。相对地像div、span这类内容由自身文本和子元素决定的就是非替换元素。十、简洁背诵版替换元素就是内容由外部资源或浏览器机制决定的元素。常见有img、input、textarea、select、iframe。特点通常有固有尺寸布局表现比较特殊。