阅读 53

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 属性设置一个默认值,一般是 blockinline


讲到这里,关于元素显示方式,其实我们就差不多讲完了,直至我们遇到一道面试题,题目如下:

为什么 <img>、<input> 等行内元素可以设置宽高?

嗯?刚刚不是说行内元素的 width 和 height 属性都会失效吗,但是为什么还能设置宽高呀

解决这个问题,我们还需要知道一个知识点,可替换元素和不可替换元素

不可替换元素 是指那些 元素的展示内容就是标签之间的文本 的元素,例如:

  • <p>:<p>元素的展示内容</p>
  • <span>:<span>元素的展示内容</span>

可替换元素 是指那些 根据元素的属性决定元素的展示内容 的元素,例如:

  • <img>:根据 src 属性,决定图片的实际内容
  • <input>:根据 type 属性,决定表单的实际类型

不难发现,可替换元素大多是空元素,正因为元素里面没有内容,所以才需要通过属性决定展示的内容

可替换元素有内置宽高,它们的显示方式和 inline-block 元素一致,因此可以设置 width 和 height

文章分类
前端
文章标签