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表单的实例教程
Dec 01 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
css3应用示例:新增的选择器
Mar 16 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
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
js中document.write和document.writeln的区别
2018/03/11 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
《中华少年》教学反思
2014/02/15 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
服装采购员岗位职责
2014/03/15 职场文书
疾病捐款倡议书
2014/05/13 职场文书
党员个人剖析材料
2014/09/30 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL