CSS行内元素与块级元素、替换元素与不可替换元素
行内元素
特点：
- 不会独占一行，相邻的行内元素会在水平方向上排列，直到一行排不下，才会换行
- 行内元素设置width、height属性无效，它的宽高主要由内容来决定。
- 行内元素的margin和padding属性，在水平方向（top和bottom）上生效，垂直方向（left和right）上不生效。
块级元素
特点：
- 会独占一行，垂直方向上排列。默认情况下，宽度自动填满父元素的宽度。
- 可以设置width和height属性，但即使是设置了宽度，依旧独占一行。
- 可以设置margin和padding属性。
行内元素和块级元素相互转换
display: block; // 转为块级元素
display: inline; // 转为行内元素
为什么img、input等行内元素可以设置宽高？
元素是文档结构的基础。不同的元素，显式方式会有所不同，例如<div>和<span>，又例如<strong>和<p>也不一样。
在文档类型定义（DTD）中对不同的元素规定了不同的类型。
就元素本身的特点，可以分为替换元素和不可替换元素。
替换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容
例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。
不可替换元素
HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）
原因：
替换元素一般有内在尺寸，所以具有width和height，可以设定。
例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。
对于表单元素，浏览器也有默认的样式，包括宽度和高度。
