今天来讲一个灵活控制标签长度的方法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)</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>
更多推荐
CSS calc() 函数计算标签长度
发布评论