CSS calc() 函数计算标签长度
今天来讲一个灵活控制标签长度的方法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>👁️ 阅读量：0
© 版权声明：本文《CSS calc() 函数计算标签长度》内容均为本站精心整理或网友自愿分享，如需转载请注明原文出处：https://www.zastudy.cn/wen/1686969273a411247.html。