前端 CSS 面试题, 有哪些默认 display: block 元素和 display: inline 元素?你还知道哪些 display 取值?

Step 1

Q:: 哪些 HTML 元素的默认 display 属性为 block？

A:: 默认 display: block 的元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li>、<header>、<footer>、<section>、<article> 等。这些元素在布局中通常占据其父元素的整个宽度，并且会换行。

Step 2

Q:: 哪些 HTML 元素的默认 display 属性为 inline？

A:: 默认 display: inline 的元素包括 <span>、<a>、<strong>、<em>、<img>、<input>、<abbr>、<label> 等。这些元素在布局中仅占据内容本身的宽度，并且不会自动换行。

Step 3

Q:: CSS 中 display 属性有哪些取值？

A:: display 属性的常见取值包括：block、inline、inline-block、none、flex、grid、table、table-row、table-cell 等。不同的取值定义了元素在布局中的显示和排列方式。

Step 4

Q:: 什么时候使用 inline-block 而不是 block 或 inline？

A:: inline-block 结合了 block 和 inline 的特点：元素不会换行，占据其内容所需的宽度，但同时可以设置宽高和内外边距。常用于需要水平排列且希望控制元素大小的场景，如导航菜单中的按钮。

Step 5

Q:: 如何改变元素的默认 display 属性？

A:: 你可以通过 CSS 直接修改元素的 display 属性，例如：display: inline-block; display: flex; 或 display: none; 以达到期望的布局效果。