css - canvas与块级元素
问题描述
这两天在看canvas，资料说canvas是块级元素。然后有个事情就让我很费解。。。
有简单的 html文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="a" style="border: 1px solid #000;">
不支持canvas!
</canvas>
</body>
</html>有这样两个小知识点：canvas 如果不设置宽高，默认 300*150.而拥有定宽的块元素想在所在行实现水平居中，只要设置css属性margin: 0 auto;就可以了。
但是，我给这个标签加了 margin 属性，它并没有水平居中。
我觉得可能是因为默认的 300*150 是画布内容的宽高，想达到效果要设置画布的大小。然后我在行内样式又追加了canvas的宽高~还是不能实现水平居中。
想让它水平居中，必须要设置display: block。
可是，canvas 如果是块级元素的话，它的 display 属性难道不应该默认就是 block 吗？十分费解。也不知道是只有 canvas 这样还是其他的块级元素也有这样的表现。。有了解的朋友可以帮忙解答一下吗？谢谢。
canvas是内联元素，并且是属于内联置换元素。
在chrome中，当没有设置display的时候，他的字体颜色是比较淡的。而他的默认属性是inline。所以不是块级元素了，那资料说错了。
至于资料为什么说错，我想是他还不理解CSS还有一种元素，叫做置换元素。通常内联元素是无法设置高宽的，但是内联置换元素却是可以的。
所以canvas是内联可置换元素。对于内联可置换元素来说，当margin-left和margin-right被设置为auto的时候，他的值为0。
所以就有你上面这种情况了。他的计算不同于块级可置换元素，块级可置换元素margin-left和margin-right被设置为auto的时候，他们的值会相等，所以就水平居中了。
（如果有兴趣的话可以关注公众号：编程说，里面有讲CSS的这些知识。）
这篇关于css - canvas与块级元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
