Web 技术研究所

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

width 计算细则

  如果问 CSS 中的 width 表示什么,通常会得到的回答的「元素宽度」。但这是个相当模糊的概念,因为在不同的盒子模型中元素宽度的概念是不同的。如果问 width 属性的百分比取值怎么计算,通常会得到的答案是「容器宽度」,这又是另一个模糊的概念。

width 到底是个啥?

  盒子模型有 border-box、padding-box、content-box 三种。在 border-box 在中,width 表示包括了 border、padding、content 三部分的宽度总和,padding-box 中 width 不包含 border 部分的宽度,只计算 padding 和 content 部分,而 content-box 只表示 content 部分的宽度。

width 的百分比取值到底怎么计算?

  无论一个元素的容器是何种盒子模型,在其 position 属性为 static 或 relative 时 width 的百分比取值时总是相对于容器的 content-box 来计算。但是如果 position 属性为 absolute,其 width 属性就会寻找祖先元素中最近的非 static 元素,并以这个元素的 padding-box 作为计算参考。如果 position 属性为 fixed,则 width 的百分比取值直接相对于文档宽度来计算。

margin 的影响

  常规流中的块级元素是自适应容器的,但是这个「自适应容器」的概念其实也很模糊。所谓「自适应容器」确切地说就是让一个元素尽可能地填满容器(在水平方向上),也就是让元素的「占用空间」(这是 margin-box 的概念,实际上 box-sizing 目前没有 margin-box 这个取值)恰好等于容器的 content-box 宽度。

溢出与滚动条

  元素的 content 宽度并不等价于其内容的宽度,内容完全可以超出元素的 content 宽度,并通过 overflow 属性控制超出后的行为。如果元素不是自适应内容的,那么无论 overflow 的取值如何,其 content 宽度就不会因为内容的溢出而增加(但要注意如果出现滚动条的话滚动条占用的宽度可能使 content 的宽度减小)。如果元素是自适应内容宽度的,那么 CSS 引擎要先计算内容的宽度,并将其作为容器的 content 宽度,然后再对内容中的 width 百分比取值做计算。

注意事项

  了解以上几种情况基本上可以满足一般业务需求了。但要注意垂直方向的计算和水平方向是存在差异的,不要把这套宽度计算细则直接用于垂直高度。对于垂直方向与水平的差异见 height 与 width 的计算差异

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