几个点：

• 关于 width auto 的作用机制
  • width auto 取决于父元素的宽度
• 关于 height auto 的作用机制
  • height auto 取决于子元素的高度
• 关于 height 设置百分比高度值：需要父元素有一个可以生效的高度值；
  • 💡为什么会这样哪？因为 css 规范中 指定：如果元素的高度值没有显示指定，就会设为 auto，而父元素的高度值为 auto，子元素的百分比高度值也就没法计算。 'auto' * 100/100 = NaN
• max-width/min-width：
  • max-width 的优先级是最高的，超过 !important，例如width:100px!important;max-width:50px;这里 max-width设置会生效
  • 🔆max-width /max-height 在实现展开和收起动画上很有用，因为如果我们使用 width 从 XX ~0，这是元素中的内容布局会受到影响，而使用 max-width就不会
    • 比如 naive ui 的 menu 菜单就是用 max-width 实现的。
• 关于行内元素中的几种盒子：
  • 行内框：内容区加行距后得到的方框
  • 行框：过一行中各行内框最高点和最低点的方框
  • 行间距
  • 内容区
  • 字体框
  • 幽灵空白节点：《CSS 新世界》中的说法
• line-height 决定了 内联元素的外在高度；
  • 对于块级元素，line-height 对其本身是没有作用的，实际影响的是 块级元素内部的内联元素的高度。
• inline-block 与 inline 元素的区别？
• inline-block 元素与 inline 元素在一起的表现？
• 💡注意 vertical-align 是不继承的。也就是在 块级元素中的
• ❓ 为什么这一章的标题翻译是视觉格式化？
  • A：因为 format context，因为格式化上下文这个概念。

2023年10月18日08:57:34

• 还是不理解关于包裹性的说法，以及这个案例的作用机理：按钮元素“包裹性”示意 » CSS世界demo演示

行内元素

CSS 世界中，块级元素负责排版，行内元素负责内容。

常见的行内元素包括 span、a等非置换元素，以及image等置换元素。

行内元素基础

行内元素的布局比块级元素要复杂一些，首先先了解行内布局的一些基本术语和概念：

• **字体框：**由字体具体定义也叫字符框；
• 内容区：对非置换元素，内容区是各字符的字体框连在一起形成的方框。对置换元素，比如图片，内容区就是图片的范围；
• **行距：**行距是 font-size 和 line-height 之差，二者之差除以 2 之后分别添加到内容区的上部和下部。
• 行内框：内容区加行距后得到的方框。对非置换元素，行内框的高度等于 line-height。对置换元素，行内框的高度等于内容区的高度。
• 行框：过一行中各行内框的最高点和最低点的方框。

看起来简单的行内元素，实际上内部是由这么多部分组成的：一个段落由多个行框组成，而一个行框由多个行内框构成，而行内框又由内容区和行距构成。

接下来我们来看看行框中各元素的行内框高度是如何确定的：

1. 确定行内涉及的文本的 font-size 和 line-height 值，确定行距，添加到字体框的上下部；
2. 确定行内各置换元素的的 height\border\margin\pading\border 等值。（置换元素的高度受这些属性的影响）；
3. 根据 vertical-align 值，将各内容区的基线对齐，这样行内框的位置就确定了。
4. 根据行内框的位置确定行框的高度。

基线与行高

行中各部分如何对齐影响了行框的最终高度，而元素对齐离不开最基本的基线（baseline)。

**基线是指文字排版中，用于放置字符的一条基准线。**需要注意的是，基线位置内置在字体文件中，而在不同的字体文件中，基线的位置也不尽相同。

📝基线是英文字体的概念，指字母 x。

line-height属性完全决定了行内非替换元素的高度。

直观感觉我们可能认为行内非替换元素的高度主要是由 font-size属性来决定。看下边这个例子：

上下两个代码的区别在于上边代码的 line-height 为 0，下边代码 font-size 为 0。从中可以看出行内匿名文本元素的高度完全是由 line-height 属性决定的。虽然第一段代码可以看到文本，但由于 line-height 为 0， 其实它在 css 布局中是不占据行高的。

对于替换元素（如图片），自身是有宽度和高度的，line-height是不起作用的，替换元素的行内框高度与块级元素一样，是受内容（图片）、外内外边距、边框等影响的。

对于块级元素，line-heght 不直接起作用，而影响的是块级元素内的文本高度。

幽灵节点

摘自《CSS世界》一书

“幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样。

我们有时会碰到一些奇怪的现象，其背后就是幽灵空白节点作祟。

**案例1：**看下面这个例子：按照正常的理解，div块级元素的高度应该是其内容撑开的，但这里明明span元素没有内容，这个高度是如何来的哪？

这里的原因就是幽灵空白节点，想想span元素前还有一个宽度为0的空白字符，是不是就解释的通了。

**案例2：**这里的高度又是为何？

line-height

vertical-align

行框的高度不仅受行内框高度影响，也受行内框的位置影响。而行内框的位置就取决于 vertical-align属性。

vertical-align用于指定行内元素如何与父元素对齐。同时需要注意的是vertical-align只能应用于内联元素以及display值为table-cell的元素。

vertical-align通常用于****

line-height 与 ver

块级元素

width/height可以说是块级元素非常重要的两个属性，但实际使用中会出现很多意想不到的情况，这就需要理解他们的作用细节。

width/height 作用细节

width

width的默认值是auto，它至少具有以下四种宽度表现：

• 充分利用可用空间， div 、p这些元素的宽度默认是100%于父级容器的
• 收缩与包括，典型代表就是浮动、绝对定位、inline-block元素或table元素
• 收缩到最小，table-layout为auto的表格中
• 超出容器限制，当内容很长的连续字符，同时设置了white-space:nowrap

height

height的属性的默认值也是 auto，但与width:autto的表现不同，height:auo 取决于子元素的高度。

对于百分比单位，height和width有一个比较明显的区别对于，width属性，就算父元素width为auto，其百分比值也是支持的；但是，对于height属性，如果父元素height为auto，只要子元素在文档流中，其百分比值完全就被忽略了。

要想height的百分比值生效其父级必须有一个可以生效的高度值。

为什么会这样哪？因为 css 规范中 指定：如果元素的高度值没有显示指定，就会设为 auto，而父元素的高度值为 auto，子元素的百分比高度值也就没法计算。 'auto' * 100/100 = NaN

min-width/max-width以及min-height/max-height

这一组属性通常是为了实现自适应布局。

作用细节：

• 当同时指定**width**和**min-width**/**max-width**时，最终的宽度值取决于**width****属性的值。**如果width在min-width/max-width之间，则width值会生效，否则min-width/max-width生效。
• max-width 的优先级是最高的，超过 !important，例如width:100px!important;max-width:50px;这里 max-width设置会生效
• 🔆max-width /max-height 在实现展开和收起动画上很有用，因为如果我们使用 width 从 XX ~0，这是元素中的内容布局会受到影响，而使用 max-width就不会
  • 比如 naive ui 的 menu 菜单就是用 max-width 实现的。

---