CSS替换元素和非替换元素

根据是否可以通过修改某个属性值更改元素呈现的内容，可以分为替换元素和非替换元素

替换元素

以下元素都是可替换元素，以及在各种浏览器下的默认display值（图片来源《CSS世界》——张鑫旭）

针对 <input type="button" value="按钮">和<button type="button">按钮</button>，区别在于如果出现很长的文字，前者会直接裁剪溢出文字，而后者会自动换行，如下图所示：
设置样式为input[type='button'],button{width: 50px;}

原因在于两种按钮默认的white-space不同，前者为pre（不会自动换行，所以CSS3新出了pre-line和pre-wrap来实现保留空格的同时自动换行，其区别可见white-space中 pre pre-line pre-wrap的区别），而后者为normal

需要注意的是，即使input元素在Firefox下的表现形式不同于其他浏览器，对于替换元素，不管display是inline、block和inline-block中的任意一个，其尺寸计算规则都是一样的

替换元素的尺寸计算规则

在《CSS世界》中作者将替换元素的尺寸从内而外分为三种：固有尺寸、HTML尺寸和CSS尺寸，以下规则都只适用于替换元素：

1. 固有尺寸是不受外界css影响的，元素本身默认的尺寸。
2. HTML尺寸是通过html属性，如width/height/size/cols/rows等属性设置的
3. CSS尺寸则是通过css设置的，对应css盒模型中的content-box
4. 越是靠外的尺寸的优先级越高，如果固有尺寸有宽高比，在只设置宽度或高度时保持原本的宽高比，如img{width:300px}会保持图片本身的比例
5. video、canvas、iframe元素在没有设置html尺寸和css尺寸的情况下在所有浏览器下都表现为默认的宽度300像素，高度150像素。神奇的是，img（不带src属性）元素在各个浏览器下的默认尺寸不一样，IE浏览器下是28×30，Chrome浏览器下是0×0，Firefox浏览器下显示的是0×22。
   值得注意的是，在Chrome浏览器下（以及新版Firefox），img不含有src但含有不为空的alt属性是非替换元素，这时就是普通的内联元素，旧版的Firefox是不带src属性即为普通内联元素

需要注意，固有尺寸是无法修改的

例如，使用div::before{ content: url(xxx); width: 500px; display: block; }方式设置图片，此时500px的宽度并没有起作用，图片表现为固有尺寸。如果想要宽高设置起作用，需要用background的方式添加图片。
而替换元素之所以能够使用width/height修改尺寸的原因在于，替换内容默认的适配方式是填充，在css3可以用object-fit修改填充方式，因此我们视觉上看到的大小是通过填充适配得来的。
另外，替换元素的::before/after是无效的

非替换元素和替换元素的转换

在Chrome浏览器下，所有的元素都支持content属性，而其他浏览器仅在：:before/::after伪元素中才有支持，所以以下仅针对Chrome浏览器而言，在css中，把content属性生成的对象称为“匿名替换元素”
利用content生成的文本具有以下几个特点：

1. 使用content生成的文本是无法选中的，和user-select:none的效果一样
2. 使用content生成的文本无法被屏幕阅读设备和搜索引擎抓取，也就是，content替换的仅仅是视觉层
3. 不影响:empty选择器，即使给空元素设置了content，依然能被:empty匹配到

参考 张鑫旭《CSS世界》