CSSoverflow属性详解

浏览器支持

所有主流浏览器都支持 overflow 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

可能的值

visible 默认值。内容不会被修剪，会呈现在元素框之外。

  

        visible	默认值。内容不会被修剪，会呈现在元素框之外。
        visible	默认值。内容不会被修剪，会呈现在元素框之外。
   
    .box_visible{
           width: 100px;
           height: 100px;
           background-color: red;
           overflow: visible;
       }

hidden 内容会被修剪，并且其余内容是不可见的。

    

        hidden	内容会被修剪，并且其余内容是不可见的。
        hidden	内容会被修剪，并且其余内容是不可见的。
    
    .box_hidden{
           width: 100px;
           height: 100px;
           background-color:royalblue;
           overflow: hidden;
       }

scroll 超出内容被修剪但会显示左右上下滚动条来查看超出内容。

         scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
         scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    
     .box_scroll{
           width: 100px;
           height: 100px;
           background-color: aqua;
           overflow: scroll;
       }

auto 如果内容被修剪，则浏览器会显示上下滚动条以便查看其余的内容

 

         auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
         auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    
           .box_auto{
           width: 100px;
           height: 100px;
           background-color: bisque;
           overflow: auto;
       }

 

        inherit	规定应该从父元素继承 overflow 属性的值。
        inherit	规定应该从父元素继承 overflow 属性的值。
    
    .box_inherit{
           width: 100px;
           height: 100px;
           background-color: blueviolet;
           overflow: inherit;
       }

CSS3overflow-y属性

作用：overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。

提示：使用overflow-x属性来判断左右边缘是否裁剪。

语法：

overflow-y: visible|hidden|scroll|auto|no-display|no-content;

visible：不裁剪内容，可能会显示在内容框之外。

hidden： 裁剪内容 - 不提供滚动机制。

scroll：裁剪内容 - 提供滚动机制。

auto：如果溢出框，则应该提供滚动机制。

no-display：如果内容不适合内容框，则删除整个框。

no-content：如果内容不适合内容框，则隐藏整个内容。

说明：所有主流浏览器都支持 overflow-y 属性；但无法在 IE8 以及更早的浏览器正确地工作。
同上overflow-x属性