CSS calc()関数
インスタンス
<div>
要素の幅を計算するには、calc()関数を使用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#div1 {
position: absolute;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
text-align: center;
}
</style>
</head>
<body>
<p>创建一个横跨屏幕的div</p>
<div id="div1">一些文本...</div>
</body>
</html>
コード効果
定義と使用法
calc()関数が使用されている
动态计算长度值
- 演算子の前後にスペースが必要であることに注意してください。例:width:calc(100%-10px)
- calc()関数を使用して、任意の長さの値を計算できます
- calc()関数は、「+」、「-」、「*」、「/」操作をサポートします
- calc()関数は、数学演算に標準の優先規則を使用します
構文(パラメーター)
calc(式)