admin管理员组

文章数量:1794759

CSS calc() 函数计算标签长度

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>

本文标签： 函数长度标签csscalc

版权声明：本文标题：CSS calc() 函数计算标签长度 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969047a123634.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。