CSS学习笔记(十二) 显示方式
元素的显示方式由 CSS display 属性控制
如果 display 属性的值为 block，那么该元素被称为 块级元素，它们表现出来的特点如下：
-
独占一行，前后都有换行符
-
width 和 height 都能生效
如果没有设置宽高，那么宽度默认占满父级元素宽度，高度由内容撑开
-
margin 和 padding 都能生效
如果 display 属性的值为 inline，那么该元素被称为 行内元素，它们表现出来的特点如下：
- 不会独占一行，前后没有换行符
- width 和 height 都会失效，元素的宽高都由内容撑开
- margin 和 padding 在水平方向上可以生效，但是在垂直方向上都会失效
如果 display 属性的值为 inline-block，那么该元素被称为 行内块级元素，它们表现出来的特点如下：
- 不会独占一行，前后没有换行符
- width 和 height 都能生效
- margin 和 padding 都能生效
此外，display 属性还能设置为其它值，这里也不一一进行列举
若未设置 display 属性的值，那么会根据元素的类型给 display 属性设置一个默认值，一般是 block 或 inline
讲到这里，关于元素显示方式，其实我们就差不多讲完了，直至我们遇到一道面试题，题目如下：
为什么 <img>、<input> 等行内元素可以设置宽高？
嗯？刚刚不是说行内元素的 width 和 height 属性都会失效吗，但是为什么还能设置宽高呀
解决这个问题，我们还需要知道一个知识点，可替换元素和不可替换元素
不可替换元素 是指那些 元素的展示内容就是标签之间的文本 的元素，例如：
- <p>：
<p>元素的展示内容</p> - <span>：
<span>元素的展示内容</span>
可替换元素 是指那些 根据元素的属性决定元素的展示内容 的元素，例如：
-
<img>：根据
src属性，决定图片的实际内容 -
<input>：根据
type属性，决定表单的实际类型
不难发现，可替换元素大多是空元素，正因为元素里面没有内容，所以才需要通过属性决定展示的内容
可替换元素有内置宽高，它们的显示方式和 inline-block 元素一致，因此可以设置 width 和 height
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】
