haizlin/fe-interview

[html] 第19天 说说你对html中的置换元素和非置换元素的理解

haizhilin2013 opened this issue · 15 comments

haizhilin2013 commented

第19天 说说你对html中的置换元素和非置换元素的理解

hbl045 commented

置换元素是指，该元素有自带的属性，并且css渲染模型不对此内容渲染，就好比img。而非置换元素是对于不是置换元素的都是。而置换元素常见在行内置换元素看到，主要是行内置换元素与行内元素的区别在于可控高度

yxkhaha commented
  • 置换元素是指：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器根据标签的src属性显示图片。根据标签的type属性决定显示输入框还是按钮。
  • 非置换元素：浏览器中的大多数元素都是不可置换元素，即其内容直接展示给浏览器。例如标签，

    标签里的内容会被浏览器直接显示给用户。

  • 👍6
  • 👎2
Konata9 commented

置换元素的定义如下：

一个 内容 不受 CSS 视觉格式化模型控制，CSS 渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。

一般来说 span 这种行内非置换元素设置宽高是没有意义的，除非修改 display: inline-block。对于行内置换元素，是可以设置宽高的。比如常用的 img 标签自适应图片时，我们只需要定义一个宽或者高，剩下的就会自动帮我们计算。

参考文章：置换和非置换元素

seho-dev commented

看了楼上提供的博客，看了第一遍感觉不是太懂，看了第二遍大概自己对置换元素和非置换元素有一个概念；
置换元素是非常特殊的元素，通常会有自己的宽度高度等，css渲染不会对此元素进行渲染，非置换元素在w3c没有明确的规定，可以确认的是置换元素之外的就是非置换元素；

mcmichaelchan commented
  • script
  • img
  • video
  • audio
  • picture
  • iframe
censek commented

置换元素（Replaced Element）：主要是指 img、input、textarea、select、object 等这类默认就有 CSS 格式化外表范围的元素。

rennzhang commented

置换元素（Replaced Element）

简单来说，置换元素可以设置宽 高,他们有自己的属性，和inline-block有一样的属性

  1. 主要是指 img、input、textarea、select、object 等这类默认就有 CSS 格式化外表范围的元素。

  2. 浏览器根据元素的标签和属性，来决定元素的具体显示内容

  • 例如：浏览器根据标签的src属性显示图片。根据type属性决定显示输入框还是按钮

非置换元素（non-Replaced Element）:

  1. 就是除了 img、input、textarea、select、object 等置换元素以外的元素。

  2. 内容直接展示给浏览器。例如标签，标签里的内容会被浏览器直接显示给用户

来和我一起刷3+1吧
gitHub: https://github.com/Renato-Z/exercises/blob/master/history.md

  • 👍1
blueRoach commented

  • 置换元素：是根据元素自身的标签和属性来决定展示什么内容。他们有自己属性，就算你什么都没设置，他也有自己的宽高样式等。
    如img的src，input的type，select的option标签等

  • 非置换元素：内容直接展示出来

MrZ2019 commented

置换元素（Replaced Element）
简单来说，置换元素可以设置宽 高,他们有自己的属性，和inline-block有一样的属性

主要是指 img、input、textarea、select、object 等这类默认就有 CSS 格式化外表范围的元素。

浏览器根据元素的标签和属性，来决定元素的具体显示内容

例如：浏览器根据标签的src属性显示图片。根据type属性决定显示输入框还是按钮
非置换元素（non-Replaced Element）:
就是除了 img、input、textarea、select、object 等置换元素以外的元素。

内容直接展示给浏览器。例如标签，标签里的内容会被浏览器直接显示给用户

xiezhenghua123 commented

置换元素：可以替换元素标签类容（img、input等）
非置换元素：不能替换元素内容（label、em等）

amikly commented

置换元素**（replaced element）是指一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素。

即：置换元素主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素

非置换元素：内容直接展示给浏览器

z-m-c commented

2.1 置换元素

  1. 一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。
  2. 置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
  3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。
  4. HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

2.2非置换元素

HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）

WangXi01 commented

简单来说，自带样式，宽高，
script
img
video
audio
picture
iframe

Iambecauseyouare commented

置换元素通常元素本身就拥有固有宽高，不受css视觉格式化模型控制，css渲染模型并不对此内容进行渲染
常见的置换元素
img
input
textarea
select
object
iframe
canvas
除此之外就算是非置换元素

lili-0923 commented

  • 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。 eg：、、<textarea>、、 不可置换元素：指浏览器中的大多数元素，其内容直接展示给浏览器。 eg：除了 img、input、textarea、select、object 等置换元素以外的元素