块级元素、行内元素、替换元素和非替换元素解析

《CSS权威指南》读书笔记以及知识补充

基本元素类型划分

---

块级元素和行内元素

• 块级元素
  块元素会生成一个元素框，会默认填充其父元素的内容区（元素宽度不设置的情况下，默认占满父级的100%），旁边不能有其他元素。可以理解为块元素前后都生成了“分隔符”。
  常见块元素：p，div，ol，ul，h1-h6，table，form
  特殊的块元素：li，li会生成一个标记符这个标记符会关联到元素框。
  MDN-块级元素

• 行内元素
  在一个文本行内生成元素框，而不会打断这行文本。本身前后不会生成“分隔符”，所以可以出现在另一个元素的内容中，不会破坏其显示。
  常见行内元素：span , a ,strong ,b ,em , i , big ,small ,label ,img
  MDN-行内元素

行内元素和块元素的区别
1.HTML当中，块元素不能继承自行内元素（即不能嵌套在行内元素中），但是行内元素可以嵌套在块元素当中。在CSS当中对于行内元素和块元素的嵌套没有限制。
2.行内元素不会另起新行，块元素会新起一行。
3.块元素可以设置width和height，不可替换的行内元素设置无效。
4.块元素可以设置margin和padding，行内元素padding有效；margin水平方向有效，竖直方向无效。
CSS基础-块级元素与行内元素

• Q&A：为什么行内元素padding有效；margin水平方向有效，竖直方向无效？

虽然内联元素可以增加内边距，使其看上去好像将自己所占的地方扩大了，但是它的本质还是内联元素，它只能独占一行，第二行的元素不会在意padding的影响，所以两者会合在一起。所以垂直方向上的padding虽然可以添加，但是并不占据空间

行内元素换设置margin和padding，垂直方向上不占据空间

垂直方向，内联元素只占距它自己内容区的大小，只受父元素的padding定位。而水平方向，则受父元素的padding和元素之间的margin-left，margin-right，padding（和正常块级元素一致）。
细究内联元素（你一定不知道的东西）

替换元素和非替换元素

• 非替换元素
  大部分HTML元素都是非替换元素，其内容由用户代理（如浏览器）在元素本身生成的框中显示。如span等。
• 替换元素
  用来替换元素内容的部分并非由文档直接显示。
  比如：img标签，本身是由文档之外的一个图像文件来替换，img本身没有具体内容。
  MDN-可替换元素

可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。
<input> 元素可替换，因为 "image" 类型的 <input> 元素就像<img>一样被替换。但是其他形式的控制元素，包括其他类型的 <input> 元素，被明确地列为非可替换元素（non-replaced elements）。
用 CSS content 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中，因此是“匿名的”。

• Q&A：img是行内元素，为什么可以设置宽高？
  因为img同时也是替换元素，替换元素一般有内在的宽高属性，CSS只可以修改替换元素的大小和位置，不能修改到其内部的内容的样式。
  可替换元素和非可替换元素