h5中HTML标签能不能设置高宽,只需要回答能与不能,就行?

h5中HTML标签能不能设置高宽,只需要回答能与不能,就行?,第1张

这还真不是一个能或不能就能回答的,简单点来说就是:块级元素(也包括行内块级元素)能够设置宽高,行内元素则不能设置宽高,还有一些特殊元素比如表格元素则要根据具体情况来看,一般情况下可以设置宽高,但如果实际内容超出所设置的宽高范围,则所设置的宽高自动失效,表格会自动调整实际宽高。

一、iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

二、有以下方式对iframe进行设置高度和宽度

1、iframe元素标签可以使用width和height属性

<iframe src ="/index.html" width="400" height="300"></iframe>

2、可以使用css来定义宽度和高度

<iframe src ="/index.html" style="width:400pxheight:300px"></iframe>

三、补充:

iframe的属性如下:

当没有设置宽度和高度的时候,canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用 CSS 来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果 CSS 的尺寸与初始画布的比例不一致,它会出现扭曲。

所以当我们给 canvas 设置宽高时需要注意,比例需要时 2:1

canvas html 属性和 css 属性

理论上 canvas 的 width 和 height 都只能是整数,但实际上可以设置小数,浏览器默认会进行取整 *** 作;也可以是带 px 的字符串,但是对于其它单位都会被忽略,渲染为 px;如果设置为负数或者不设置,默认宽是 300,高是 150

为什么<canvas>元素默认尺寸是 300 150,而不是其他尺寸组合呢?这个是 CSS 规范中定义的,作为替换元素,默认的尺寸是 300 150,<canvas>元素就是替换元素,因此默认尺寸是 300 150。由于<svg>元素也是替换元素,因此,<svg>默认的尺寸也是 300 150。

如果没有设置宽高属性,获取是取到的值是默认值

CSS 的 width,height 属性权重要大于<canvas>元素的 width,height 属性权重。

<canvas>的等比例特性是强制的,会忽略 HTML 属性的设置。对比下面的测试 HTML:

最终的宽度表现不是 300 而是等比例缩放的 176px。

1:Canvas 默认的画布宽高是 300 * 150,当你设置标签的 width,height 属性值时,控制的是 Canvas 的元素本身的宽高,和 Canvas 画布的宽高大小。同时设置定了两个值。

2:而 Css 设置 width,height 时,只仅仅控制了 Canvas 元素自身的宽高,而不会改变 Canvas 画布大小。

而我们最终展示在页面上的内容是 canvas 画布的内容,然后缩放到 css 值大小

比如我们设置了 css

此时 canvas 元素的大小是 600px * 300px ;但是画布大小还是 300px * 150px

所以还是会先在 300px * 150px 上的画布上先绘制,然后在拉伸绘画后的内容到我们 css 大小

此时我们获取 canvas 对象的 width 和 height 依旧还是 300px * 150px (而我们绘制图案是也是基于画布大小来说的默认画布的左上角是 0,0)

当我们使用各个 Canvas API 进行图形图像绘制的时候,其坐标位置,尺寸大小等都是相对于<canvas>元素的 HTML 属性 width/height,与 CSS width/height 没有任何关系。

<canvas>元素本质上是个位图,因此,在 retina 高密度屏幕下,如果如果绘制图像,则如果按照视觉尺寸来绘制,可能就会模糊,我们可以将<canvas>元素的尺寸用 HTML 高宽属性设置为 2 倍尺寸,然后使用 CSS 高宽属性设置视觉尺寸为布局需要的尺寸大小。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7205085.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存