CSS 替换元素与非替换元素详解

什么是替换元素

根据“外在盒子”是内联还是块级我们可以把元素分为内联元素和块级元素，而根据是否具有可替换内容，我们也可以把元素分为替换元素和非替换元素

tip

比如 <img src="1.jpg"> 如果我们把上面的 1.jpg 换成 2.jpg，图片就会被替换

这种通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”

img、object、video、iframe 或者表单元素 textarea,input、select 以及 button 都是典型的替换元素。

其他特性

内容的外观不受页面上的 CSS 的影响，需要类似 appearance 属性，或者浏览器自身暴露的一些样式接口，例如 ::-ms-check{} 可以更改高版本 IE 浏览器下单复选框的内间距、背景色等样式，但是直接 input[type='checkbox']{} 却无法更改内间距、背景色等样式。
基本样式外部 CSS 很难改变
有自己的尺寸。替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是 300 像素 × 150 像素，如 video、 iframe 或者 canvas, 也有少部分替换元素为 0 像素，如 img 图片