box-sizing 屬性

　　規定兩個並排的帶邊框的框：

例子：

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

例如，假如您需要並排放置兩個帶邊框的框，可通過將 box-sizing 設定為 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。

程式碼：

　　html頁面

1         <div class="container">
2             <div class="content">content</div>
3             <div class
 
="slider">slider</div>
4         </div>

　　CSS程式碼

 1             .container{
 2                 border: 2px solid green;
 3                 height: 200px;
 4                 width: 100%;
 5                 line-height: 200px;
 6                 text-align: center;
 7 
 8             }
 9             .container > div
 
{
10                 float: left;
11             }
12             .content{
13                 border: 2px solid blueviolet;
14                 height: 200px;
15                 width: 69%;
16                 box-sizing: border-box;
17                 float: left !important;
18             }
19             .slider
 
{
20                 border: 2px solid deepskyblue;
21                 height: 200px;
22                 width: 30%;
23                 box-sizing: border-box;
24                 float: right !important;
25             }                    

calc（） 屬性

例子：

什麼是calc()?

　　calc()從字面我們可以把他理解為一個函式function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。為何說是動態值呢?因為我們使用的表示式來得到的值。不過calc()最大的好處就是用在流體佈局上，可以通過calc()計算得到元素的寬度

calc()有什麼用？

calc()的運算規則

使用“+”、“-”、“*” 和 “/”四則運算：可以使用百分比、px、em、rem等單位；可以混合使用各種單位進行計算；表示式中有“+”和“-”時，其前後必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；表示式中有“*”和“/”時，其前後可以沒有空格，但建議留有空格。注意：表示式中不能用"()"。如果有必須拆分。如（100% - 45px）/ 2必須寫成 100% / 2 - 45px / 2。

語法

calc()語法

calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表示式來表示：

.elm {
  width: calc(expression);
}

其中"expression"是一個表示式，用來計算長度的表示式。

實際應用中要注意做瀏覽器相容：

大家在實際使用時，同樣需要新增瀏覽器的字首

 .elm {
	/*Firefox*/
	-moz-calc(expression);/*chrome safari*/
	-webkit-calc(expression);/*Standard */
	calc();
 }程式碼：　　html頁面

1 　　　　 <div class="container">
2             <div class="content1">content1</div>
3             <div class="slider1"><slider1></slider1></div>
4         </div>

        CSS頁面

            .container{
                border: 2px solid green;
                height: 200px;
                width: 100%;
                line-height: 200px;
                text-align: center;

            }
       　　 .container > div{
                float: left;
            }
　　　　　　　.content1{
                border: 2px solid blueviolet;
                height: calc(100%  - 4px);
                width: calc(70% - 10px - 4px);
                margin-right: 10px;
            }
            .slider1{
                border: 2px solid deepskyblue;
                height:calc(100%  - 4px);
                width: calc(30% - 4px);
            }

　　總結：

從上面的程式碼及效果圖中，我們可以看出他們之間一些細微的差別，這需要我們在使用過程中根據實際情況去選擇使用哪個屬性，當然總體上，我對calc（）使用感覺好一些。