前言

canvas 元素有默认的宽高，到底是块级元素还是内联元素，一直都很疑惑？下面就让我们来验证

canvas 是块级元素？

在 MDN 中可以看到块级元素列表，其中就包含 canvas 元素，所以 canvas 是块级元素。

canvas 是内联元素？

下面的代码让 canvas 充满整个视窗。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin:0;padding: 0;user-select: none;}canvas{background-color: #0b2c26;}</style>
</head>
<body><canvas id="canvas"></canvas><script>const canvasEl = document.querySelector('#canvas')const ctx = canvasEl.getContext('2d')// 画板全屏const pageWidth = document.documentElement.clientWidth;const pageHeight = document.documentElement.clientHeight;canvasEl.width = pageWidth;canvasEl.height = pageHeight;</script>
</body>
</html>

由上图可知，设备视窗宽高为 320 * 568，而 body 元素的宽高为 320 * 573，canvas 元素的宽高未 320 * 568，由于 body 元素比设备高，故出现了滚动条。此时，有如下疑惑：

body 元素为什么比视窗高了 5px？

下图可知，canvas 元素在浏览器中默认是内联元素。

当为 canvas 元素添加 display: block; 属性时，body 元素的高度变成了设备高度。

设置属性后 canvas 此时是块状元素，其父元素 body 的宽高就是 canvas 元素的宽高，故 canvas 原本就是内联元素。

问题

canvas 撑满视窗后，body 元素为什么比视窗高了 5px？

总结

canvas 元素在浏览器中变现为内联元素，故就是内联元素。
canvas 需要撑满视窗时，设置属性为 display: block; 且设置宽高未视窗宽高即可。

参考

https://segmentfault.com/q/1010000007186319

canvas到底是块级元素还是内联元素？相关推荐

块级元素与行级元素（内联元素）
内联元素(inline element)一般都是基于语义级(semantic)的基本元素.内联元素只能容纳文本或者其他内联元素,常见内联元素"a".块元素(block elemen ...
浅谈块级元素和内联元素的嵌套规则
1. 替换和不可替换元素从元素本身的特点来讲,可以分为替换和不可替换元素. a) 替换元素替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容. 例如浏览器会根据<img> ...
CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
html能插入背景的行级元素,Html元素类型：块级元素、行内元素（内联元素）和行内块级元素...
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素.事实上,我以前用的时候只 ...
CSS的块级元素和内联元素，以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
行内元素（内联元素）与块级元素
在标准文档流里面,块级元素具有以下特点: 块级元素写完后会自动换行,有宽高可以修改. ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关: ...
CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客简介本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...
html中块级元素并列,HTML的块级元素和内联元素
一.任何不是块级元素的可见元素都是内联元素## 块元素(block element) * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir ...
HTML中的块级元素和内联元素
1.特性块级元素(block level element)总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示宽度(width).高度(height).内边距(padding)和外边 ...

canvas到底是块级元素还是内联元素？

canvas到底是块级元素还是内联元素？

前言

canvas 是块级元素？

canvas 是内联元素？

问题

总结

参考

canvas到底是块级元素还是内联元素？相关推荐

最新文章

热门文章