zoukankan      html  css  js  c++  java
  • [ css 深入理解 inline box 模型中line boxes ] css中深入理解line-height(行高)产生的原因:看不见的 line boxes

      到底这个line-height行高怎么就产生了高度呢:

      在inline box模型中,有个line boxes,这玩意是看不见的,这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字,如果它们在一行显示,你艾佛森再牛逼,对不起,只有一个line boxes罩着你;但“春哥纯爷们”这5个字,要是竖着写,一行一个,那真是够爷们,一个字罩着一个line boxes,于是总计五个line boxes。line boxes什么特性也没有,就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

      其实line boxes不是直接的生产者,属于中层干部,真正的活儿都是它的手下 – inline boxes干的,这些手下就是文字啦,图片啊,span之类的inline属性的标签啦。line boxes只是个考察汇报人员,考察它的手下谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。例如,<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>。则line boxes的高度就是40像素了

  • 相关阅读:
    linux笔记八---------文件查找
    linux笔记七---------管道
    linux笔记六-------文件权限设置
    linux笔记五-------编辑器
    linux笔记四-------用户和组的管理
    linux笔记三-------根目录相关说明
    linux笔记二-----目录及文件命令
    linux笔记一
    thinkphp框架验证码验证一次
    MarkDown 中使用 LaTeX 数学式
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5655165.html
Copyright © 2011-2022 走看看