微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

盒模型

来源:wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/">http://www.zhangxinxu.com/wordpress/2010...

在目前的CSS的世界中,所有的高度都是有两个CSS模型产生的,一个Box盒状模型,对应CSS为”height+padding+margin”,另外一个是line Box模型,对应样式为”line-height”。前者的height属性分为明显的height值和隐藏的height值,所谓隐藏的height值是指图片的高度,一旦载入一张图片,其内在的height值就会起作用,即使您看不到”height”这个词。而后者针对于文字等这类inline Boxes的元素(图片也属于inline Boxes,但其height比line-height作用更凶猛,故其inline Boxes高度等于其自身高度,对line-height无反应),inline Boxes的高度直接受line-height控制(改变line-height文字拉开或重叠就是这个原因),而真正的高度表现则是由每行众多的inline Boxes组成的line Boxes(等于内部最高的inline Box的高度),而这些line Boxes的高度垂直堆叠形成了containing Box的高度,也就是我们见到的div或是p标签之类的高度了。所以,对于line Box模型的元素而言,没有inline Boxes,就没有高度了,而浮动却恰恰做了这么龌龊的事情,其直接将元素的inline Boxes也破坏了,于是这些元素也就没有了高度。

原文地址:https://www.jb51.cc/wenti/422317.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐