置换元素和非置换元素

Posted 2020-10-30 不二了

学完基础html之后，一直以为只有两种标签元素，行级和框架，最开始知道除了各自默认的布局不同外，块级是可以定义宽高的而行级不可以，后来又知道了inline-block一类的东西行内块是可以定义宽高属性，但是一直很疑惑，在行内元素中有一些元素，如 input、img、textarea、select、object，这元素不仅有默认的宽高，还可设置他们宽高，但是他们又不是和行内块元素一样，一度很疑惑，知道接触了html5 的canvas后才起了一探究竟的心。对于canvas画布 设置的宽高，但是无法用margin居中，经查资料才发现居然还有置换元素和非置换元素的区别（大吃一惊）。

1. 置换元素/替换元素 
   1.1. 一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。 
   1.2. 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 
   1.3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。 
   1.4. HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。
2. 非置换元素/不可替换元素 
   2.1. HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器），如：

   <!-- span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 -->
   <span>hello word</span>

• 1
• 2

1. 行内级置换的宽度定义 
   
   • 若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度 
     典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度
   • 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度 
     例子同上
   • 若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比 
     典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置，这也是为什么img是行内元素，但可以设置宽高的原因
   • 除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px 
     典型的例子：比如iframe, canvas
2. 行内级置换的高度定义 
   
   • 若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
   • 若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
   • 若高度的计算值为 auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；
   • 若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍

 

 以上摘抄，侵必删。

因此个人觉得可以这样理解，对于行内置换元素能设置宽高的原因是：它们本身就有一个宽高，我们所设置的宽高，是通过一种比值的关系，以固定的宽高来来设置宽高，至于不能通过margin：auto来居中，因为本身的margin没有固有值，所以设置了margin之后还是0，就不能居中了。但是在块级元素中，设置之后左右的margin会自己计算并相等。

以上个人笔记，下面是主要内容来源，感谢大大的知识分享。 https://blog.csdn.net/SakuraLLj/article/details/48277463