css中的IFC

在IFC中,盒子水平放置,一个接着一个,从包含块的顶部开始。在盒子间margins,borders,和padding的水平方向的值是有效。这些盒子也许通过不同的方式进行对齐:他们的底部和顶部也许被对齐,或者通过文字的基线进行对齐。矩形区域包含着来自一行的盒子叫做line box。
line box的宽度由浮动情况和它的包含块决定。line box的高度由line-height的计算结果决定。
一个line box总是足够高对于包含在它内的所有盒子。然后,它也许比包含在它内最高的盒子高。(比如,盒子对齐导致基线提高了)。当盒子B的高度比包含它的line box的高度低,在line box内的B的垂值对齐线通过'vertical align'属性决定。当几个行内级盒子在一个单独的line box内不能很好的水平放置,则他们被分配成了2个或者更多的垂直重叠的line boxs.因此,一个段落是很多个line boxs的垂直叠加。Line boxs被叠加没有垂直方向上的分离(特殊情况除外),并且他们也不重叠。
通常,line box的左边缘挨着它的包含块的左边缘,右边缘挨着它的包含块的右边缘。然而,浮动盒子也许会在包含块边缘和line box边缘之间。因此,尽管line boxs在同样的行内格式上下文中通常都有相同的宽度(就是他的包含块的宽度),但是水平方向上的空间因为浮动被减少了,它的宽度也会变得复杂。Line boxs在同样的行内格式上下文中通常在高度上是多样的(比如,一行也许包含了一个最高的图片然后其他的也可以仅仅只包含文字)
当在一行中行内级盒子的总宽度比包含他们的line box的宽度小,他们的在line box中的水平放置位置由'text align'属性决定。如果属性是'justify',用户代理可能会拉伸空间和文字在inline boxs内。
当一个行内盒子超过了line box的宽度,则它被分割成几个盒子并且这些盒子被分配成几个横穿过的line boxs。如果一个行内盒子不能被分割。则行内盒子溢出line box。
当一个行内盒子被分割,分割发生则margins,borders,和padding便没有了视觉效果。
在同样的line box内的行内盒子也许会被分割成几个盒子因为双向的文字。
Line boxs在行内格式上下文中档需要包含行内级内容时被创造。Line boxs包含没有文字,没有空格,没有带着margins,padding和borders,以及没有其他在流中的内容(比如图片,行内盒子和行内表格),也不会以新起一行结尾。对于在他们内的任何盒子的位置都以他们决定并且必须将他们视作没有高度的line boxs。

主要影响IFC内布局的css:

  • font-size
  • line-height
  • height
  • vertical-aligin

line box

行盒模型,这是一个显示区域,根据块状容器内,每一行的多个内联元素(inline-level element)都会共同生成一个行盒模型。

font-size

常见的属性,用来指定文本类型节点的大小。IFC内的很多属性的值是基于这个的。

line-height & height

在一个由多个内联元素组成的块状容器内,'line-height'为内联元素的行盒模型指定了一个最低高度。 这个最低高度是分别由基线上的最小高度和基线下的最小深度组成。

从上到下四条线分别是顶线、中线、基线、底线。 那么行高是指上下文本行的基线间的垂直距离,即图中两条红线间垂直距离(实际在数值上,行高也等于其它相同颜色间的距离)。


Paste_Image.png

vertical-align

该属性影响由多个内联元素生成的盒模型组成的行内盒模型的垂直定位。
vertical有几个特定的值,或者指定一个值。

<p class="a1">
  <span style="vertical-align:60px;">
    English中文
  </span>
  <span>
    中文English
  </span>
</p>

给第一个span,设置60px的垂直偏移量,显示如下:

Paste_Image.png

其中,黄色线就是基线(baseline),绿线和黄线的间隔即为60px。 这里会发现,容器(蓝色)的高度被撑高了。

容器的高度 height = line-height + vertical-align

当然同理,如果容器的高度被指定了,那么高度则不变,而超出的部分则不影响布局。如果设置overflow:hidden,超过的部分则不可见。

而vertical-align的其它特殊值,均可以看做一个根据容器高度而变化的相对值。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,373评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,732评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,163评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,700评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,036评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,425评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,737评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,421评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,141评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,398评论 2 243
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,908评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,276评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,907评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,018评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,772评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,448评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,325评论 2 261

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,628评论 1 92
  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 4,835评论 8 34
  • 参考文章:深入了解CSS的line-height属性Vertical-Align: 你需要知道的所有事【译】Ver...
    若邪Y阅读 3,340评论 1 6
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,377评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,281评论 0 26