Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

height 与 width 的计算差异

  height 与 width 最大的区别是,height 通常是自适应内容的,而 width 通常是自适应容器的(只有行级元素的 width 才会自适应内容)。而且就算是自适应内容,width 依然可以计算宽度,但 height 就不行,被内容撑开而产生的高度不会参与百分比计算。

那个被撑开的容器

<!DOCTYPE html>
<div class="a"> <div class="b"></div> </div>
<style>
div { opacity: 0.5; }
.a { display: inline-block; background: #0f0; }
.b { height: 100%; width: 100%; background: #00f; padding: 50px; }
</style>
  上面这个例子中,内部元素设置了 50px 的 padding 来撑开容器。容器自适应内容的宽度和高度,所以容器的宽高都将是 100px。水平方向的 100% 会参照这个 100px 来计算,所以内部元素的 content-box 宽度将被设置为 100px,因此产生了水平方向 100px 的溢出。而垂直方向的 100% 不会参照这 100px 来计算,因为这 100px 是容器被内容撑开产生的,所以垂直方向不会产生溢出。

DTD 对垂直方向的影响

  有时候我们会有让一个元素充满文档的需求,但在标准模式下,100% 的 height 只能从容器上计算。所以即使在 body 中添加一个元素,并给元素设置 100% 的 height,由于 body 本身没有设置高度,所以这种用法是无效的。一种解决方案是给 body 和 html 同时设置 100% 的 height(不过这会带来许多额外的问题,更好的解决方案是绝对定位)。在怪异模式中,height 百分比计算会查找祖先级元素,并取最近的 height 来计算,所以不存在这个问题。

关于垂直方向的坑

  以上问题就是垂直方向与水平方向的差异,其它基本计算可以参考 width 计算细则。其实垂直方向的计算有很多坑,比如垂直方向的 padding 百分比是根据宽度计算的、margin 合并只针对垂直方向等。所以对垂直方向处理的考虑也许远不止我提到的这些。

网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^