css - 请问原子行内级盒怎么参加行内格式化上下文

问题描述

问 题

CSS2.1中有句话

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

一个内联盒是一个（特殊的）内联级盒，其内容参与了它的包含内联格式化上下文。一个'display'值为'inline'的不可替换元素会生成一个内联盒。不属于内联盒的内联块级盒（例如，可替换内联级元素，inline-block元素和inline-table元素）被称为原子内联级盒（atomic inline-level boxes），因为它们作为单一的不透明盒（opaque box）参与其内联格式化上下文

行内级盒

如上,始终不理解原子行内级盒怎么参与其行内格式化上下文,谁给帮忙解释一下,顺便给个demo就更好了

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

泻药

当 display 的值为 inline inline-block inline-table 时，盒子将被标记为行内级元素，在水平方向一个接一个排列，如果宽度不够排列将生成多行,所有display:inline的是行内盒,
不参与生成行内格式化上下文的行内级盒称为原子行内级盒
对于非替换元素，比如a，span等标签可以设置水平方向上的margin但是无法设置垂直方向的margin，至于border和padding，垂直方向可以设置，但是当border-top和padding-top到达页面顶部后就不在增加了。
而对于替换元素比如input、img等标签，是可以正常使用margin、border、padding的。

不知道这段描述可否对楼主有所帮助

这篇关于css - 请问原子行内级盒怎么参加行内格式化上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！