如何在瀏覽器窗口上添加一個遮罩層 中的遮罩層的設置 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標簽元素了。