四则运算 calc()
它的出现还真的蛮令人惊喜的,很适用于百分比宽度。之前我们有box-sizng,而今又多了一个它,并且,calc的实用性更高。我们可以在border、margin、pading、font-size和width等属性上做一些加减乘除,简单拿width举例:
.wrap {
background-color: #dee;
height: 200px;
padding: 40px;
display: inline-block;
width: calc(100% - 2 * 40px);
}
书写注意点:
width: calc(100%-2*40px);//错误的写法
(这是我在测试的时候踩的坑→ →)
运算符前后加一个空格,不然浏览器可能会无法识别哟~~
其它貌似也没有什么了,最后看一下兼容性吧,:)

四则运算 calc()的更多相关文章
- css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数
本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
- 【实践】js实现简易的四则运算计算器
最近看了一个大神推荐的某公司面试程序员的js 面试题,题目是用js 做一个计算器于是跟着大神的思想自己做了一下 ps:功能还没有完善好毕竟自己还是一只菜鸟还在不断学习中. 闲话不多说先上css代码 & ...
- CSS3的calc()使用
CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...
- CSS3 calc()的使用
前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...
- 关于使用rem单位,calc()进行自适应布局
关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...
- css3 calc()方法详解
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
- 使用css3中calc()进行自适应布局
calc()能做什么? calc()可以通过计算得到元素的宽度或者高度,让我们很容易进行自适应布局. 你可以为一个div元素,使用百分比.em.px和rem单位值计算出其宽度或者高度,比如说“widt ...
- calc()问题
什么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他. calc() 从字面我们可以把他理解为一个函数function.其 ...
- C#实现eval 进行四则运算
昨天在园子里看到有园友,写了相同标题的一篇文章.重点讲的是中缀表达式转换为后缀表达式的算法,但是实现的四则运算 有bug.其实我没看之前也不懂什么是 中缀和后缀表达式,之前有用过js eval 内置函 ...
随机推荐
- 给.sh文件添加可执行权限
有时我们运行.sh文件时会发现没有权限,具体解决方案如下 第一种:bash+执行文件 第二种:chmod命令 如果给所有人添加可执行权限:chmod a+x 文件名:如果给文件所有者添加可执行权限:c ...
- JAVA 1.5 并发之 ReentrantLock
在文章里我不打算具体讲Lock的实现,对此有兴趣的请点击这篇博文 http://www.blogjava.net/BucketLi/archive/2010/09/30/333471.html 我是一 ...
- TP5隐藏url中的index.php
在public文件夹下,有个.htacess文件,没有则新建一个, 如果已有这个文件,原文件内容如下: <IfModule mod_rewrite.c> Options +FollowSy ...
- numpy.mean和numpy.random.multivariate_normal(依据均值和协方差生成数据,提醒:计算协方差别忘了转置)
>> import numpy as np >>> A1_mean = [1, 1] >>> A1_cov = [[2, .99], [1, 1]]&g ...
- eclipse安装WTP部署WEB项目
打开WTP官方安装指南,找到想要的下载站点 http://wiki.eclipse.org/WTP_FAQ#How_do_I_install_WTP.3F 我选择的是http://download.e ...
- 六种获取配置properties文件的方法
总结一下六种获取配置properties文件的方法,代码如下: package com.xujingyang.test ; import java.io.BufferedInputStream ; i ...
- 报错:defined for 'courierAction_pageQuery' in namespace '/'Error creating bean with name 'cn.itcast.bos.web.action.base.CourierAction': Injection of autowired dependencies failed; nested exception is or
No qualifying bean of type [cn.itcast.bos.web.service.base.CourierService] found for dependency: exp ...
- 12、IGV-Integrative Genomics Viewer
1.IGV的网址:http://software.broadinstitute.org/software/igv/(java环境) 常见的几种输入格式bam/sam(比对文件) TDF(bam的精简 ...
- Umbraco back office 中templates显示不出来问题解决 (一片空白)
在公司一个项目中,遇到一个问题,登录Umbraco back office,该项目的settings => Templates 已经有该项目的10几个view (templates), 但是,点 ...
- jqGrid 跨页选择以及回显的处理
思路:定义全局的array(selectedIds),当列表选中的时候就push进去,当列表取消选中时,将该项从selectedIds中删除 重点:1.列表加载完成时为列表增加复选框,并给每一个che ...