zoukankan html css js c++ java

显示和隐藏

1、display:none,不会占位置，下面的盒子顶上来了，与之对应的是display：block，和js搭配用来做特效。

<body>
    <div class="top">display:none,不会占位置，下面的盒子顶上来了</div>
    <div class="bottom">与之对应的是display：block，和js搭配用来做特效</div>                                                                                                                                                                                                
</body>

<style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        .bottom {
            background: rgb(192, 19, 19);
            display: none;
        }
    </style>

2、visibility: hidden隐藏元素以后占位置下面的盒子顶不上来，与visibility: hidden对应的是visibility: visible

<body>
    <div class="top">visibility: hidden隐藏元素以后占位置下面的盒子顶不上来</div>
    <div class="bottom">与visibility: hidden对应的是visibility: visible</div>
</body>

<style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        .top{
            background: rgb(184, 19, 19);
            visibility: hidden;
        }
    </style>

3、overflow：hidden是超出部分隐藏不可见

<body>
    <div class="father">
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        </p>
    </div>

<style>
        .father{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            overflow: hidden;/* 超出盒子部分剪切 */
            overflow: scroll;/* 出现滚动条 */
            overflow: auto; /*自动，没有超出默认可见，超出出现滚动条 */
        }
    </style>

查看全文

相关阅读:
查看串口设备
 JavaScript 闭包
 JS中decodeURI()与decodeURIComponent()
js 获取浏览器高度和宽度值(多浏览器)
几种常用网页返回顶部代码
 CSS3 Transition
jquery操作css
如何改变hr的颜色
 标签导航——display属性
 思考性能问题

原文地址：https://www.cnblogs.com/EricZLin/p/8779456.html