CSS3 新属性 cacl()用法解析

这是一个会计算的属性，特别适合对于自适应还不是很熟练的童鞋！

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了。

calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算，但是要注意，使用运算符号的时候要与两边的值有空格和间隙，否则不识别，会报错！

注意，加上或者减去的值是该元素的border padding margin ！

============================开始代码============================

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.demo{width: 300px;background:#60f;padding: 3px 0;}.box{background:#f60;height: 50px;padding:10px;border: 5px solid green;/*第一种写法*//*width: 100%;*//*box-sizing: border-box;*//*第二种写法*/width: 90%;/*写给不支持calc()的浏览器*/width: -moz-calc(100% - (10px + 5px ) * 2);width: -webkit-calc(100% - (10px + 5px) * 2);width: calc(100% - (10px + 5px) * 2);}</style>
</head>
<body><div class="demo"><div class="box"></div></div>
</body>
</html>

1>当使用第一种方法不加 box-sizing 属性时

这是效果图，可以看到会有溢出撑开的情况

2>当使用第一种方法加 box-sizing 属性时

这是效果图，可以看到不会被撑开但是高度会变化

3>当使用第二种方法时

Duang！Duang！Duang！是不是很完美？与自己想要的结果完美一致

CSS3 新属性 cacl()用法解析相关推荐

从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
两点补充——CSS3新属性以及弹性布局
CSS3 新属性一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋二 .[CSS 长度单位 ...
前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
CSS3计算属性-cacl不生效
CSS3计算属性-cacl不生效错误示范: height:cacl(100%-1px);//无法生效,因为运算符(-./.+.*)前后均需要有空格正确示范 height:cacl(100% - 1 ...
使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
“约见”面试官系列之常见面试题第三十七篇之CSS3新属性（建议收藏）
目录 CSS3 结构(位置)伪类选择器(CSS3) 目标伪类选择器(CSS3) 属性选择器(CSS3) 伪元素选择器(CSS3,重要) CSS3盒模型(重要) 颜色模式盒子阴影(CSS3) 文本阴影 ...
CSS3新属性：在网站中使用访客电脑里没有安装的字体
CSS的font-family属性使网页可以使用客户电脑里的字体,从而得到多姿多彩的WEB页面,但当客户端没有你想要使用的字体时怎么办呢?我们总不能让每个访问者都去安装一个字体吧?事实上,这是可以的! ...
html边框白色实线rgba,CSS3 RGBA 属性高级用法
这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...
Css3新属性：calc()
一.前言 calc()看起来像是javascript中的一个函数,而事实上它是用在Css中的,可以用它来计算长度(宽度或高度),能够自动根据不同尺寸的屏幕自动调接数值,从而很轻松的实现自适应布局展示在 ...

CSS3 新属性 cacl()用法解析

CSS3 新属性 cacl()用法解析相关推荐

最新文章

热门文章