CSS3: calc计算属性

最新推荐文章于 2024-03-14 11:00:26 发布

crper

最新推荐文章于 2024-03-14 11:00:26 发布

阅读量2.6w

点赞数 1

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 CSS3及HTML5折腾记文章标签： css3 标准 css3calc

本文链接：https://blog.csdn.net/crper/article/details/51285873

版权

笔记-HTML4&5/CSS2.1&3 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

CSS3及HTML5折腾记

23 篇文章 25 订阅

订阅专栏

前言

正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；

标准的写法：

  .class{
       /*
		 area: expression;
       */
	   width:calc();
	   padding:calc();
	   margin-top:calc();
	   ...
   }

兼容性

这里写图片描述

基本理论

calc可以做用于任何具有大小的东东，比如border、margin、pading、font-size和width等属性设置动态值
支持的运算单位： rem , em , percentage , px
计算优先级别和数学一致

注意点:

calc 内部的表达式，在使用运算符号时，两遍必须加上空格（虽然乘除可以无视，但还是建议带上）！！！！！，不然会解析错误！！，看演示写法

	width:calc(10 * 10px);
	width:calc(50% - 50px);
	width:calc(50% + 5em);
	width:calc(10% / 1rem);

实战效果图

仅仅作为演示,响应伸缩

这里写图片描述

实战代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3 Calc</title>
    <style type="text/css" media="screen">
    	html{
    		font-size:62.5%;
    	}
		.wrapper{
			width:100%;
			border:5px solid #f00;
			margin:10px ;
			box-sizing:border-box;
			height:200px;
			clear:b;
		}
		.items{
			height:calc(100% - 40px);
			display:inline-block;
			border:1px solid #f70;
			text-align:center;
		}

		.w1 .items{

			float:left;
			margin-top:calc( 5 * 4px  );
			border:3px solid #0F16C6;
			width:calc(100% / 3 - 6px)
		}

		.w2 .items{
			float:left;
			margin-top:calc(200px - 20px * 9);
			width:calc(100% / 3 - 2px)
		}

		.w3 .items{
			float:left;
			width:calc(100% / 3 - (3 * 6px));
			margin:calc(2px * 4 );
		}

		.w3 .items:first-child{
			padding:calc(5 * 1rem - 3rem);
			box-sizing:border-box;
		}

    </style>
</head>

<body>
    <div class="wrapper w1">
        <div class="items">margin-top:calc( 5 * 4px  );</div>
        <div class="items">margin-top:calc( 5 * 4px  );</div>
        <div class="items">margin-top:calc( 5 * 4px  );</div>
    </div>
    <div class="wrapper w2">
        <div class="items">margin-top:calc(200px - 20px * 9);</div>
        <div class="items">margin-top:calc(200px - 20px * 9);</div>
        <div class="items">margin-top:calc(200px - 20px * 9);</div>
    </div>
    <div class="wrapper w3">
        <div class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</div>
        <div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div>
        <div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div>
    </div>
</body>

</html>

总结

calc 和flexbox搭配，用来写流式布局非常好；

crper

关注

1
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS3: calc计算属性

前言正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；标准的写法： .class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }兼容性基本理论cal
复制链接

扫一扫