overflow基本属性

1.overflow基本属性值

<!-- 页面结构与样式 -->
<!-- 如下图（initial）：当前样式中还没有添加overflow属性，由于内部div高度超出外侧box，因此内容溢出 -->

    <style type="text/css">
        .box {
            width: 400px;
            height: 100px;
            border: 1px solid red;
        }
        .content {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
    </style>

<div class="box">
    <div class="content"></div>
</div>

<!-- 效果依然如图（initial），visible为默认值，意为强行显示 -->
<style type="text/css">
        .box {
            width: 400px;
            height: 100px;
            border: 1px solid red;
            overflow: visible;               /*默认值*/
        }
        .content {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
</style>

initial.PNG

<!-- 效果如下图（hidden），仅仅是隐藏了而不是裁剪 -->
<style type="text/css">
        .box {
            width: 400px;
            height: 100px;
            border: 1px solid red;
            overflow: hidden;     /*溢出隐藏，高级写法常见*/
        }
        .content {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
</style>

hidden.PNG

<!-- 效果如下图（scroll），在纵横方向增加了滚动条，拉动即可看到完整部分 -->
<style type="text/css">
        .box {
            width: 400px;
            height: 100px;
            border: 1px solid red;
            overflow: scroll;     /*增加滚动条*/
        }
        .content {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
</style>

scroll.PNG

<!-- 效果如下图（auto），和scroll稍有不同，auto属性仅在溢出方向增加了滚动条 -->
<style type="text/css">
        .box {
            width: 400px;
            height: 100px;
            border: 1px solid red;
            overflow: auto;     /*溢出方向增加滚动条*/
        }
        .content {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
</style>

auto.PNG

<style type="text/css">
        .box {
            width: 400px;
            height: 100px;
            border: 1px solid red;
            overflow: inherit;     /*不常用，兼容性不好，不想说*/
        }
        .content {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
</style>

2.overflow-x与overflow-y

<!-- 当overflow-x和overflow-y的值相同时，则等同于overflow -->
<style type="text/css">
        .box {
            width: 400px;
            height: 100px;
            border: 1px solid red;
            overflow-x: hidden; 
            overflow-y: hidden;     /* 这里等同于overflow:hidden; */
        }
        .content {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
</style>

x-y-hidden.PNG

<!-- 当overflow-x和overflow-y的值不同时，如果其中一个值为visible，另一个值为hidden/scroll/auto，那么visible会重置为auto -->
<style type="text/css">
        .box {
            width: 400px;
            height: 100px;
            border: 1px solid red;
            overflow-x: auto; 
            overflow-y: visible;
        }
        .content {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
</style>

x-auto-y-visible.PNG

3.overflow在IE7下的兼容问题

<!-- 内部div设置了width:100%;则IE7会认为其宽度与box相同，即400px，但overflow:auto之后由于纵向溢出而设置了滚动条，此时content宽度已不足400px，IE7这时候就会在横向也添加了滚动条 -->
    <style type="text/css">
        .box {
            width: 400px;
            height: 100px;
            border: 1px solid red;
            overflow: auto;
        }
        .content {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
    </style>

ie7-auto.PNG

4.使用前提

• 非display:inline;
• 对应方位尺寸限制 width/height/max-width/max-height/absolute拉伸
• 对于单元格td等，还需要table-layout:fixed;

5.overflow:visible;妙用场景

<!-- 简单的代码结构如下：在非IE7浏览器中，按钮内两侧留白都是相同大小，但在IE7中按钮内两侧留白会随着按钮内文字内容的长度递增 -->
<div class="box">
    <button>看见</button>
    <button>一座山</button>
    <button>就想知道</button>
    <button>山后面是什么</button>
</div>

chrome-buton.PNG
ie7-button.PNG

    <style type="text/css">
        .box button {
            overflow: visible;           /* 新增该属性，效果如下图 */
        }
    </style>
    <div class="box">
        <button>看见</button>
        <button>一座山</button>
        <button>就想知道</button>
        <button>山后面是什么</button>
    </div>

ie7-button-visible.PNG