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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
Javascript学习笔记 delete运算符
2011/09/13 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Python for循环与range函数的使用详解
2019/03/23 Python
三个python爬虫项目实例代码
2019/12/28 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
Java面向对象面试题
2016/12/26 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
教师师德反思材料
2014/02/15 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
学习普通话的体会
2014/11/07 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
小学庆六一主持词
2015/06/30 职场文书
结婚典礼致辞
2015/07/28 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS