<style>
.s1 {
display: inline; /* default value*/
border: 5px solid rebeccapurple;
}
.s2 {
border: 5px solid goldenrod;
display: inline-block;
}
</style>
<div style="width: 15em">
The text in the span
<span class="s1">can be split in several lines as it</span>
is an inline box.
</div>
<!-- 在同一个行内格式化上下文中,原子行内级盒子( atomic inline-level box ) 不能拆分成多行 -->
<!-- 指定为 inline-block, “cannot be split into several lines as it” 都是在同一个行内,即使因为宽度导致换行,也可以看出,他们还是在同一个区域,并没有被“多行” -->
<div style="width: 15em">
The text in the span
<span class="s2">cannot be split in several lines as it</span>
is an inline-block box.
</div>
<style>
.s1 {
border: 5px solid rebeccapurple;
}
</style>
<div class="example" style="width: 20em">
Before that night—<span class="s1"
>a memorable night, as it was to prove—hundreds of millions of
people</span
>
had watched the rising smoke-wreaths of their fires without drawing any
special inspiration from the fact.”
</div>
设定为 inline-block 则不会新开一行
<style>
.s2 {
border: 5px solid goldenrod;
display: inline-block;
}
</style>
<!-- inline-block -->
<div class="example" style="width: 20em">
Before that night—<span class="s2">a memorable night, as it was to prove—hundreds of millions of people</span>
had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”
</div>
垂直方向的对齐 vertical-align
<style>
.s3 {
font-size: 200%;
vertical-align: top;
}
</style>
<!-- 垂直方向 -->
<div class="example horizontal">
Before that night—<span class="s3">a memorable night</span>, as it was to
prove—hundreds of millions of people had watched the rising smoke-wreaths
of their fires without drawing any special inspiration from the fact.”
</div>
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
大致的意思,会让元素生成一个linline-level块容器,而一个inline-block内格式化之后类似于block box,但是元素自身却被格式化一个原子类linline-level box。
The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.
大至意思:
visual formatting model 视觉格式化模型
在 IFC 中可能会涉及到的模型有:
观察到,“原子行内级盒子的内容不会拆分成多行显示”,这说明 inline-block 和 inline-table 创建的正是原子行内级盒子。
原因如下:
争议:
在 css 2 9.2.2 中说:
Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.
内行级元素 生成参数 IFC 的行内级盒子
这与上面 mdn 中说的 “行内级盒子包括行内盒子和原子行内级盒子两种,区别在于该盒子是否参与行内格式化上下文的创建” 不一致。
IFC - inline formatting context (行内格式化模型)
只要是在某个元素内(即使是块级元素),其内部的内容(文字或者元素)按照书写模式依次排列,就形成了 IFC, 换行会分割成的 IFC。 书写模式:水平方向是从左到右,竖直方向是从上到下排列。
white-space 设置如何处理元素中的 空白
vertical-align 垂直对齐
先送上一个方便调试的链接:vertical-align 属性测试实验面板
基线
line-height 指定元素行框(line boxes)的最小高度;
vertical-align 的默认值就是基线。
关于 line-height 代码如下,
虽然我们是给 span 标签加了 100px 的 line-htight,但是发现 span 高度并不是 100px , 100px 高的是外层的 d1。这充分说明了 line-height 指定的是 line boxe 的最小高度。
从文章前面的描述,我们已经知道了 line-height 是指:在一个框里的同一行的区域。
一、基线位置不固定
二、vertical-align 基线对齐
vertical-align 是个相对的对齐的单位。
前面的 1 2 都不难理解,这里说一下第三点
第三点有两种情况,先看第一种。
这里 spanx2 我懵了,先不说了...
懵逼了看这个:vertical-align 在和谁对齐?
注意一下:
是否学会了,测试一下,来看一看,inline-block元素设置margin-bottom为负值后为什么会下移?
继续变一下,并在第二个中加方字:
这个没有添加任何margin-bottom,第二个成这样了。
会发现,明明尺寸、display水平都是一样的,结果呢,两个却不在一个水平线上对齐,为什么呢?哈哈,上面的规范已经说明了一切。第一个框框里面没有内联元素,因此,基线就是容器的margin下边缘,也就是下边框下面的位置;而第二个框框里面有字符,纯正的内联元素,因此,第二个框框就是这些字符的基线,也就是字母x的下边缘了。于是,我们就看到了框框1下边缘和框框2里面字符x底边对齐的好戏。
其实看到这里,你应该知道一些原因了。把div的文字去掉,然后加上margin-bottom。其实也是改变了元素的baseline了(你就当作改变了)。
如果你在div中添加一个vertical-align改变他的对齐方式。就变了:
tips:
ex 单位 1ex 相当于一个 x 字母的高度,不受任何字体的影响。所以是天然对文字居中的。当使用 1ex 的元素的高度小于1ex 时,可以使用这种方法垂直对(不是垂直居中对齐)
未完...
https://www.w3.org/TR/CSS2/visuren.html https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css/ https://www.brunildo.org/test/inline-block.html https://www.zhihu.com/question/61032688 https://www.jianshu.com/p/ce7e4a997a2c https://developer.mozilla.org/zh-CN/docs/Web/CSS/Inline_formatting_context https://developer.mozilla.org/zh-CN/docs/CSS/float https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height https://www.zhangxinxu.com/wordpress/2010/05/%e6%88%91%e5%af%b9css-vertical-align%e7%9a%84%e4%b8%80%e4%ba%9b%e7%90%86%e8%a7%a3%e4%b8%8e%e8%ae%a4%e8%af%86%ef%bc%88%e4%b8%80%ef%bc%89/ https://drafts.csswg.org/css2/#inline-boxes https://drafts.csswg.org/css2/#inline-formatting https://drafts.csswg.org/css2/#value-def-inline-block https://www.w3.org/TR/CSS2/visuren.html#inline-formatting