元素的显示方式由 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学习笔记 】