置换和非置换元素

一、置换和非置换元素

1.一、 一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素自己通常拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。

1.二、 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

1.三、 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而若是查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，仍是单选按钮等。

1.四、 HTML中的img、input、textarea、select、object都是替换元素。这些元素每每没有实际的内容，便是一个空元素。

二、非置换元素/不可替换元素

2.一、 HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器），如：

<!-- span是非置换元素 所以 hello word 被展现出来 而不是被替换成其余内容 -->
   <span>hello word</span>

三、行内级置换的宽度定义

• 若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度

典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度

• 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度

例子同上

• 若宽度的计算值为 auto 且高度有 非auto 的计算值，而且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比

• 典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置，这也是为何img是行内元素，但能够设置宽高的缘由

• 除此以外，当 width 的计算值为 auto 时，则宽度的使用值为 300px

典型的例子：好比iframe, canvas

四、行内级置换的高度定义

• 若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
• 若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
• 若高度的计算值为 auto 且宽度有 非auto 的计算值，而且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；
• 若高度的计算值为 auto 且上述条件彻底不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍

五、行内级非置换元素的宽度定义

宽度设置是无效的，如：

<!-- 设置宽度无效 ，span的宽度默认为其内容的宽度 -->
<span>hello word</span>

六、行内级非置换元素的高度定义

高度设置无效，如：

<!-- 设置高度无效 ，span的高度默认为其内容的高度 -->
<span>hello word</span>