学习笔记

Appearance

一、先给一个总览表（先建立全局感） ​

display 值常叫法是否独占一行是否可设宽高是否由内容撑开
block块级元素是是否（默认占满父元素）
inline行内元素否否是
inline-block行内块否是是（默认）
none不显示———
flex弹性盒是是否
inline-flex行内弹性盒否是是
grid网格是是否

二、三大基础形态（重点） ​

1️⃣ 块级元素 display: block ​

典型元素：

html
div p h1 ul li section

特征：

  • 独占一行
  • 默认宽度：100% 父元素
  • 可以设置 width / height
  • 不是由内容撑开的
css
div {
  display: block;
}

即使里面只有一个字，它也会横向占满整行。

2️⃣ 行内元素 display: inline ​

典型元素：

html
span a em strong

特征：

  • 不独占一行
  • 宽高设置无效
  • 宽度完全由内容撑开
  • margin-top / bottom 无效
css
span {
  display: inline;
}

行内元素是“文字级”的存在。

3️⃣ 行内块 display: inline-block（你问的重点） ​

这是最容易混淆、但非常重要的一种。

特征一句话版：

看起来像行内元素（不换行），行为上像块级元素（可设宽高）

详细特性 ​

  • 不独占一行（可以并排）
  • 可以设置 width / height
  • 默认大小：由内容撑开
  • 可以设置 margin / padding
css
button {
  display: inline-block;
}

👉 这也是为什么：

  • button
  • input
  • img

天生就是行内块

三、你提到的关键点：谁是“由内容撑开”的？ ​

我们单独把这个问题说清楚。

✔ 由内容撑开的 ​

  • inline
  • inline-block
  • inline-flex
html
<span>abc</span>
<span>abcdef</span>

宽度随文字变化。

❌ 不由内容撑开的（默认） ​

  • block
  • flex
  • grid
html
<div>abc</div>

宽度仍然是父元素 100%。

四、display 不写，默认是什么？ ​

这是一个非常容易被忽略但很重要的问题。

1️⃣ 每个 HTML 标签都有“默认 display” ​

标签默认 display
divblock
pblock
spaninline
ainline
imginline-block
buttoninline-block
inputinline-block
lilist-item（≈ block）

所以：

“不写 display” ≠ 没有 display，而是使用浏览器默认样式

2️⃣ 为什么 img 不会被挤成一行文字？ ​

因为：

css
img {
  display: inline-block; /* 浏览器默认 */
}

它既能并排，又能有宽高。

五、几个容易踩坑的对比（非常重要） ​

❌ 行内元素不能设置宽高 ​

css
span {
  width: 100px; /* 无效 */
  height: 100px;
}

✅ 改成行内块 ​

css
span {
  display: inline-block;
  width: 100px;
  height: 100px;
}

❌ 行内元素上下 margin 不生效 ​

css
a {
  margin-top: 20px; /* 无效 */
}

✅ 行内块 / 块级都可以 ​

六、工程中怎么选？（实用） ​

场景推荐 display
普通布局block / flex
文字修饰inline
按钮、标签inline-block
水平排列 + 可控尺寸inline-block
一维布局flex
二维布局grid

七、一句话终极总结（建议记下来） ​

  • block：独占一行，占满父元素
  • inline：内容撑开，不能设宽高
  • inline-block：内容撑开 + 可设宽高
  • 不写 display：使用标签的默认 display