解说W3C标准——overflow的属性

我们知道，overflow属性值有这几种：

• visible：声明内容不会被剪裁。比如内容可能被渲染到容器外面。
• hidden：声明内容将被剪裁，并且也甭想使用滚动条来查看剪裁掉的内容。
• scroll：声明内容将被剪裁，但有可能出现滚动条来查看被剪裁掉的内容。滚动条出现的位置在inner border adge和outer padding adge之间。
• auto：声明决策将依赖于客户端，优先使用scroll。

W3C标准中指明：
通常一个盒子的内容是被限制在盒子边界之内的。但有时也会产生溢出，即部分或全部内容跑到盒子边界之外。溢出将在满足下列条件之一时出现：
     1. 一个不换行的行元素宽度超出了容器盒子宽度。
     2. 一个子孙元素，由负边距值引起的部分内容在盒子外部。
     3、 text-indent属性引起的行内元素在盒子的左右边界外。
    4. 一个元素的高度超出了容器盒子的高度。
    5. 一个宽度固定的块元素放在了比它窄的容器盒子内。
    6. 一个绝对定位的子孙元素，部分内容在盒子外。但超出的部分不是总会被剪裁。子孙元素的内容就不会被子孙元素和其包含块之间的祖先元素的overflow的设置所剪裁。

       当溢出发生时，overflow属性约定了容器盒子是否剪裁掉超出其内边界的部分，并且决定是否出现滚动条来访问被剪裁掉的内容。它会影响到元素所有内容的剪裁，但有个例外情况，即上面第6条所提到的：元素的子孙元素的包含块（Containing blocks）是整个视窗（viewport）或是该元素的祖先元素，内容将不会被剪裁。包含块是什么呢？简单的说，就是可以决定一个元素位置和大小的块。通常一个元素的包含块由离它最近的块级祖先元素的内容边界决定。但当元素被设置成绝对定位时，包含块由最近的position不是static的祖先元素决定。


重庆网络公司