css中cale()函數的使用

問題分析

html

<div class="wrap">
	<div class="box">測試</div>
</div>

css:

.wrap{
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 10px auto;
    padding: 10px;
    background-color: #666;
}
.box{
    width: 100%;
    background-color: #f00;
    height: 100%;
    padding: 10px;
    border: 5px solid #0f0;
    margin: 20px;
}

當box元素的寬度為100%；該元素的padding,border,margin的值都會導致box超出wrap元素

解決辦法1：box-sizing:border-box;

可以把border和padding包進去，但是沒法把margin包進去

html:

<div class="wrap">
    <div class="box box-size">測試</div>
</div>

css:

.box-size{
    box-sizing: border-box;
}

解決辦法2：利用calc()

calc是calculate計算的簡寫，是css3新增的功能，用來指定元素的長度，是一個函數，通過計算算出來的，經常用於流動布局

語法

.elm{
    width:-webkit-calc(ecpression)
    width:-moz-calc(ecpression)
    width:calc(ecpression)
}

html:

<div class="wrap">
    <div class="box box-calc">測試</div>
</div>

css:

width:90%;
width: -moz-calc(100% - (10px + 5px + 20px)*2);
width: -webkit-calc(100% - (10px + 5px + 20px)*2);
width: calc(100% - (10px + 5px + 20px)*2);

calc()的運算規則

• 使用“+”、“-”、“*” 和 “/”四則運算；
• 可以使用百分比、px、em、rem等單位；
• 可以混合使用各種單位進行計算；
• 表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
• 表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。

瀏覽器的兼容性

瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各瀏覽器廠商的識別符，
不過可惜的是，移動端的瀏覽器還沒僅有“firefox for android 14.0”支持，其他的全軍覆沒。

以下是一個自適應布局示例

html

<div class="wrapper">
    <div id="header">
        <h1>CSS3 calc() Function</h1>
    </div>
    <div id="main">
        <h1>Far far away…</h1>
        <p>Far far away, behind the word mountains…</p>
    </div>

    <div id="accessory">
        <ul>
            <li><a href="#">Far far away…</a></li>
            <li><a href="#">Separated they live…</a></li>
            <li><a href="#">A small river named…</a></li>
        </ul>
    </div>

    <div id="footer">
        Visit the article…
    </div>

</div>

css

body {
    background: #E8EADD;
    color: #3C323A;
    padding: 20px;
}
.wrapper {
    width: 1024px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    margin: auto;
}
#header {
    background: #f60;
    padding: 20px;
    width: 984px;/*Fallback for browsers that don't support the calc() function*/
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
}
#main {
    border: 8px solid #B8C172;
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
    padding: 20px;
    width: 704px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(75% - 20px * 2 - 8px * 2);
    width: -webkit-calc(75% - 20px * 2 - 8px * 2);
    width: calc(75% - 20px * 2 - 8px * 2);
}
#accessory {
    border: 8px solid #B8C172;
    float: right;
    padding: 10px;
    width: 208px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
    width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
    width: calc(25% - 10px * 2 - 8px * 2 - 20px);
}
#footer {
    clear:both;
    background: #000;
    padding: 20px;
    color: #fff;
    width: 984px;/* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
}

下面是一個三欄自適應個布局，開發中會經常出現，下面是一種實現方式

html

<div class="wrapper">
	<ul id="js_list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li></ul>
</div>
<p>改變ul的transform: translateY(-0px);可以使內容上下滑動</p>

css

*{
    margin: 0;
    padding: 0;
}
.wrapper{
    width: 100%;
    height: 205px;
    margin: 20px auto;
    background-color: #eee;
    border: 1px solid #666;
    overflow: hidden;
}
ul{
    list-style: none;
    overflow: hidden;
    margin-bottom: -5px;
    transform: translateY(-0px);
    transition: all 0.6s ease-in-out;
}
ul li{
    float: left;
    background: #999;
    color: #333;
    height: 100px;
    text-align: center;
    font-size: 16px;
    line-height: 100px;
    width: calc((100% - 5px*2)/3);
    margin-right: 5px;
    margin-bottom: 5px;

}
ul li:nth-child(3n+3){margin-right: 0;}
p{
    width: auto;
    height: 20px;
}

這是一個完整的例子，點擊我的github