前端 CSS 面试题, CSS display 属性值 block,inline 和 inline-block 的区别

Step 1

Q:: 什么是 CSS 中的 display 属性？它有哪些常见的值？

A:: CSS 中的 display 属性用于定义元素的显示类型。常见的值包括 block、inline、inline-block、flex、grid 等。block 元素占据一整行并从新行开始，如 <div>；inline 元素只占据内容的宽度，不会强制换行，如 <span>；inline-block 元素具有 inline 和 block 元素的特性，既不会强制换行，又可以设置宽高，如 <button>。

Step 2

Q:: block、inline 和 inline-block 三者的区别是什么？

A:: block 元素会占据一整行，默认情况下它的宽度是父容器的 100%，可以设置宽高。inline 元素不会换行，只占据内容的宽度，不能直接设置宽高。inline-block 元素表现得像 inline 元素，但可以设置宽高，并且不占据整行。

Step 3

Q:: 什么时候使用 block、inline 和 inline-block？

A:: 当需要元素占据整行、独立展示内容时使用 block，如段落或容器。当需要内联元素排布在一行时使用 inline，如链接或文字。当需要内联排列但又需要设置宽高或内部有其他块级特性的元素时使用 inline-block，如按钮或带图标的文字。