• CSS 之overflow属性简结


    CSS的overflow 属性用来处理一个元素的尺寸超出其容器尺寸的情况。当一个元素包含的内容超粗自身的大小时,就会发生内容溢出,这种情况,可以对内容进行“裁剪”,只让一部分内容可见。
    overflow的属性有四种:visible,hidden,scroll,auto:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/layout.css" media="screen" />
    </head>
    <body>
        <h1>Web Design</h1>
        <ol id="linklist">
            <li>
                <a href="Page1.html">Page 1</a>
            </li>
            <li>
                <a href="Page2.html">Page 2</a>
            </li>
        </ol>
        <div id="slideshow">
            <img src="images/1.jpg" id="preview" />
        </div>
    </body>
    </html>
    
    • visible:不裁剪溢出内容,浏览器将把溢出的内容呈现在其容器元素的显示区域以外,全部内容可见。
    #slideshow{
        100px;
        height:100px;
        position:relative;
        overflow:visible;
    }
    

    • hidden:隐藏溢出的内容。内容只显示在其容器元素的显示区域里,这意味着只有一部分内容可见。
    #slideshow{
        100px;
        height:100px;
        position:relative;
        overflow:hidden;
    }
    
    

    scroll:类似于hidden,浏览器将对溢出的内容进行隐藏,但显示一个滚动条,以便让与用户能够滚动看到内容的其他部分。

    #slideshow{
        100px;
        height:100px;
        position:relative;
        overflow:scroll;
    }
    
    

    auto:类似于scroll,但浏览器只在确实发生溢出时,才显示滚动条,如果内容没有溢出,就不显示滚动条。

    #slideshow{
        100px;
        height:100px;
        position:relative;
        overflow:auto;
    }
    
    

  • 相关阅读:
    JSON数据格式
    AJAX入门
    SpringMVC如何处理JSON数据和运行流程
    SpringMVC视图解析器与数据类型转换
    SpringMVC入门——基础知识
    SpringMVC自定义拦截器与异常处理
    SpringMVC实现文件的上传和下载
    Eclipse中安装Springtools插件的步骤
    SpringMVC实现员工信息的增删改查
    文件的上传与下载
  • 原文地址:https://www.cnblogs.com/johnyang/p/16282859.html
Copyright © 2020-2023  润新知