[CSSの基本] calc()関数

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(式)

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_43352901/article/details/108534634