HTML文档由各种元素组成。比如，p、table、span等等。每个元素都会对文档的表现有所影响。CSS中，每个元素都会生成一个框（传说中的盒子），其中包含元素内容。
元素可以根据它的创建方式分为两种：替换元素和非替换元素。创建方式会对盒模型的表现有所影响，后续的笔记中会看到。
- 替换元素：这种元素的内容部分并非由文档直接显示，而是用其他内容来替换。最常见的替换元素img，它是由文档本身之外的一个图片文件来替换的。input也是替换元素，是根据类型的值来决定内容是什么，有时内容被替换成单选钮，有时是文本输入框。
- 非替换元素：大部分HTML元素都是非替换元素，内容由浏览器在元素本身生成的框中显示。比如，span。
根据元素的显示角色分为两种：块级元素和行内元素。
- 块级元素：会生成一个元素框，并填充其父级元素的内容区，旁边不能有其他元素。当然这是在默认情况下，有浮动定位设置另说。其中，列表项有个特殊的表现，没错，就是会有标记符，这个标记符会“关联”到元素框
- 行内元素：在文本行内生成元素框，不会打断这行文本。
在HTML中，行内元素可以继承块元素，反之不允许，违反了HTML层次结构的要求。不过CSS没有这种限制。
下面这一行代码中，em可以继承p。
<p>这是一个段落中的<em>重点内容</em></p>
但是反过来就不合理，
<em>这是一个段落中的<p>重点内容</p></em>
css可以改变元素的角色，但是还是建议遵守文档层次结构要求。