IDEA2023.1.3破解,IDEA破解,IDEA 2023.1破解,最新IDEA激活码

可替换元素和非替换元素

IDEA2023.1.3破解,IDEA破解,IDEA 2023.1破解,最新IDEA激活码

可替换元素和非替换元素

可替换元素replaced element也称作可置换元素,其展现效果不是由CSS来控制的,这些元素是一种外部对象,它们外观的渲染,是独立于CSS的。非置换元素non-replaced element也称作非替换元素,其内容由CSS渲染直接表现给客户端。

可替换元素

  • 一个内容不受CSS渲染控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸例如宽度、高度、宽高比等的元素,被称之为置换元素。对于可替换元素,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。
  • 可替换元素的内容不受当前文档的样式的影响,CSS可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。对于某些可替换元素,例如<iframe>元素,可能具有自己的样式表,但它们不会继承父文档的样式。
  • CSS能对可替换元素产生的唯一影响在于,部分属性支持控制元素内容在其框中的位置或定位方式。CSS在某些情况下会对可替换元素做一些特殊处理,比如计算外边距margin和一些auto的具体值。一部分可替换元素,其本身具有的尺寸和基线baseline会被一些CSS属性用到,加入计算之中,例如vertical-align,只有可替换元素才能具有这种自带值。
  • 例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,图片的内容由src决定,CSS并不考虑对图片的内容进行渲染。又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。
  • 常见的可替换元素,例如<iframe><video><embed><img>等,有些元素在特定情况下会被当作可替换元素处理,例如<option><audio><canvas><object><applet><input>等。

非替换元素

  • 非替换元素是其内容包含在文档中的元素,其内容可以受CSS渲染控制。
  • 非替换元素的内容不会超出CSS的模型范围,CSS在渲染时会考虑非替换元素的内容。
  • HTML的大多数元素是不可替换元素,即其内容直接表现给浏览器,例如<div><p><h1>~<h6><table>等等等等。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/87f53471d6c2
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element
https://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element

文章永久链接:https://tech.souyunku.com/?p=39692


Warning: A non-numeric value encountered in /data/wangzhan/tech.souyunku.com.wp/wp-content/themes/dux/functions-theme.php on line 1154
赞(71) 打赏



未经允许不得转载:搜云库技术团队 » 可替换元素和非替换元素

IDEA2023.1.3破解,IDEA破解,IDEA 2023.1破解,最新IDEA激活码
IDEA2023.1.3破解,IDEA破解,IDEA 2023.1破解,最新IDEA激活码

评论 抢沙发

大前端WP主题 更专业 更方便

联系我们联系我们

觉得文章有用就打赏一下文章作者

微信扫一扫打赏

微信扫一扫打赏


Fatal error: Uncaught Exception: Cache directory not writable. Comet Cache needs this directory please: `/data/wangzhan/tech.souyunku.com.wp/wp-content/cache/comet-cache/cache/https/tech-souyunku-com/index.q`. Set permissions to `755` or higher; `777` might be needed in some cases. in /data/wangzhan/tech.souyunku.com.wp/wp-content/plugins/comet-cache/src/includes/traits/Ac/ObUtils.php:367 Stack trace: #0 [internal function]: WebSharks\CometCache\Classes\AdvancedCache->outputBufferCallbackHandler() #1 /data/wangzhan/tech.souyunku.com.wp/wp-includes/functions.php(5109): ob_end_flush() #2 /data/wangzhan/tech.souyunku.com.wp/wp-includes/class-wp-hook.php(303): wp_ob_end_flush_all() #3 /data/wangzhan/tech.souyunku.com.wp/wp-includes/class-wp-hook.php(327): WP_Hook->apply_filters() #4 /data/wangzhan/tech.souyunku.com.wp/wp-includes/plugin.php(470): WP_Hook->do_action() #5 /data/wangzhan/tech.souyunku.com.wp/wp-includes/load.php(1097): do_action() #6 [internal function]: shutdown_action_hook() #7 {main} thrown in /data/wangzhan/tech.souyunku.com.wp/wp-content/plugins/comet-cache/src/includes/traits/Ac/ObUtils.php on line 367