什么是置换元素？
今天在看教程的时候，跟着做了一下canvas的使用，未来让页面看起来舒服点我想把canvas居中，于是我想到了margin:0 suto;那么问题来了，没有办法居中，但是设置了display:block以后就可以了，我一直以为canvas是块级元素，查了一下margin这样写不能居中的原因有哪些，一个是没声明文档类型，二是没设置宽度，三是可能使用了浮动属性，这些都没有问题，那是什么原因呢？于是我决定查一下canvas到底是什么元素，在segmentfault中发现了同样的一个问题，原来canvas是内联元素，并且是内联可置换元素。对于内联可置换元素来说，当margin-left和margin-right被设置为auto的时候，他的值为0。
一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。 置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
行内级置换元素的宽高
宽度：
若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度；
典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度；
例子同上若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比；
典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px
典型的例子：比如iframe, canvas
高度：
若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
若高度的计算值为 auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；
若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍。
其它类型置换元素的宽高的定义都参照行内置换元素的定义
其它说明
置换元素有:img,input,select,textarea,object,canvas,iframe等
同样容易被混淆的内联元素有：
img 内联置换元素
inline-block:
select
textarea
input
button块级元素 ul
块元素和块级元素的区别是
块元素只是display:block的元素
块级元素也可以是display:table | list-item | flex | grid