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学习笔记 】