CSS line-hight ,vertical-align，父元素高度以及行框，行内框的关系

参考文章：我对CSS vertical-align的一些理解与认识（一）

css行高line-height的一些深入理解及应用

大小不固定的图片、多行文字的水平垂直居中

【line-height】 line-height详解

总结：

1.line-height 决定了此元素中的文字的排版，例如如果是多行文字，设置行高小于字体大小可以看到文字重叠（line-height - 文字大小 = 行距），但文字大小不变，字体大小只是影响内容区，可替换元素设置line-height后没什么反应。

2.某元素的inline box(行内框)，受line-height以及其子元素影响，如果line-height设置的高度小于子元素形成的line box（行内存在图片撑开），子元素形成的line box（行框）就是该元素的inline box（行内框）；如果line-height大于子元素形成的line box则父元素的inline box就是line-height设置的inline box。

3.line box由该行每个元素的行内框来决定，最后取最高的inline box的上边界和最低的inline box 元素的下边界分别作为line box的上下边界，而不是由各inline 元素的line-height决定；并且父元素的line-height并不等于该行line box 的高度。

4.只有inline或inline-block元素可以设置vertical-align 属性，表示inline 元素垂直方向上的对齐方式；

4a. vertical-align:baseline表示与父元素（父元素的inline box）的baseline 对齐，父元素的baseline是由其内部字母x的下边缘决定；vertical-align : top/bottom表示该行元素的inline box上（下）边缘对齐后与父元素的top（bottom）对齐。(baseline,top,bottom是跟inline box相关的，而不是内容区)。

5.文字排版是根据line box来的，如果line box中存在可替换元素（图片），而该可替换元素的高度撑开了line box，那么line box 的高度会变大，而line-height还是原先设定的，此时，下一行文字会直接跑到下一行，而不去管line-height设定多少，此时，上下两行的文字可能就大于设定的line-height。

6.行内替换元素的width,height,padding,margin四个方向都正常显示，并且，margin/padding 设置可以改变行高；而行内非替换元素，margin只有水平方向可以正常显示，padding四个方向可以显示，但是垂直方向不占空间，所以显示的效果是会覆盖上面元素，同时，行内非替换元素的margin/padding设置不会改变行高line-height.

CSS line-hight ,vertical-align，父元素高度以及行框，行内框的关系相关推荐

CSS float浮动规则以及父元素高度塌陷的解决方法
本文不讲float的所有内容,只浅谈float对不同高度块之间浮动结果的规则以及父元素高度塌陷的解决方法. 首先看一个小问题,就是float会导致父容器的高度塌陷,如下代码: <head> ...
css 高度塌陷_css中父元素高度塌陷是什么意思，如何解决？（附代码）
本篇文章给大家带来的内容是关于css中父元素高度塌陷是什么意思,如何解决?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先得回答什么是父元素高度塌陷: 在文档流中,父元素的高度默 ...
css position:absolute 父元素高度塌陷
问题在使用iSroll v4插件时,无法滚动到底部,从源码得知最大滚动位置由maxScrollY决定.从源码摘录出计算maxScrollY的部分 that.wrapperH = that.wrapp ...
css 子元素设置float,父元素高度塌陷
以div元素为例.div元素的高度会通过内容自动撑开.也就是说,内容有多少,高度就有多高.但是当内部元素设置了float属性之后,会是父元素高度塌陷 <div class="conta ...
解决CSS子元素绝对定位致使父元素高度为0
方法: 使用JS 代码: // 解决子元素决定定位父元素高度塌陷 var father = document.querySelector('.father '); var son = document ...
父元素高度固定，如何使其中的文字垂直居中？
方法一: 设置父元素高度,设置子元素行高垂直居中 <style> *{padding: 0;margin:0;font-size: 12px;} div{float: left;width ...
垂直居中-父元素高度确定的多行文本（方法二）
除了上一节讲到的插入table标签,可以使父元素高度确定的多行文本垂直居中之外,本节介绍另外一种实现这种效果的方法.但这种方法兼容性比较差,只是提供大家学习参考. 在 chrome.firefox 及 ...
HTML浮动导致高度塌陷,HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
[css] 为什么float会导致父元素塌陷
[css] 为什么float会导致父元素塌陷 "当元素设置浮动后,会自动脱离文档流", 翻译成白话就是说,元素浮动后,就不在整个文档流的管辖范围,那么它之前存在在父元素内的高度就随 ...
html自适应_web前端入门到实战：HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

CSS line-hight ,vertical-align，父元素高度以及行框，行内框的关系

CSS line-hight ,vertical-align，父元素高度以及行框，行内框的关系相关推荐

最新文章

热门文章