DIV CSS 佈局教程網

CSS指的是層疊樣式表，CSS的單位大家應該首先想到的是px,也就是像素，我們在網頁布局中一般都是用px，但是近年來自適應網頁布局越來越多，em和百分比也經常用到了，最近在修改網站模板時發現了一個問題，之前一直都是用自己的筆記本電腦來查看自己的博客，博客剛好顯示的可以，但是一旦換了分辨率高的顯示屏，網站就顯得很不搭配了，要是css能夠百分比加減固定像素就能解決問題了，於是百度相關，經過測試，終於解決了CSS百分比加減固定的像素的問題。

代碼如下：

然後隨著手機的流行，web app和hybrid app的開發，都用到了css3技術，在css3中，新增了許多單位，rem、vw和vh、vmin和vmax、ch和ex等等。

css3的calc()

浏覽器支持IE9+、FF4.0+、Chrome19+、Safari6+
calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示：

.haorooms {
  width: calc(expression);
}

.haorooms{
  width: calc(100% - 20px);  //注：減號前後要有空格，否則很可能不生效！！
}

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
     width: 90%;/*寫給不支持calc()的浏覽器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}