css 计算函数 calc() 的使用

2022-03-06 13:58:48 阅读：188 来源： 互联网

标签：函数 100% padding width background calc border css

<style>
.demo {
	width: 300px;
	background: #60f;
    padding: 3px 0;	
}
.box {
  width: 100%; /*宽度100% 为集成父元素的宽度*/
  /* width: calc(100% - (10px + 5px) * 2 ); */
	background: #f60;
	height: 50px;
    padding: 10px;/*添加padding*/
  border: 5px solid green;  
}
/* 因为子元素有padding和border 的存在，所以此时box元素会溢出demo元素 */
</style>
</head>
<body>
    <div class="demo">
        <div class="box"></div>
   </div>	
</body>
</html>

此时效果如下：

使用calc () 之后：

<style>
.demo {
	width: 300px;
	background: #60f;
    padding: 3px 0;	
}
.box {
  /* width: 100%; 宽度100% 为集成父元素的宽度 */
  width: calc(100% - (10px + 5px) * 2 );/*100%减去两侧的padding和两侧的border*/
	background: #f60;
	height: 50px;
    padding: 10px;/*添加padding*/
  border: 5px solid green;  
}

</style>
</head>
<body>
    <div class="demo">
        <div class="box"></div>
   </div>	
</body>
</html>

效果如下：

calc()使用通用的数学运算规则，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

标签：函数,100%,padding,width,background,calc,border,css
来源： https://blog.csdn.net/qq_44603011/article/details/123309439

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

ICode9

css 计算函数 calc() 的使用