专栏首页练小习的专栏可视化格式模型-IFC

可视化格式模型-IFC

行内格式化上下文(inline formatting contexts)

什么是行框 相对于块格式化上下文,在行内格式化上下文中,框(boxes)一个接一个地水平排列,起点是包含块的顶部。水平方向上的 margin,border 和 padding 在框之间得到保留。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框。

<p style="background-color:silver; font-size:30px;"> TEXT1 <span style="border:3px solid blue;">text in span</span> great1 <em style="border:3px solid red;">thx a lot</em> bee <strong style="border:3px solid green;">give me 5!</strong> Aloha! </p>

以上代码中,不记换行符及空格,共形成了7个行内框。

行框的宽度由它的包含块和其中的浮动元素决定。高度的确定由行高度计算规则决定,后面会介绍。

行内框在行框中垂直方向上的对齐 行框的高度总是足够容纳所包含的所有框。不过,它可能高于它包含的最高的框(例如,框对齐会引起基线对齐)。当一个框 B 的高度小于包含它的行框的高度时,B 在行框中垂直方向上的对齐决定于 ‘vertical-align’ 特性。 ‘vertical-align’ 默认值为基线( ‘baseline ’)对齐。

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p style="background-color:silver; width:500px; ">

<span style="border:1px solid blue; font-size:50px;">text in span</span>

<em style="border:1px solid yellow; font-size:30px; vertical-align:top;">great1</em>

</p>

</body>

</html>

提示:你可以先修改部分代码再运行。

EM所形成的行内框内容的顶端与行中最高元素的顶外边界对齐。

行内框可能被分割

如果几个行内框在水平方向无法放入一个行框内,它们可以分配在两个或多个垂直堆叠的行框中。因此,一个段落就是行框在垂直方向上的堆叠。行框在堆叠时没有垂直方向上的分割且永不重叠。

如果一个行内框超出包含它的行框的宽度,它会被分割成几个框,并且这些框会被分布到几个行框内。如果一个行框不能被分割(例如,行内框只包含单个字符,或者语言特殊的断字规则不允许在行内框里换行,或者行内框受到带有nowrap或pre值的 ‘white-space’ 特性的影响),这时,行内框会溢出行框。

如果一个行内框被分割,margin、padding 和 border 在所有分割处没有视觉效果。

行内框还可能由于双向文本处理(bidirectional text processing)而在同一个行框内被分割为好几个框。

修改上面例子中 P 元素的宽度为100px:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p style="background-color:silver; width:100px; ">

<span style="border:1px solid blue; font-size:50px;">text in span</span>

<em style="border:1px solid yellow; font-size:30px; vertical-align:top;">great1</em>

</p>

</body>

</html>

提示:你可以先修改部分代码再运行。

发现,因为行框宽度限制(100px),第一个 SPAN 元素形成的行内框,被分割成了3段。

行框的范围 通常,行框的左边接触到其包含块的左边,右边接触到其 包含块的右边。然而,浮动元素可能会处于包含块边缘和行框边缘之间。总之,尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度(包含块的宽度),它们可能会因浮动元素缩短了可用宽度,而在宽度上发生变化。同一行内格式化上下文中的行框通常高度不一样(如,一行包含了一个高的图形,而其它行只包含文本)。

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p style="background-color:silver; width:500px;overflow:hidden; ">

<span style="border:1px solid blue; font-size:50px; float:left;">FLOAT</span>

<em style="border:1px solid yellow; font-size:30px;">great1</em>

<span style="border:1px solid yellow;">good</span>

</p>

</body>

</html>

提示:你可以先修改部分代码再运行。

行内框的水平对齐 当一行中行内框宽度的总和小于包含它们的行框的宽,它们在水平方向上的对齐,取决于 ‘text-align’ 特性。如果其值是 ‘justify’,用户端也可以拉伸行内框(除了 inline-table 和 inline-block 框)中的空间和文字 。对齐的时候是根据行框的宽度,居中对齐。

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p style="background-color:silver; width:500px;overflow:hidden; text-align:center; ">

<span style="border:1px solid blue; font-size:50px; float:left;">FLOAT</span>

<em style="border:1px solid yellow; font-size:30px;">great1</em>

<span style="border:1px solid yellow;">good</span>

</p>

</body>

</html>

提示:你可以先修改部分代码再运行。

空的行内框应该被忽略 不包含文本,保留空白符,margin/padding/border 非0的行内元素,以及其他常规流中的内容(比如,图片,inline blocks 和 inline tables),并且不是以换行结束的行框,必须被当作零高度行框对待。就 margin 折叠而言,这种行框必须被忽略。

aaaa<span><em><strong></strong></em></span>

上面span 和其中的空行内框都被忽略。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css绘图,实现一些特殊形状

    还是和前面的tips一样,多用after和before,能省俩标签!俩!比如这一堆的形状 <!DOCTYPE HTML> <html> <head> <met...

    练小习
  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习
  • 模拟微信支付宝密码输入框的效果

    中午听到别人在讨论微信的支付框以及支付宝的支付框,于是自己写了个demo出来,原理很简单,通过隐藏input,使用label控制显示,实现起来很容易。唤起数字键...

    练小习
  • Python一个万万不能忽略的警告!

    Pandas中有一个警告,很有意思,并且出现频率很高,它就是 SettingWithCopyWarning, 既然是个警告,那么我们是不是可以忽略呢。就像标题说...

    double
  • python 文件读写操作

    以前的代码都是直接将数据输出到控制台,实际上我们也可以通过读/写文件的方式读取/输出到磁盘文件中,文件读写简称I/O操作。文件I/O操作一共分为四部分:打开(o...

    猿说编程[Python和C]
  • 修改Host文件优化github访问速度

    最近可能是一些不为人知的原因,我在家里使用电脑时,github 访问的速度实在难以忍受,就连常规的提交代码都非常的慢,尝试了一下 ping github.com...

    Originalee
  • 17.9.29日报

    1,继续跟进上次说的网站打开慢的问题。现在发现不是谷歌的url被墙导致,而是https://messaging.teambition.net/websocket...

    龙泉寺扫地僧
  • python 变量,输入,输出

    郭楷丰
  • 面试官:优化代码中大量的if/else,你有什么方案?

    一个快速迭代的项目,时间久了之后,代码中可能会充斥着大量的if/else,嵌套6、7层,一个函数几百行,简!直!看!死!人!

    乔戈里
  • tomcat学习|源码学习方法及tomcat处理Web请求

    上一波,我们一起新建了web应用,然后把war包丢到tomcat源码中的webapps 目录,然后通过源码启动的方式成功debug运行了我们web应用,并且在浏...

    微笑的小小刀

扫码关注云+社区

领取腾讯云代金券