疑问之vertical-align中以父元素为参照物

疑问一:  

  使用vertical-align进行垂直对齐时要求必须是内联元素, 是不是要求此元素以及它的父元素都必须是内联元素.

疑问二:

  使用vertical-align进行对齐时, 都是根据参照物(父元素)的顶线,中线,基线, 底线, 上文本线, 下文本线来进行对齐,

  但是这些参照都是在文本行(带有文字的内联元素)中具有的, 如果将div盒子设置成内联块级元素, 岂不是没有这些个标准 , 还适用吗?

   或者说, 这里根本不能用来对齐内联块元素?

 

    疑问解决:

      对于一些 可替换元素,比如 <textarea> , HTML标准没有说明它的基线,

      一般情况下如果元素没有基线baseline,则以它的外边距的下边缘为基线。

      为了照应下面说的以行高最大值为基准, 我们如果想要设置vertical-align对齐, 需要预先制定好本行内行高最大值元素的行高.

      

      

 

暂时理解为:

  对齐标准都是文本行,

  并且以 一行上垂直对齐时以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐

 

  

权威解释:

  行内框 : 行内框是一个浏览器渲染模型中的一个概念,无法显示出来,行内框默认等于内容区域, 将line-height的计算值减去font-size的计    算值,这个值就是总行距,这个值可能是个负值,任何将    行间距/2 分别应用到内容区的顶部和底部,其结果就是该元素的行内框
  行框(line box),行框是指本行的一个虚拟的矩形框,是浏览器渲染模式中的一个概念,并没有实际显示。默认情况下行框高度等于本行    内所有元素中行内框最大的值

  (一行上垂直对齐时以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐,最终计算行框的高度)

   当有多行内容时,每行都会有自己的行框。

posted @ 2020-10-23 21:14  0龙行者0  阅读(162)  评论(0编辑  收藏  举报