CSS3 新属性 cacl()用法解析

2021-08-13 10:31:34 阅读：292 来源： 互联网

标签：CSS3 box calc 100% width 5px 10px cacl 解析

这是一个会计算的属性，特别适合对于自适应还不是很熟练的童鞋

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了。

calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算，但是要 注意，使用运算符号的时候要与两边的值有空格和间隙，否则不识别，会报错！

作者：Awen_Panda
链接：https://juejin.cn/post/6844903903532679181
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.demo{
			width: 300px;
			background:#60f;
			padding: 3px 0;
		}
		.box{

			background:#f60;
			height: 50px;
			padding:10px;
			border: 5px solid green;
			/*第一种写法*/
			/*width: 100%;*/
			/*box-sizing: border-box;*/

			/*第二种写法*/
			width: 90%;/*写给不支持calc()的浏览器*/
			width: -moz-calc(100% - (10px + 5px ) * 2);
			width: -webkit-calc(100% - (10px + 5px) * 2);
			width: calc(100% - (10px + 5px) * 2);
		}
	</style>
</head>
<body>
	<div class="demo">
		<div class="box"></div>
	</div>
</body>
</html>

标签：CSS3,box,calc,100%,width,5px,10px,cacl,解析
来源： https://www.cnblogs.com/lixingzhe/p/15136152.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS3 新属性 cacl()用法解析