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

1、块级元素(block-level element)：一个水平流上只能显示一个块级元素，多个块级元素则换行显示

也就是说块级元素横向默认充满其父元素的内容区域，自带换行特性，其左右两边没有其他元素，即块级元素默认是独占一行的。
但是要注意的是："块级元素"和"display为block的元素"不是一个概念，例如<li>元素默认的display值为list-item,<table>默认的display值默认为table,但他们都是块级元素

• 2、行内元素：行内元素不形成新内容块，即在其左右可以有其他元素。

• 3、 替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容，在其显示中生成了框。
HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素。
Example：

1. <img src=”path/to/picture.jpg”/>
   浏览器根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看HTML代码，则看不到图片的实际内容。
2. <input type="submit" name="submit" value="提交"/>
   浏览器根据<input>标签的type属性来决定是显示输入框，还是按钮。

• 4、 不可替换元素

HTML的大多数元素是不可替换元素，即其内容直接表现在浏览器。
Example：
<p>段落的内容</p>
<label>label的内容</label>

• 5、 替换的行内元素：具有“内在尺寸”，尺寸是由自身决定的，而不会受周围环境的影响，如<img>和<input>等，但是如果同时定义<img>标签的width属性，和css的width属性，根据层叠原理，css的属性将优先于<img>标签的width属性;替换的行内元素的高度是有height属性决定

• 6、非替换的行内元素：（如 a,span等元素）的宽度是其内容经过浏览器解释后实际的宽度，而不能通过设定width属性为非替换的行内元素设置宽度，非替换的行内元素的高度是由框高度的行高决定的。