CSS calc() 函數(shù)

calc() 函數(shù)用于動態(tài)計算長度值。

 ● 需要注意的是,運算符前后都需要保留一個空格,例如:width: calc(100% - 10px);
 ● 任何長度值都可以使用calc()函數(shù)進行計算;
 ● calc()函數(shù)支持 "+", "-", "*", "/" 運算;
 ● calc()函數(shù)使用標準的數(shù)學(xué)運算優(yōu)先級規(guī)則;

代碼實現(xiàn)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}
</style>
</head>

<body>
<p>創(chuàng)建一個橫跨屏幕的div,div 兩邊有 50px 的間隙:</p>
<div id="div1">一些文本...</div>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • css樣式 #div1 {position: absolute; left: 50px; width: cal...
    方寸拾光閱讀 529評論 0 1
  • 定義 calc() 函數(shù)用于動態(tài)計算長度值。 需要注意的是,運算符前后都需要保留一個空格,例如:width: ca...
    CNLISIYIII閱讀 262評論 0 0
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,674評論 1 32
  • 《C陷阱與缺陷》 Andrew Koenig 讀書筆記 附錄來自網(wǎng)絡(luò) 2.1 理解函數(shù)的聲明 2.1.1 如何聲...
    rfish閱讀 1,068評論 2 11
  • 不知從何時開始 心里總是裝著許多猶疑 總在那可進可退的位置 再不敢,不顧一切 有人說 愛一個人就會主動 但未曾說過...
    綺筱君閱讀 175評論 0 0

友情鏈接更多精彩內(nèi)容