CSS行框,你真的理解么?

  • 时间:2018-11-03 23:12 作者:LearnInPro 来源:LearnInPro 阅读:122
  • 扫一扫,手机访问
摘要:什么叫做css行框呢?我们先看下行框的概念:子元素的虚拟矩形区域,形成的每一行。这个概念有点笼统,我们结合下面这张图来了解下。我们可以看到,当行内元素或者者行内块级元素并排排列的时候,可能他们的字体大小,高度都是不一样的。那么行框就是包裹他们的一个框。就是图中Line box所指的区域。行框规定了这

什么叫做css行框呢?

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

这个概念有点笼统,我们结合下面这张图来了解下。

CSS行框,你真的理解么?

我们可以看到,

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

要特别注意的点有两个

  1. 我们说过行内元素是不可设置高度的,那么他的高度是如何决定的呢? 任何一个行内元素,他的高度是由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决定。
CSS行框,你真的理解么?

2. 当行内元素和行内块级元素在一个行框内排列的时候,比方:





Document




LearnInPro




就会变成下图这样

CSS行框,你真的理解么?

我们看这个红色的行内块级元素下方的空隙,就是因为行框默认的对齐方式导致的。因为行框默认是baseline对齐,行内块级元素也要遵守所以这个红框的底部会骑在baseline线上。导致baseline到bottom的区域空着,产生空隙。那么处理方案也很简单,只需改变行框的对齐方式,在这两个元素上都加上vertical-align: top || middle || bottom 等即可以把这个空隙消除掉。

这个就是CSS中行框的概念,在很多垂直方向对齐的问题中,css行框发挥着重要的作用,很多情况中,可能开发者只知道如何使其对齐或者者某些情况下发现对齐会出现问题。深入理解css行框的概念即可以帮助你理解其原理或者者处理问题,知其然也知其所以然。

编写文章不易,假如你觉得我们的文章对你有帮助,希望你能关注、转发我们的文章,深表感谢。

同时我们也会持续带来更多更好的前台学习教程与文章,欢迎关注我们。

  • 全部评论(0)
最新发布的资讯信息
【网页前端|HTML】最全面的前端开发指南(2019-07-15 12:57)
【系统环境|数据库】零基础如何快速学好大数据?(2019-06-29 12:27)
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
手机二维码手机访问领取大礼包
返回顶部