Home > Web Front-end > HTML Tutorial > CSS的隐藏方式_html/css_WEB-ITnose

CSS的隐藏方式_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:07:02
Original
848 people have browsed it

display:none和visibility:hidden的区别

// 1、空间占据display:none;// 隐藏的元素不占文档流visibility:hidden;// 隐藏的元素空间存在(占茅坑、不拉屎)// 2、回流和重绘(reflow/repaint)display:none;// 隐藏参数回流和重绘visibility:hidden;// 无回流和重绘// 3、株连九族display:none;// 其内的标签元素全部隐藏、无论如何挣扎都无济于事visibility:hidden;// 其元素若添加visibility:visible;则会显示出来
Copy after login

height:0;overflow:hidden;

overflow:hidden;// 溢出隐藏//若父级被添加了position属性、子级内添加了绝对定位、则不会被隐藏//火星人在地球触发了法律,如果火星人的老爸在这法律之外,则这个火星人啥事没有;否则,坐牢!
Copy after login
position:absolute;top:-999em;// 不占空间、无法点击position:relative;top:-999em;// 占内存、无法点击position:absolute;visibility:hidden;// 不占空间、无法点击opacity:0;filter:Alpha(opacity=0);// 占内存、可以点击
Copy after login

那些原因引起浏览器的回流

  • 改变字体大小

  • 样式表改动

  • DOM操作

  • CSS伪类

  • 元素内容变化、尤其是输入控件

  • 调整窗口大小( resize )

  • width、clientWidth(内容可视区大小)、offsetWidth(border+clientWidth)、scrollTop/scrollHeight(元素内容高度/包括溢出内容)

  • 会使浏览器将渐进回流队列Flush、立即执行回流
    如何减少页面回流

    • 避免逐项更改样式、最好一次性更改style属性cssText、或者定义class一次性添加className

    • 避免循环操作DOM、创建一个documentFragment或div在上面应用所有DOM操作、最后在添加到指定的元素中

    也可以在一个display:none;的元素上进行操作、因为display:none;上的DOM操作不会引发回流(reflow)和重绘(repaints)

    • 避免循环读取offsetLeft等属性、在循环之前把他们存储起来

    • 进行复杂动画的元素运动时、使用绝对定位、使其脱离文档流。
      否则会引起父元素以及后续元素大量的回流

    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template