行内元素与块级元素

行内元素与块级元素对比

1. 内容
   一般情况下，行内元素只能包含数据和其他行内元素。
   而块级元素可以包含行内元素和其他块级元素，这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构
2. 格式
   默认情况下，行内元素不会独占一行，且不能设置宽高，块级元素独占一行，且可以设置宽高

特殊情况： img input 等元素为行内元素，但是可以设置宽高

介是为啥呢？
从元素本身的特点来讲，可以分为可替换和不可替换元素。

可替换元素
可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
举个栗子：
浏览器会根据 <img> 标签的 src 属性的值来读取图片信息展示，在代码中是看不到图片的实际内容的，如 <img> <input> <textarea> <select> <object> 等都是可替换元素。这些元素往往没有实际的内容，即是一个空元素

可替换元素拥有默认宽高，不独占一行，可以设置宽高，几乎所有的可替换元素都是行内元素

<img src="tu.png" />
<input type="submit" name="submit" value="提交" />
<!-- 浏览器会根据元素的标签类型和属性来显示这些元素，替换元素在其显示中生成了框 -->

不可替换元素
大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）
举个栗子：

<p>内容</p>
<!-- <p>是一个不可替换元素，“内容”直接显示 -->

---

tips：块级元素没有设置宽高时
宽：父元素的宽
高：子元素的高（没有子元素则为0）