如何在浏览器窗口上添加一个遮罩层 中的遮罩层的设置 display:fixed absolute top:0; left:0 width:100%;height:100%;

1.如果你用display：relative或者是不设置display为fixed和absolute的话用height:100%是无效的，应该它相对于body 而body相对html想让它有效必须设置body和html即可代码如下：

<style type="text/css">
        html,body{
            height: 100%;
        }
        .box{
            width: 100%;
            height: 100%;
            background: red;
        }
    </style>
</head>
<div class="box">dd</div>

2.通常用的方法是设置窗口为display：fixed  设置top：0； left:0；width:100%;height:100% 就是不加top:0；left:0;也是可以的，只是要写在最上面原来是脱离文档流了，不是那种自动就到上面了，要给一个top那么才可以那样写为了更完美 也可以为top:0 ;bottom:0; rigth:0 ; left:0;填冲整个屏幕但是如果该元素为display:table那么就不可以使用只能用100%即可：

<div unselectable="on" style="background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;"></div>

它可以实现遮挡浏览器窗口的功能，其中几个需要注意的css属性分别解释如下：

1.   background:#000: 将div的背景色设置为黑色; filter:alpha(opacity=10): 在IE下，将div的透明度设置为0.1; opacity:.1: 在非IE下，将div的透明度设置为0.1
2. 以上三个属性联合起来，实现了页面其余元素的“被挡住但可见”的效果。
3. left:0px;top:0px;position:fixed;height:100%;width:100%: 定义div的高度和宽度分别是浏览器高度和宽度的100%。这里有个小技巧，如果div的position是fixed或者absolute，那么当div的高度设置为百分比(例如100%)时，div的高度将参照浏览器可视区域(viewport)的高度来计算。此外，设置position为fixed，可以使得浏览器即使在scroll或resize时也保证遮罩层一直挡在页面的可视区域。
4.  overflow:hidden 用来避免滚动条的出现。

3.细心的读者应该可以发现上述的css代码并不适用于IE 6，原因有两个：一来，IE6不支持position:fixed；二来，更重要的是，在IE 6中，height:100%不起作用，div的高度不再参照浏览器可视区域的高度。

修正第一个缺陷很简单，只需用css hack，加上 _position:absolute 就行。

修正第二个缺陷，我们需要借助javascript，动态地计算出遮罩层的高度和宽度，特别注意的是，为保证遮罩层在页面滚动时也遮住窗口，遮罩层的高宽应该覆盖住滚动区域。

动态计算的代码如下，其中mask变量指向遮罩层：

function calculateSize() {
    var b = document.documentElement.clientHeight ? document.documentElement : document.body,
    height = b.scrollHeight > b.clientHeight ? b.scrollHeight : b.clientHeight,
    width = b.scrollWidth > b.clientWidth ? b.scrollWidth : b.clientWidth;
    mask.css({height: height, width: width});
}

此外，还需注意到，当页面大小发生变化时，要重新计算遮罩层的高宽，否则可能会新扩大的区域没有被遮罩。

function resize() {
    calculateSize();
    $(window).on(“resize”, calculateSize);
}

b。 使里面的div居中的用table来实现的代码如下：

<style type="text/css">
        .box{
            position: absolute;
            display: table;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: red;
            
        }
        .wrap{
            display: table-cell;
            vertical-align: middle;
            width: 100%;
            height: 100%;
            background: #ccc;
        }
        .item{
            height: 300px;
            width: 300px;
            background: yellow;
            margin: 0 auto;
        }
<div class="box">
        <div class="wrap">
            <div class="item"></div>
        </div>
    </div>

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以上面代码中加一个div wrap来设置display:table-cell，在使用display:table-cell与float:left或是position:absolute 属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，用数值可以但是用100%就不可以，但是可给父类定义为display:table就可以了，对margin值无反应，响应padding属性，基本上就是活脱 脱的一个td标签元素了。