重新css（2）深入理解content

1.什么是替换元素

在了解content之前，我们需要掌握CSS中一种常见的元素——替换元素。替换元素是“内容（content）可以被替换”的元素，常见的有“input”、“img”、“iframe”、“video”等。以图片为例 《img src=“1.png” /》我们只需要将src的图片替换掉，元素的内容就会发生改变，因此，内容可替换是替换元素的基本特性之一。除了内容可替换，替换元素还有如下特性。

（1）基本样式改不动，原文描述“内容的外观不受页面上CSS的影响”个人觉得有些不妥。什么是基本样式，依旧以图片为例，你可以通过src替换图片，但你不能通过CSS把图片上的“一个男人”变成“一个女人”。有些时候，这为我们带来了方便，如最基本的替换元素：《input type=“text”/》你可以通过CSS修改他的边框，字体等属性，但他的基本样式，如光标提示，可输入区域等，就是你改不动的，因为如果这个样式被你改了，用户就不知道哪里可以输入。当然有些情况下，这个“基本样式”也给我们带来极大的不便，如“checkbox”的基本样式，就是一个难看的方块，你还不能通过CSS修改，因此需要通过一些特殊的方法去"覆盖"他原有的样式。这里就不多做展开。

（2）有基本尺寸，原文描述“有自己的尺寸”，原文的说法也没有错，如“input”标签，在默认情况下就有一个默认长宽的输入框，“video”、“iframe”、“canvas”等标签的默认尺寸是300*150，“img”的默认尺寸是0.

（3）在很多CSS属性上有自己的一套表现规则，这里作者只说明了vertical-align属性，对于替换元素和非替换元素，非替换元素的baseline是小写字母x的小边缘，但在替换元素中则被定义为替换元素的下边缘。（这个问题可以做拓展说明，有兴趣的小伙伴可以研究一下在下面留言，还有哪些属性在两种元素中的表现不同）

2.替换元素的尺寸计算规则

我个人将替换元素的尺寸的权重由高到低分为三类：CSS>私有属性>固有尺寸（注：作者在这里将尺寸分为CSS尺寸，HTML尺寸，固有尺寸）。下面我将通过例子来说明这三种尺寸对替换元素宽高的影响。

（1）固有尺寸指的是替换元素原有的内容，这个原有的内容很有意思，以图片为例，《img src=“图片链接”/》，由于图片的基本尺寸是0（谷歌下），但图片本身还含有自己的宽高，如200100的风景图，那么img标签在没有其他样式说明的情况下他的最终“固有尺寸”是200100，而不是0，这里原有的内容指的是图片本身的宽高。还有一些元素不需要内容也会自带宽高，以《input type=“text”/》为例，你只需要在html里加入这个标签，他就会显示一个可输入的文本框，这就是他的固有尺寸。

（2）私有属性指的替换元素自带的属性，一般会表现在HTML标签中，如《img width=“200” height=“100” src=“400300的图片"/》，由于width和height私有属性的作用，图片最终会表现为widthheight的尺寸，也就是覆盖了图片的固有属性400300。这里还有一个隐藏的固有属性，那就图片的宽高比，在本例中，图片的宽高比是4:3