域名的种类及查询网站,网站seo优化方法,泉州seo培训,无锡网络推广哪家好相对于熟知的块级格式化上下文#xff0c;行内格式化上下文更加的复杂难明。行内元素不像块级元素那样直来直去#xff0c;一个块级元素占据一行#xff0c;其他块级元素在垂直方向依次向下排列即可。行内元素不同#xff0c;多个行内元素可以在一行显示#xff0c;那么行内格式化上下文更加的复杂难明。行内元素不像块级元素那样直来直去一个块级元素占据一行其他块级元素在垂直方向依次向下排列即可。行内元素不同多个行内元素可以在一行显示那么在一行中多个行内元素是怎么排布的下面就试着解释一下。
构建一行
首先我们来理解一行由哪些东西构成
pxemspan行内框/spanimg stylewidth: 40px; height: 40px; margin: 10px; src /
/p上面有一个匿名文本一个行内框也就是行内非替换元素span一个行内替换元素img /
匿名文本 xem
是指没有元素包裹直接暴露在父元素下的文本。
这些文本应该占多大的地方其实每一个文本字符都会有一个em框见图1-1那么em框有了多个em框就组成了一个内容区见图1-1。好我们上面的匿名文本就先这样当然还没有完事下面继续。
em框
em框是在字体中定义的并且高度和font-size的值一致。 图1-1 行内框
span这样的行内元素会形成一个行内框匿名文本也会形成这个行内框是按照上面匿名文本形成内容区域的步骤形成内容区域后在加上行间距形成的。又出现了一个行间距。
行间距又是哪里来的行间距是行高line-height减去内容区高度得到的。
我们得到了行间距然后将行间距再除以2分别放在内容区上面和下面形成了行内框见图1-2。 图1-2 img元素
img元素是一个替换元素替换元素会形成一个内容区并且行高不能作用于替换元素所以对于替换元素来说不存在行间距这个东西。那么替换元素内容区域的高度是咋计算的计算方式和非替换元素计算方式不同不仅有替换原宿自身宽高还包括了paddingborder和margin的值。我们都知道非替换元素垂直方向marginpadding和border是不占位置的但是替换元素是占位置的见图1-3。 图1-3 行框
行框中存在了上面几个元素不是指的标签那么怎么计算行框所占据的高度行框会计算基线与行框最高点和行框最低点距离即可。
通过这个描述就能看出来line-height只能表示一个行的最小高度不是一个行的高度见图1-4。 图1-3 基线
基线位置是使用的字体决定的一般是小写字母x的下边缘。
行内格式化完成。
