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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 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程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python使用mysql数据库示例代码
2017/05/21 Python
Mac 上切换Python多版本
2017/06/17 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Django 框架模型操作入门教程
2019/11/05 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
医务人员自我评价
2014/01/26 职场文书
美德好少年主要事迹
2014/01/29 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
咖啡店创业计划书
2014/08/15 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android