calc()从字面上可以把它理解成为一个函数function,英文单词是calculate(计算),是CSS3的一个新功能,用来显示元素的长度。

他的用途就是,如果你有一个元素,加了padding或者border就超出了原来预想的效果,或者把元素盒子撑破,这时我们就可以用calc()了,

注意:

  1、任何长度值都可以使用calc()函数进行计算;

  2、 calc()函数支持 "+", "-", "*", "/" 运算;

  3、 calc()函数使用标准的数学运算优先级规则;

具体用法也很简单: 

.box{width: calc(100%-30px);padding-top: 30px;background-color: lightskyblue;} 

只是现在只有PC的浏览器可以兼容,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支,在移动端除了firefox for android 14.0,是没有其他的可以兼容的。

-----------------------------------------------------我是分割线------------------------------------------------------

但是如果你想解决padding或者border造成的额问题,可以给元素加上box-sizing:border-box;这样元素还是原来的大小。不会被撑破。

css3 clac()方法的更多相关文章

  1. css3种方法实现元素的绝对居中

    元素的绝对居中应该是很多人熟悉的一个小应用,我记得很多年前去神州数码面试的时候就遇到过这个面试题.方法比较简单,代码如下: .node{ width : 300px; height : 400px; ...

  2. css3 calc()方法详解

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...

  3. [web 前端] css3 transform方法常用属性

    cp from : https://www.cnblogs.com/chrxc/p/5126569.html css3中transform方法是一个功能强大的属性,可以对元素进行移动.缩放.转动.拉长 ...

  4. css3 transform方法常用属性

    css3中transform方法是一个功能强大的属性,可以对元素进行移动.缩放.转动.拉长或拉伸等功能. transform中最为常用的4个属性分别是:rotate();.scale();.skew( ...

  5. 使ie6/7/8支持css3的方法

    使用PIE.htc让IE6\7\8支持CSS3部分属性 包括圆角,阴影,背景渐变等效果 下载地址 http://css3pie.com/download/ 需要注意几点的是 第一,pie是以相对页面h ...

  6. CSS3实用方法小记 2016.03.16

    圆角边框: border-radius : 4px; box阴影: box-shadow : 5px 5px 3px #000 ; /* 参数分别为向右拓展距离,向下拓展距离,阴影宽度,颜色*/ 背景 ...

  7. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

  8. CSS3:线上编辑工具及实用资料整理

    an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...

  9. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

随机推荐

  1. xmake新增对Cuda代码编译支持

    最近研究了下NVIDIA Cuda Toolkit的编译环境,并且在xmake 2.1.10开发版中,新增了对cuda编译环境的支持,可以直接编译*.cu代码. 关于Cuda Toolkit相关说明以 ...

  2. Linux操作系统目录一览表

    / // 根目录 /bin //存放必要的命令 比如ls.cp.mkdir等命令 /boot //存放内核以及启动所需的文件 /dev //存放硬件设备文件 比如声卡.磁盘.光驱 /etc //存放系 ...

  3. 语言I—2019秋作业02

    这个作业属于那个课程 这个作业要求在哪里 我在这个课程的目标是 这个作业在那个具体方面帮助我实现目标 参考文献 C语言程序设计I https://edu.cnblogs.com/campus/zswx ...

  4. dotnet sdk 的镜像tag 相关

    https://hub.docker.com/_/microsoft-dotnet-core-sdk/ 微软的dotnet sdk 的 tag 微软貌似改默认镜像 dockerhub 里面的tag与 ...

  5. Kubernetes组件及网络基础

    在前面的部分了解了Pod的创建删除 ,查看信息等.那么我们怎么去管理Pod呢?我们可以通过 ReplicationController 去管理维护 Pod. Replication Controlle ...

  6. PyCharm中运行同一个python程序时选择平行窗口运行

    问题描述 当我们进行Socket编程时,客户端可能有多个,原则上如果有n个客户端,那么我们就要编辑n客户端的代码.然而其实我们每个客户端的代码都是相同,如果编辑n遍,将会相当的浪费空间. 解决办法 学 ...

  7. 该项目不知道如何运行配置文件 IIS Express。The project doesn’t know how to run the profile IIS Express

    原文:该项目不知道如何运行配置文件 IIS Express. 方案1(推荐). 可能原因是:禁用掉Microsft ASP.NET和Web工具扩展和微软Azure的应用程序服务工具扩展,恢复启用即可. ...

  8. jQuery之筛选方法

    1. 父parent.子children.find <div class="yeye"> <div class="father"> &l ...

  9. Docker:删除images报错(Error response from daemon: conflict: unable to delete 6885a5e3712a (must be forced) - image is being used by stopped container 0cf27d7d29c7)

    1.进入root权限 sudo su 2.停止所有的container,这样才能够删除其中的images: docker stop $(docker ps -a -q) 如果想要删除所有contain ...

  10. 基于ELK进行邮箱访问日志的分析

    公司希望能够搭建自己的日志分析系统.现在基于ELK的技术分析日志的公司越来越多,在此也记录一下我利用ELK搭建的日志分析系统. 系统搭建 系统主要是基于elasticsearch+logstash+f ...