CSS笔记2-absolute属性相关的显隐

absolute属性相关的隐藏方法

.hidden{
    position:absolute;
    top:-9999em;
}
.hidden{
    position:absolute;
    visibility:hidden;
}
.hidden{
    position:absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);

对应显示方法

//position:absolute + visibility:hidden
dom.style.position = "static";
dom.style.visibility = "visible";

//position:absolute + top:-999em
dom.style.position = "static";

页面可用性，回流与渲染，配合JavaScript的控制

可用性隐藏，就是兼顾屏幕阅读器这类互联网阅读辅助设备（盲人用户）的隐藏方式。

position:absolute + visibility:hidden

display:none不仅会重绘，还会产生回流

使用absolute隐藏于显示元素是会产生重绘而不会产生强烈的回流

使用absolute隐藏是要优于display相关隐藏。

display:block/inline/inline-block/...与display:none

• inline是内联元素

  • (1)、和其他元素都在一行上；

    (2)、元素的高度、宽度、行高及顶部和底部边距不可设置；

    (3)、元素的宽度就是它包含的文字或图片的宽度，不可改变。

    扫描二维码关注公众号，回复： 3663853 查看本文章
• block是块级元素

  • (1)、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;

    (2)、元素的高度、宽度、行高以及顶和底边距都可设置;

    (3)、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

• inline-block是内联块元素：img、input标签

  • (1)、和其他元素都在一行上；

    (2)、元素的高度、宽度、行高以及顶和底边距都可设置，包裹性；高宽可定义；图文混排

display:table-cell，display:list-item

实现等高效果

.equal_height{width:100%; height:999em; position:absolute; left:0; top:0;}

应用了绝对定位属性的元素具有包裹性，等同于没有高度与宽度的inline-block元素。