CSS可替换元素

mason00
224 阅读3分钟
  • MDN 关于可替换元素的解释

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式

可替换元素有:

有些元素仅在特定情况下被作为可替换元素处理，例如：

HTML 规范也说了 <input> 元素可替换，因为 "image" 类型的 <input> 元素就像<img>一样被替换。但是其他形式的控制元素，包括其他类型的 <input>元素，被明确地列为非可替换元素（non-replaced elements）。该规范用术语小挂件（Widgets）来描述它们默认的限定平台的渲染行为。

用 CSS content 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中，因此是“匿名的”。

不可替换元素

除了可替换元素，其他标签都为不可替换元素。如<p> <div> <h1>等

分析

我们可以用一种更通俗易懂的方式来理解，所有可替换元素，其实都是两层 div，外层 div 表示它们在页面布局中的展示，内层 div 是可替换元素的内容（如视频、图片、网页等等）。我们的 CSS 属性，只可以修改外层的 div 的布局效果，而无法作用于内层 div。

这里用canvas举例

<canvas id="demo" width="300" height="300"></canvas>

const canvas1 = document.querySelector('#demo')
const ctx1 = canvas1.getContext('2d')

ctx1.moveTo(0,0);
ctx1.lineTo(300,300)
ctx1.stroke()

得到如下图

11.png

canvas画布大小默认为 300 150

当我们通过css设置宽高时

<canvas id="demo" style="width:300px, height:300px"></canvas>

这时我们修改的是画布的大小（外层div），画纸依然为300:150，所以我们设想应该是

13.png

但实际上

14.png

因为画纸不会让画布那部分空出来，会自动铺满画布，这样我们看到的图像就会发生形变

15.png

为了避免这个问题就需要我们动态计算想要的canvas的尺寸，然后去操作canvas的width和height属性，而不是通过css来控制大小

属性

另外可替换元素还有两个独有的css属性，用于控制内层div在外层div中填充或者定位方式

object-fit

此属性用于指定可替换元素的内容对象在元素盒区域中的填充方式。（类似于 background-size） 此属性默认为 fill

object-position

此属性用于指定可替换元素的内容对象在元素盒区域中的位置。（类似于 background-position）

此属性默认为 50% 50%

垂直对齐方式

CSS 中的vertical-align 属性，用于指定行内元素的垂直对齐方式。可替换元素 都是行内块元素，在浏览器中此属性的默认值与其余行内元素不同，这也是导致文字与图片对不齐问题的原因。

avatar
文章
阅读
粉丝