Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue May 4, 2019 · 15 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the html html label May 4, 2019
@hbl045
Copy link

hbl045 commented May 5, 2019

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

@yxkhaha
Copy link

yxkhaha commented May 5, 2019

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

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

@Konata9
Copy link

Konata9 commented Aug 4, 2019

置换元素的定义如下:

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

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

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

@seho-dev
Copy link

seho-dev commented Aug 4, 2019

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

@mcmichaelchan
Copy link

  • script
  • img
  • video
  • audio
  • picture
  • iframe

@censek
Copy link

censek commented Oct 21, 2019

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

@rennzhang
Copy link

置换元素(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

@blueRoach
Copy link

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

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

@MrZ2019
Copy link

MrZ2019 commented Sep 17, 2020

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

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

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

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

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

@xiezhenghua123
Copy link

置换元素:可以替换元素标签类容(img、input等)
非置换元素:不能替换元素内容(label、em等)

@amikly
Copy link

amikly commented Nov 6, 2021

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

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

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

@z-m-c
Copy link

z-m-c commented Apr 21, 2022

2.1 置换元素

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

2.2非置换元素

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

@WangXi01
Copy link

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

@Iambecauseyouare
Copy link

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

@lili-0923
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
html html
Projects
None yet
Development

No branches or pull requests