一周技術周報

1.css定位概念

常用的有三種：

Relative（相對定位）

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。

代碼如下：

background:#666;color: #fff;line-height: 100px;text-align: center;">底部

Absolute（絕對定位）

元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

代碼如下：

background:#666;color: #fff;line-height: 100px;text-align: center;">底部

Fixed（固定定位）

元素框的表現類似於將 position 設置為 absolute，不過其包含塊是視窗本身。它是根據瀏覽器窗口來對元素進行定位

代碼如下：

底部

2.系統需使用如下4:3顯示器訪問，且需兼容1024*768、1280*1024解析度，並且要求在1920*1080解析度下也需正常現實。

處理方法：

（1）有效寬度設置為1000px；

（2）字體設置用rem代替px；

3.CSS3 calc實現滾動條出現頁面不跳動

當頁面內容動態載入，開始沒有滾動條，內容增多後出現滾動條，這時使用固定寬度居中對齊布局會向左偏移一個滾動條寬度。解決方法可以給內容全部添加overflow-y:scroll;或者是根據內容用css填充好再補充內容。本文介紹的是calc來計算滾動條寬度，當有滾動條時，內容外部也給它模擬一個滾動條寬度，因而就不會偏移了。

很簡單，只要一行代碼就搞定了：·

.wrap-outer {

margin-left:calc(100vw - 100%);

}

或者：

//code from http://caibaojian.com/css3-calc-vw.html

.wrap-outer {

padding-left:calc(100vw - 100%);

}

然後就可以慶祝放鞭炮啦！！

首先，.wrap-outer指的是居中定寬主體的父級，如果沒有，創建一個（使用主體也是可以實現類似效果，不過本著寬度分離原則，不推薦）；

然後，calc是css3中的計算，IE10+瀏覽器支持，IE9瀏覽器基本支持(部分時候會顯示錯誤。不能用在background-position上)；

最後，100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。

於是，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（如果有，如果沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被佔用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！