css3 clac()方法
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()方法的更多相关文章
- css3种方法实现元素的绝对居中
元素的绝对居中应该是很多人熟悉的一个小应用,我记得很多年前去神州数码面试的时候就遇到过这个面试题.方法比较简单,代码如下: .node{ width : 300px; height : 400px; ...
- css3 calc()方法详解
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
- [web 前端] css3 transform方法常用属性
cp from : https://www.cnblogs.com/chrxc/p/5126569.html css3中transform方法是一个功能强大的属性,可以对元素进行移动.缩放.转动.拉长 ...
- css3 transform方法常用属性
css3中transform方法是一个功能强大的属性,可以对元素进行移动.缩放.转动.拉长或拉伸等功能. transform中最为常用的4个属性分别是:rotate();.scale();.skew( ...
- 使ie6/7/8支持css3的方法
使用PIE.htc让IE6\7\8支持CSS3部分属性 包括圆角,阴影,背景渐变等效果 下载地址 http://css3pie.com/download/ 需要注意几点的是 第一,pie是以相对页面h ...
- CSS3实用方法小记 2016.03.16
圆角边框: border-radius : 4px; box阴影: box-shadow : 5px 5px 3px #000 ; /* 参数分别为向右拓展距离,向下拓展距离,阴影宽度,颜色*/ 背景 ...
- 浅谈一下关于使用css3来制作圆环进度条
最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...
- CSS3:线上编辑工具及实用资料整理
an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
随机推荐
- linux/linux学习笔记-常用命令(mooc)
一.命令基本格式及文件处理命令 1.linux命令格式 简化选项用-表示,完整选项用--表示 注:linux通过权限位第1位(-:文件 / d:目录 / l:链接文件 来区分文件类型) 2.linux ...
- webView实现网页缩放
项目中遇到要实现webview上面的网页缩放功能,在网上查了资料加自己实践后得出结论: //缩放开关,设置此属性,仅支持双击缩放,不支持触摸缩放 mWebView.getSettings().setS ...
- switch条件变量的取值类型
switch条件变量的取值类型主要有以下六种: 1)JDK1.5(不含JDK1.5)之前只能是byte.short.int.char类型,不能是float.double.long.boolean类型. ...
- 小油2018 win7旗舰版64位GHOST版的,安装telnet客户端时,提示:出现错误。并非所有的功能被成功更改。
win7旗舰版64位GHOST版的,安装telnet客户端时,提示:出现错误.并非所有的功能被成功更改. 从安装成功的电脑上拷贝ghost版本缺少的文件,然后再安装telnet客户端,我已打包 链接: ...
- windows上zeal安装和使用--离线API文档
1.官网:https://zealdocs.org/download.html#windows 2.github:https://github.com/zealdocs/zeal 3.下载:可下载安装 ...
- 牛客练习赛51 C 勾股定理
链接:https://ac.nowcoder.com/acm/contest/1083/C 题目描述 给出直角三角形其中一条边的长度n,你的任务是构造剩下的两条边,使这三条边能构成一个直角三角形. 输 ...
- 04: DjangoRestFramework使用
Django其他篇 目录: 1.1 DjangoRestFramework基本使用 1.2 drf认证&权限 模块 1.3 djangorestframework 序列化 1.4 django ...
- 五、JVM — 类加载器
回顾一下类加载过程 类加载器总结 双亲委派模型 双亲委派模型介绍 双亲委派模型实现源码分析 双亲委派模型的好处 如果我们不想要双亲委派模型怎么办? 自定义类加载器 推荐 回顾一下类加载过程 类加载过程 ...
- 模板 - 无旋Treap
一般而言作为一棵平衡树只需要插入,删除,值求排名,排名求值,前驱,后继,六个接口. #include<bits/stdc++.h> using namespace std; typedef ...
- 通过编写串口助手工具学习MFC过程——(七)添加Tab Control控件
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...