CSS3 calc()函数使用
1、calc是什么?
calc是英文单词calculate(计算)的缩写,用于动态计算长度值。
- calc()函数支持 "+", "-", "*", "/" 运算;
+ 和
- 运算符的两边必须始终要有空白符。
比如calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值。
而 calc(8px + -50%)会被解析成为一个长度后跟一个加号再跟一个负百分比。
* 和
/ 运算符不需要空白符,
但考虑到统一性,仍然推荐加上空白符。- 可以使用百分比、px、em、rem等单位;
2、浏览器兼容性
http://caniuse.com/#search=calc
3、calc使用
calc()主要应用在流体布局上,可以通过calc()计算得到元素的宽度。
calc()根据给定百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。
4、示例代码
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>CSS3 calc()函数应用</title>
<style>
* {
padding: 0;
margin: 0;
} .test {
width: calc(100% - 50px);
border: 1px solid red;
}
</style>
</head> <body>
<div class="test">我的宽度为100% - 50px</div>
</body> </html>
效果:
CSS3 calc()函数使用的更多相关文章
- CSS3 新特性(box-sizing盒模型,背景线性渐变,filter滤镜,calc函数,transition过渡)
1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改 ...
- css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...
- CSS3 calc()的使用
前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...
- css3 calc()方法详解
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
- css3 calc()
概述 CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状. 你还可以在一个calc()内部嵌套另一个calc(). ...
- calc()函数的使用
calc()函数算是css中的一个另类了,一般来说css都是直接确定的样式,而calc()函数却是可以动态计算,这和css静态的概念有些区别,但这并不妨碍其优秀的性能. 什么是calc()? calc ...
- CSS3 calc实现滚动条出现页面不跳动
什么是calc()? calc()从字面我们可以把他理解为一个函数function.其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可 ...
- css3 calc()的用法
转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个 ...
- css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数
本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
随机推荐
- 使用Chrome快速实现数据的抓取(一)——概述
对于一些简单的网页,我们可以非常容易的通过Develop Tool来获取其请求报文规律,并仿照其构建报文来获取页面信息.但是,随着网页越来越复杂,许多页面是由js动态渲染生成的.要获取这类信息,则需要 ...
- C# 去掉webapi返回json所带的转义字符
反序列换报错: {"Error converting value \"{\"Result\":true,\"Code\":\"\& ...
- 如何下载android源码与android内核源码
首先,要分清楚,android的源代码和android的内核代码一般是分开的,要分别进行下载. 1.先下载android的源代码.(这里不包括android的内核代码) 下载最新的源代码,一 ...
- Spring+Quartz实现文件中转站
其实这个功能QQ邮箱就有,为什么还要自己开发一个呢?因为有的文件非常重要...其实是客户要求... 那么我们先来看一下QQ的界面: 我们设计的界面: 文件要到期了是否通知用户?这里我们支持邮件及短信方 ...
- coco游戏android.mk
LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE := game_shared LOCAL_MODULE_FILENAME ...
- JAVA常见算法题(三十四)---计算加密之后的电话号码
某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的, 加密规则如下: 每位数字都加上5,然后用和除以10的余数代替该数字, 再将第一位和第四位交换,第二位和第三位交换. 求加密之后的 ...
- 使用SGD(Stochastic Gradient Descent)进行大规模机器学习
原贴地址:http://fuliang.iteye.com/blog/1482002 其它参考资料:http://en.wikipedia.org/wiki/Stochastic_gradient_ ...
- OpenCV学习(32) 求轮廓的包围盒
在OpenCV中,能够很方便的求轮廓包围盒.包括矩形,圆形,椭圆形以及倾斜的矩形(包围面积最小)集中包围盒.用到的四个函数是: Rect boundingRect(InputArray points) ...
- CoreAudio实现录音播音和扬声器听筒模式的切换
本例子使用Core Audio实现类似于微信的音频对讲功能,可以录音和播放并且实现了听筒模式和扬声器模式的切换.录音主要使用AVAudioRecorder类来实现录音功能,播放则使用AVAudioPl ...
- win C/C++程序通过Get方式获取网页源代码
[转自]http://www.cnblogs.com/coderzh/archive/2008/11/24/1340134.html #include <stdio.h> #include ...