css可替换元素

• 行内元素：

１．设置宽高无效
２．设置margin，左右有效，上下无效；设置padding，上下左右都有效，即会撑大空间
３．不能自动换行

• 块级元素：

１．能够设置宽高
２．margin，paddin上下左右都有效
３．可以自动换行
４．多个块级元素，从上到下排列
————————————————

但是问题来了～
<img>是行内元素，为什么它可以设置宽高？

img确实是行内元素，但它同时也是“可替换元素(replaced element)”，也就是“内联可替换元素(replaced inline element)”，它和块级元素一样可以设置宽高以及正常设置margin。
那么，回到正题，什么是“可替换元素(replaced element)”？

mdn是这样说的：

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS来控制的。
这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS
可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

通俗地讲，可替换元素的内容是通过标签类型以及其属性值来决定的，比如img标签就是一个典型的例子，它通过src来决定其展示的内容，除此之外，常见的可替换元素还有、、等。基本上，所有的可替换元素都是行内元素。

既然有可替换元素，自然也就有“非可替换元素(non-replaced element)”，与“可替换元素”相反，即“展现效果是受css样式来控制的”，通俗将其内容由其标签包裹内容决定，我们平常使用的标签，如div、p、span、ul、li等都是非可替换元素。

补充一些img标签的特点：

img标签对应元素默认宽高为图片真实宽高；
通过css对仅对img的宽或高进行设置，图片将等比进行缩放；
————————————————
替换元素除了内容可替换这一特性以外，还有以下一些特性。

（1）内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观需要
类似appearance属性，或者浏览器自身暴露的一些样式接口，

（2）有自己的尺寸。在Web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300像素×150像
素，如、或者等，也有少部分替换元素为0像素，如图片，而表单元素的替换元素
的尺寸则和浏览器有关，没有明显的规律。

（3）在很多CSS属性上有自己的一套表现规则。比较具有代表性的就是vertical-align属性，对于替换元素和非替换元素，ve
rtical-align属性值的解释是不一样的。比方说vertical-align的默认值的baseline，很简单的属性值，基线之意，
被定义为字符x的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。

（4）所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是，替换元素默认
的display值却是不一样的，有的是inline，有的是inline-block。
————————————————

display 与替换元素

所有的替换元素都是内联水平元素
但是表现形式不一样，不同的元素不同的浏览器表现都不一样
ie和chrome的返回值都是一样的，但是firefox在textarea中和绝大多数的input 返回的是inline而不是inline-block,
但是我们不用关心他们的display一样不一样因为

替换元素有很多表现规则和非替换元素不一样。其中之一就是宽度和高度的计算规则。简单描述一下就是：替换元素的displays是inline
block和inline-block中的任意一个，尺寸计算规则都是一样的。

————————————————

替换元素的尺寸从内而外分为3类：固有尺寸、HTML尺寸和CSS尺寸。

（1）固有尺寸指的是替换内容原本的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。

（2）HTML尺寸只能通过HTML原生属性改变，这些HTML原生属性包括的width和height属性、的s
ize属性、的cols和rows属性等。

（3）CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的
尺寸，对应盒尺寸中的contentbox。

这3层结构的计算规则具体如下

（1）如果没有CSS尺寸和HTML尺寸，则使用固有尺寸作为最终的宽高。

（2）如果没有CSS尺寸，则使用HTML尺寸作为最终的宽高。

（3）如果有CSS尺寸，则最终尺寸由CSS属性决定。

（4）如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。

（5）如果上面的条件都不符合，则最终宽度表现为300像素，高度为150像素。

（6）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。
————————————————

替换元素与非替换元素

1>、 替换元素与非替换元素只差了一个src
firefox的img如果为空的话，disolay:block;outline:1px solid;宽度会百分之百适应父元素，表现起来就是span ，同时设置宽高也没什么用。完全就是一个非替换元素
chrome也有类似的特性，没有src的同时只要上边有alt的属性和属性值，看起来也和非替换元素的表现形式一致

2>、只差了一个content属性
在chrome浏览器下：

img{content:url(1.jpg)}<img>

上边的效果和<img src=“1.jpg”>一样的
还有一点就是，如果图片是有src地址的 ，我们可以通过content属性把图片的内容替换掉。但是改变的仅仅是视觉呈现，如果右键保存的时候，现实的还是原来的src对应的图片
文字边图片的案例如下：

<h1>《css世界》</h1>h1{width:180px;height:36px;background:url(logo.png);text-indent:-999px;}# 也可以使用content一行代码实现效果h1{content:url(logo.png)}

解决办法很完美是不是，但是还是有点缺陷的。我们没办法设置大小，只能是一倍图，导致看来有点模糊，移动端的话建议使用svg图片
————————————————

content与替换元素

content属性生成的对象称之为匿名替换元素。所以content生成的元素和普通元素有很多的不同的特性表现。

我们使用content生成的元素无法选中，同时阅读器和SEO都很不好，所以不要放重要的东西
不能左右：:empty伪类
动态生成的值没办法获取。

参考
链接
MDN
链接