CSS3 calc()会计算属性详解


Posted in HTML / CSS onFebruary 27, 2018

前言

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

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

怎么使用

calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算。
标准的写法:

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

兼容性

CSS3 calc()会计算属性详解

基本理论

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

注意点:

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

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

小demo

仅仅作为演示,响应伸缩

CSS3 calc()会计算属性详解

代码

<!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>

总结

calac 和flexbox搭配,用来写流式布局非常好;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 #HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 #HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 #HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 #HTML / CSS
css3中的calc函数浅析
Jul 10 #HTML / CSS
详解css3 object-fit属性
Jul 27 #HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 #HTML / CSS
You might like
php获取操作系统语言代码
2013/11/04 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
原生js开发的日历插件
2017/02/04 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
Python字符串处理实现单词反转
2017/06/14 Python
Python 从相对路径下import的方法
2018/12/04 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
Python中的面向接口编程示例详解
2021/01/17 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
书法培训心得体会
2014/01/05 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
工作收入证明模板
2014/10/10 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
化验员岗位职责
2015/02/14 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
React 高阶组件HOC用法归纳
2021/06/13 Javascript
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android