這篇文章主要為大家展示了“css中計算函數(shù)calc在網站布局中的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css中計算函數(shù)calc在網站布局中的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)建站主營彭陽網站建設的網絡公司,主營網站建設方案,app軟件開發(fā)公司,彭陽h5微信小程序搭建,彭陽網站營銷推廣歡迎彭陽等地區(qū)企業(yè)咨詢

calc在css 中是一個函數(shù)，用來做數(shù)值的計算。可以進行長度、角度、時間等的計算。支持 + 、 - 、 * 、 / 和小括號。使用的時候有個需要注意的地方是就是 加號和減號前后需要有個空格。 calc大大的增加了css的靈活性。給一些特殊的布局，提供了方便。

示例的顯示的效果

使用cacl 布局的一個示例

想做個一個效果, 就是在 #div1 的背景，延伸到 #div2 可見區(qū)域，在 #div2 顯示固定60個像素。就是黑色框寬度是60px。而不用考慮 #div1 的寬度。

css代碼

#div1 {
    width: 100%;
    min-width: 400px;
    outline: blue;
}
#div2 {
    width: 300px;
    margin: 0 auto;
    outline: 1px solid #ccc;
    color: white;
}

html代碼

    
        test