html区域框什么意思,css什么是行框？

行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值。当有多行内容时，每行都会有自己的行框。

css什么是行框？

我们先看下行框的概念：子元素的虚拟矩形区域，形成的每一行。

这个概念有点抽象，我们结合下面这张图来理解下。

我们可以看到，

当行内元素或者行内块级元素并排排列的时候，可能他们的字体巨细，高度都是不一样的。那么行框就是包裹他们的一个框。就是图中Line box所指的区域。行框规定了这些元素排列时候的对齐体例。默认他们的对齐体例是根据baseline基准线对齐。就如同图上的对齐体例一样。在行框中，我们利用vertical-align来改变他们的对齐体例。他的值有很多，经常使用的有top，middle，bottom等，这个比较简单就不多介绍了。

要特别注意的点有两个

我们说过行内元素是不克不及设置高度的，那么他的高度是如何决定的呢？ 任何一个行内元素，他的高度是由font-size和line-height共同决定的。

首先，文本的高度是跟line-height无关的。我们可以给span设置一个布景色，然后我们改变他的line-height会发现，无论line-height设置成多高，span的布景色的高度都不会改变，可是span整体的高度会随line-height的增大而变高。所以说文本的高度是跟line-height无关的(注意这里说的是文本)。那么，文本的高度只跟font-size有关，可是注意，文本的高度永远会大于font-size的值。就像下面这张图，font-size的巨细只是规定了text-top到text-bottom的距离，而文本高度是top到bottom的距离，而这之间的距离是几多，每个浏览器都不太一样。总之是为了呵护文本，不希望行与行之间产生重叠。( 如果你强行将line-height设置的特别小，希望产生重叠，在大部分现代浏览器中是无效的，也就是在大部分浏览器中line-height的值最小等于文本的高度，所以不建议将line-height设的比文本高度小。 )

所以，行内元素的高度(不折行的情况下)当没设置line-height或者line-height小于等于文本的内容高度时，行内元素高度取决于font-size，等于文本的高度。 当line-height大于文本高度时，则由line-height决定。

当行内元素和行内块级元素在一个行框内排列的时候，好比：

Document

* {

margin: 0;

padding: 0;

}

span {

background: blue;

font-size: 20px;

}

.inline-block {

height: 100px;

width: 100px;

background: red;

display: inline-block;

}

LearnInPro

就会酿成下图这样

我们看这个红色的行内块级元素下方的空隙，就是由于行框默认的对齐体例致使的。由于行框默认是baseline对齐，行内块级元素也要遵守所以这个红框的底部会骑在baseline线上。致使baseline到bottom的区域空着，产生空隙。那么解决方案也很简单，只要改变行框的对齐体例，在这两个元素上都加上vertical-align: top || middle || bottom 等就可以把这个空隙消除失落。

这个就是CSS中行框的概念，在很多垂直标的目的对齐的问题中，css行框阐扬着重要的作用，很多情况中，可能开发者只知道如何使其对齐或者某些情况下发现对齐会呈现问题。深入了解css行框的概念就可以帮忙你了解其原理或者解决问题，知其然也知其所以然。

更多web前端开发知识，请查阅 HTML中文网 ！！