css - canvas与块级元素

 mobiledu2502883647 发布于 2022-11-01 22:42

这两天在看canvas,资料说canvas是块级元素。然后有个事情就让我很费解。。。

有简单的 html文件如下:




    



    不支持canvas!


有这样两个小知识点:canvas 如果不设置宽高,默认 300*150.而拥有定宽的块元素想在所在行实现水平居中,只要设置css属性margin: 0 auto;就可以了。

但是,我给这个标签加了 margin 属性,它并没有水平居中。

我觉得可能是因为默认的 300*150 是画布内容的宽高,想达到效果要设置画布的大小。然后我在行内样式又追加了canvas的宽高~还是不能实现水平居中。

想让它水平居中,必须要设置display: block

可是,canvas 如果是块级元素的话,它的 display 属性难道不应该默认就是 block 吗?十分费解。也不知道是只有 canvas 这样还是其他的“块级”元素也有这样的表现。。有了解的朋友可以帮忙解答一下吗?谢谢。

1 个回答
  • canvas是内联元素,并且是属于内联置换元素。

    在chrome中,当没有设置display的时候,他的字体颜色是比较淡的。而他的默认属性是inline。所以不是块级元素了,那资料说错了。
    至于资料为什么说错,我想是他还不理解CSS还有一种元素,叫做置换元素。通常内联元素是无法设置高宽的,但是内联置换元素却是可以的。
    所以canvas是内联可置换元素。对于内联可置换元素来说,当margin-left和margin-right被设置为auto的时候,他的值为0。
    所以就有你上面这种情况了。他的计算不同于块级可置换元素,块级可置换元素margin-left和margin-right被设置为auto的时候,他们的值会相等,所以就水平居中了。
    (如果有兴趣的话可以关注公众号:编程说,里面有讲CSS的这些知识。)

    2022-11-12 01:54 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有