深入理解内联元素的布局
时间：2023-03-31 01:31:20
CSS
前言总结：本文通过实例讲解CSS中最大的难点之一，内联元素的布局，主要探讨line-height和vertical这两个属性的使用-在布局中对齐。原博客地址：深入理解内联元素的布局知乎专栏&&简书题目：前端攻击者（知识）&&前端攻击者（简书）博主地址：Damonare的个人博客白茶清欢没别的，我在等风，也在等你。?文字有道理。line-height和vertical-align很低调。日常开发中遇到的很多莫名其妙的bug，很大程度上都是这两个产品造成的，但是很少有人知道这对基数的邪恶，因为说不定花式重写一下CSS代码就可以解决问题了。其实只有了解了这两点，才能在排版工作中更加得心应手。本篇接下来，我们就通过bases之间的关系来了解内联元素的具体布局~挡不住~？在阅读本文之前，请确保您具备以下知识基础：line-height的数值与font-size与字号有关；vertical-align的百分比值与line-height值有关；导致vertical-align时，先看一个？："">Xx
.test{背景：红色；}img{宽度：50px；height:50px;}span{background:white;}如果下面没有示例内容，请点击这里如图上面的代码片段结果，图片下面有个很明显的红条，？搞什么，很奇怪是不是？我要的是img填满整个div！！！嗯，我多加了一个inline元素填入内容Xx，发现原来多出来的One块正好是文字的下半部分。吼吼，这么巧？实际上，如果去掉这里的xx内容，只剩下img，bar依然存在，行为就好像父元素div中除了img元素之外还有一个空白元素，？暂且称它为空白节点（在肉眼中不存在但正在影响布局），这是一种比较奇怪的表现，在标准中也没有找到相关的解释。但是请先记住这个空白节点，我们的重点是研究条形图是怎么出来的。这个bar好像是文字和图片垂直对齐产生的，那么这就引出了一个大问题，内联元素默认的垂直对齐方式是什么？也就是vertical-align的默认值是多少？OK,?我知道你知道的。vertical-align的默认值是baseline，好了，我们来深挖一下vertical-align是什么。Vertical-align(1)Vertical-align是CSS中最复杂的属性之一。。。很多问题的概念都不理解。。。一方面，它作用于inline元素，table-cell元素都有很多属性值。另一方面，属性规范没有定论，导致了一些属性在不同浏览器中的实现不同，因此存在很多兼容性问题。对于一些可替换的元素，比如textarea，HTML标准并没有规定它的基线，这意味着为它使用这个关键字，每个浏览器的表现可能会有所不同。我们先研究一下它的默认值基线。Baseline字面意思是基线，什么是基线？首先，请记住以下概念：基线：小写字母'x'下边缘所在的线；x-height：小写字母'x'的高度；ex：1ex是小写字母'x'的高度，类似em单位，注意ex和em是相对单位；让我们看看CSS标准中是怎么说的：相关标准链接'inline-block'的基线是它在正常流中的最后一个行框的基线，除非它没有流入行框或者它的'overflow'属性有一个计算值而不是'visible'，在这种情况下，基线是底部边距边缘。中译如下：'inline-block'元素的baseline是标准流中最后一个linebox的baseline，除非linebox中没有in-flowlinebox或者计算的值'overflow'属性本身不是'visible'的，在这种情况下baseline是元素边距的底边。那么上面的现象就很好解释了。我们知道img元素的默认形式和inline-block元素是一样的。它的基线是外边距的底边，而内联元素本身有一个高度。两条基线的对齐自然如上所示。??好吧，等一下。至此，我们发现其实多了两个概念——内联元素的高度和标准中提到的行框（IFC）。首先我们来看行内元素的高度，也就是line-height属性。在Line-heightCSS中，只有height和line-height两个属性对高度起作用。如果一个元素没有设置高度，那么它的最终高度必须由line-height决定。之前我以为内联元素的高度是被文字内容拉长了，但实际研究后发现并不是这样。看到以下内容了吗？：.demo1{font-size:20px;行高：0；边框：1px纯蓝色；背景：红色；}.demo2{字体大小：0；行高：20px；边框：1px纯红色；background:yellow;}HTML代码:
test Test 下面没有内容，戳这个或者自己复制代码到本地测试上面可以证明，inline元素的高度是由line-height决定的，而不是由内容决定的??CSS规范中line-height的默认值有这么一句话：Werecommendausedvaluefor'normal'between1.0to1.2.Itisjustarecommendation...?是不是意味着默认值各浏览器实现的line-height不一定相同，但都在1.0-1.2之间，各大浏览器的具体实现值有待考证，这里需要记住line-height的默认值还行，IFC在上一篇博文中对CSS的盒模型展开了相关知识，简单介绍了BFC和IFC，IFC相比BFC复杂和规范多了dIFC的空间比BFC大很多。BFC的一个简单总结是块级元素可能会触发块级格式上下文（BFC）。在块级格式化上下文中，块级框是垂直排列的，不受上下文和外部元素的影响，自成一个世界。块容器盒是指包含元素的盒。块容器框可能包含其他块级框，也可能生成内联格式化上下文(IFC)。？但是块容器框要么只包含一个行内框，要么只包含一个块级框。但通常两者兼而有之。在这种情况下，会创建一个匿名块框来包含相邻的行内级框。看一看？：//demo1
//demo2
一些内联文本后跟一个paragraphfollowedbymoreinlinetext.
如上，demo1会创建两个匿名块框，一个包含p之前的文本（Someinlinetext），一个包含p之后的文本（后面是更多的inline文本）。demo2会生成一个内联格式上下文，生成一个匿名行框（linebox），其中包含两个匿名行内框（inlinebox），一些内联文本和后面跟着更多的内联文本。和一个跨度内联框。OK，至于如何触发块级格式化上下文，请参考块级格式化上下文。这里只介绍BFC来说明IFC。当一个元素的CSS属性显示评估为内联、内联块或内联表时，该元素称为内联级元素。行内级元素生成行内级框并参与行内格式化上下文。也参与生成行内格式化上下文的行内级框称为行内框。规范中IFC的文字很多，我们提炼一下我们需要的：如果一个矩形区域包含一些排成一行的框，则称为线框。linebox的宽度由它的包含块和浮点数决定。linebox的高度由你给的代码决定。(line-height)，这是所有行内框的最大高度差。当框的高度小于父框的高度时，垂直对齐由'vertical-align'属性决定。vertical-align(2)在上面的vertical-align(1)中，我们主要了解什么是baseline，它是如何确定的。我们继续研究这个属性，见下表：valuedescriptionbaselinedefault。该元素放置在父元素的基线上。top将元素的顶部与行中最高元素的顶部对齐text-top将元素的顶部与父元素字体的顶部对齐middle将元素置于父元素的中间。bottom将元素的顶部与行中最低元素的顶部对齐。text-bottom将元素的底部与父元素字体的底部对齐。除了我们已经非常了解的基线之外，我们似乎还可以了解其他几个属性。唯一的问题可能是父元素的顶部和底部到底是什么？?需要确定，好吧，我们还是拿我们第一个例子来解释一下，但是我们需要改变它，在里面加点东西：
Xx .demo{背景：红色;}.line-box{背景：蓝色；line-height:200px;}.line-boximg{vertical-align:text-bottom;width:50px;}.line-boxspan{margin-left:20px;yellow;}例子通过IFC部分我们知道前面的例子其实生成了一个匿名线框，虽然他可以继承父元素的属性，我们不能直观的操作吗？好吧，把这个匿名的linebox变成一个可控的span元素就好了？如上demo所示。我们通过设置line-box的line-height来控制line-box的高度，然后设置img的vertical-align属性的值，观察具体的对齐方式。OK，各位读者可以在本地测试或者直接更改fiddle内容看看效果。但是这里很容易产生一个误区，就是父元素的middle和top的值是怎么确定的呢？如上，我们通过改变img元素的vertical-align值来观察差异。表面上看父元素是根据xx的内容来确定的，其实不然。再看一个例子：下面没有内容戳这个在上面的例子中，我们改变了Xx和发现一个很奇怪的现象？当xx设置为text-bottom或者text-top时，父元素（lingbox）被拉伸了？但是从另一方面来说，这也证明了父元素的基线和中心线不是一样的。不是由文本Xx决定的，谁来决定的？是由上面说的空白节点决定的！？这个空白节点其实是理解内联元素布局的关键！在不知道它存在的情况下，很多问题都是不清楚。那么这个空白节点是如何影响布局的呢？前面说了基线决定小写字母x。这个时候问题来了。可能你想问很久了。小写字母的底边x在不同字体下肯定是有区别的，好吧，我们研究一下font-family，我们来看一个notherfont-family?:下面没有示例内容，请点击这里关于字体的具体知识，可以阅读这篇博文。我将简要总结要点。首先，字体有一个字体大小的概念。字体将定义一个em-square，这是一个用于容纳字符的金属容器。这个em-square的宽高一般设置为1000个相对单位，但是也可以是1024或者2048个相对单位。字体规格是根据这个相对单位设置的，包括ascender、descender、capitalheight、x-height等。注意这里的值可以超出em-square的范围。在浏览器中，上面的1000个相对单位将缩放到您想要的任何字体大小。看上面的例子，我们也可以看出，一个内联元素其实有两个高度：content-area高度（background-color实际渲染的高度）和virtual-area高度（background-color实际占据区域的高度）空间是行高）。?结论所有内联元素都有两个content-areavirtual-area（即line-height）内联元素，高度基于字体测量。有一个空白节点来确定基线等概念；baseline的确定与font相关，与内部行内元素无关；IFC很难理解；line-box（行框）的高度受其子元素的line-height和vertical-align的影响；我们似乎无法使用CSS来更改字体规格。题主确实怀疑题主党，但其实我并没有挖得太深，比如vertical-align对inline-table元素的影响，sup,sub等属性值，具体属性值如何ofline-height生效不涉及。我想把这篇文章的重点放在布局上，而且篇幅有限。不涉及的请自行核对信息，在此表示歉意。??以上。后记自从开始前端工作以来，CSS好学但坑的声音却层出不穷。很多人也说HTML和CSS一周就能学会，现在我渐渐觉得是谬论。是的，仅仅掌握浮动、定位、对齐、居中这些基础知识，就可以解决一半以上的布局问题，甚至100%，因为很多时候，莫名其妙地改变写法就能达到想要的效果。可能这就是为什么很多人说CSS是个坑，但其实很多开发者是不看CSS标准的。他们模仿一个网站或者看一个视频写一个demo就觉得自己掌握了CSS，其实不然。渐渐觉得深挖CSS比深挖JavaScript难多了……你觉得CSS坑吗？谁让你不看标准的....？??
