zoukankan      html  css  js  c++  java
  • 关于line box,inline box,line-height,vertical-align之间的关系

    1.content area 围绕着文字的一种box,高度由font-size和font-family决定。在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值。

    2.inline box的高度由line-height决定,一半的line-height在content area的上面,另一半在下面。line-height从content area的水平中垂线开始计算。
    想得到inline元素的inline box高度,把inline元素改变成inline-block(不手动设置高度)元素看看。

    3.line box的高度由最高的inline box高度或inline-block高度决定。

    4.inline子元素的vertical-align,是inline子元素化身为inline-block,基于父元素的line box进行对齐。

    简单来说:

    vertical-align依赖line-box,line-box依赖于内部最高的inline-box,inline-box依赖于font-size或line-height或img

    参考资料:

    http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

    http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

    http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

    http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

    http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html

  • 相关阅读:
    .htaccess
    windows快速搭建wamp环境,多站点域名访问
    require与include的区别
    PHP常用操作的字符串函数
    高效做事的习惯
    成功?!
    面向对象程序设计
    失落 绝望
    jquery学习收获
    XML操作类
  • 原文地址:https://www.cnblogs.com/samwu/p/3936271.html
Copyright © 2011-2022 走看看