CSS數學函數calc
本文，學習CSS數學函數。
CSS的數學函數允許將數學表達式作為屬性值使用。calc()就是一個非常有用的數學函數。
calc() 函數執行一個計算，作為屬性值使用。小括號里編寫數學表達式，可以使用 + - * /運算符。舉個例子：
創建 math-functions.html 文件和 math-functions-style.css 文件。在 html 里構建基礎代碼，引入外部樣式。
在 body 里添加 div 元素，定義類屬性。
HTML
<body>
<div class="box"></div>
</body>
在 css 文件里，定義基本樣式：定義通用選擇器，聲明樣式：box-sizing: border-box，margin: 0，padding: 0。定義群組選擇器，聲明樣式：html, body，height: 100%。
定義類選擇器 .box，聲明樣式 width: 100%，height: 50px，border: 1px solid black，background-color: yellow。
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
CSS
.box {
width: 100%;
height: 50px;
border: 1px solid black;
background-color: yellow;
}
在瀏覽器里查看效果，一個高為 50px，黃色背景，黑色邊框的容器，橫向撐滿了整個屏幕。
現在有個需求：給容器兩端留出 50px 的空隙，且容器寬度自適應。
此時 calc 函數就派上用場了。給 box 添加樣式 width: calc(100% - 100px)，意思是使元素在100%寬度的基礎上減少 100px。
效果是這樣的。
然后再給 box 添加樣式 position: absolute，left: 50px，使他向右再移動 50px。
我們看，容器兩端各留出了 50px 的間隔。當縮放窗口時，容器仍然可以自適應。效果實現了。
接下來我們應用 calc 函數實現兩列布局。calc 實現兩列布局的基本思路是：左右兩側設置樣式 display: inline-block，讓它們左右排列。左側設置固定寬度，右側通過 calc 函數計算寬度。我們來實現一下。
創建 calc-double-column.html 文件和 calc-double-column-style.css 文件。
在 html 文件里構建基礎代碼，在 body 里添加元素 div，定義樣式類。在 div 里添加一個子元素，定義類屬性，填入文本“左”;再添加一個子元素，定義類屬性，填入文本“右”。
HTML
<div class="container">
<div class="left">左</div>
<div class="right">右</div>
</div>
在 css 文件里構建基礎代碼。
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
定義選擇器 .container，聲明樣式 width: 100%，height: 500px，min-width: 800px，border: 10px solid tomato。
在瀏覽器里預覽效果，容器橫向鋪滿屏幕，當窗口寬度小于 800px 時，容器不再縮小。
回到樣式，定義選擇器 .left，聲明樣式：display: inline-block，width: 200px，height: 100%，background-color:gold。
定義選擇器 .right，聲明樣式：display: inline-block，width: calc(100% - 200px)，height: 100%，background-color: aliceblue。
CSS
.left {
display: inline-block;
width: 200px;
height: 100%;
background-color:gold;
}
.right {
display: inline-block;
width: calc(100% - 200px);
height: 100%;
background-color:aliceblue;
}
回到瀏覽器，看看效果。誒，頁面布局錯亂了!
你能想到是什么原因嗎?
對了，原因就是，兩個擁有 display: inline-block 樣式的元素中間會有空隙，所以右面元素折行顯示了。
產生這個空隙的原因是容器里的兩個子元素中間有換行，去掉這個換行。
CSS
<div class="container">
<div class="left">左</div><div class="right">右</div>
</div>
再來看看，左側寬度固定，右側自適應的兩列布局就做好了。
猜你喜歡LIKE
相關推薦HOT
更多>>
影視剪輯這樣做，你也能火！
看了這么多類型的視頻，最好入手的且漲粉快的莫過于影視剪輯類賬號。不過這也不是隨便剪剪就可以的，也有很多小伙伴不知道怎么制作。如果你要在...詳情>>
2023-04-20 11:19:19
抖音粉絲團怎么升級快
頻繁地發布內容：保持良好的發布頻率，有助于維持用戶的興趣，并吸引新用戶。與其他用戶合作：給其他目標受眾相似的用戶點贊和評論，可以吸引更...詳情>>
2023-04-11 11:45:12
javastringbuffer類有哪些方法
Java中的StringBuffer類和StringBuilder類都可以動態地創建和修改字符串，StringBuffer是線程安全的，而StringBuilder則是非線程安全的。下面是...詳情>>
2023-03-17 16:16:19
pyecharts是什么？主要特點是什么
Pyecharts是一款基于Python語言的開源數據可視化庫，它使用Echarts.js作為底層渲染引擎，支持生成各種常見的圖表，如折線圖、柱狀圖、散點圖、...詳情>>
2023-03-03 11:49:02熱門推薦
發抖音帶話題流量更高？
沸抖音買1000粉會封嗎？那些短視頻運營你不得不知道的事情
熱做短視頻你不得不知道的事情之抖音流量池分配規則
熱影視剪輯這樣做，你也能火！
新抖音發日常和作品有什么不一樣
抖音粉絲團怎么升級快
mysql和mariadb有什么區別
javastringbuffer類有哪些方法
怎樣把mysql卸載干凈?mysql怎么卸載干凈重裝
pyecharts是什么？主要特點是什么
視頻剪輯軟件哪個好?電腦軟件vs手機軟件
vugen(virtualusergenerator)的作用是什么
mvvm的概念、原理及實現
meta viewport是做什么用的？
京公網安備 11010802030320號