今天來講一個靈活控制标簽長度的方法
calc()
。
calc()
文法規則：
calc(expression)
，
expression
是一個數學表達式。
舉個栗子：
首先，顯示一個寬度隻有50%的div
1，-
width: calc(100% - 100px);
寬度100%的基礎上，兩邊各削減50px
2，+
width: calc(100% + 100px);
寬度100%的基礎上，兩邊各加寬50px
3，*
width: calc(50% * 2);
寬度50%的基礎上乘以2，即100%（高度有變化是因為我在别處做了調整，懶得改圖了）
4，-
width: calc(100% / 2);
寬度100%的基礎上除以2，即50%（高度有變化是因為我在别處做了調整，懶得改圖了）
注意：四個運算符号的左右都要有空格
完整代碼附上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
#div1 {
margin:0 auto;
width: calc(100% / 2);
border: 1px solid black;
background-color: yellow;
padding: 1px;
}
</style>
</head>
<body>
<p>建立一個橫跨螢幕的div，寬度100%的基礎上除以2，即50% ：</p>
<div id="div1">一些文本...</div>
</body>
</html>