转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个空格,不然浏览器识别不了,比如:calc(100% - 5px); 兼容性: HTML: <div class="out"> <div class="in">in</div> </div> CSS: .out{ width…

CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes翻译成中文,是"关键帧"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问题.使用transition属性也能够实现过渡动画效果,但是略显粗糙,因为不能够更为精细的控制动画过程,比如只能够在指定的时间段内总体控制某一属性的过渡,而animation属性则可以利用…

css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 100px); background:#9AC8EB; } 3栏等宽布局 .box{ margin-left:20px; width:calc(100%/3 - 20px); } .box:nth-child(3n){ margin-left:0; } 运算规则 calc()使用通用的数学运算规则,但是…

概述 CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状. 你还可以在一个calc()内部嵌套另一个calc(). 语法 如何阅读 CSS 语法. calc(expression) 值 expression 一个数学表达式,该表达式的结果会作为最终的<length>. 表达式 该表达式中可以使用下面的几个运算符连接任意的简单表达式: + 加法 - 减法 * 乘法 / 除法. 表达式中的操作数可以使用任意的长度…

Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解css. 一.字体属性主要包括下面几个 font-family,font-style,font-variant,font-weight,font-size,font font-family(字体族): “Arial”.“Times New Roman”.“宋体”.“黑体”等;font-style(字体…

1.calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值. calc()函数支持 "+", "-", "*", "/" 运算: + 和 - 运算符的两边必须始终要有空白符.比如 calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值.而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比.* 和 / 运算符不需要空白符,但考虑…

box-sizing box-sizing的CSS属性是用来改变默认的CSS框模型 属性 初始值:content-box 适用于:接受的所有元素的宽度或高度 继承:无 媒体:visual 指定的:as specified 动画:no 规范秩序:独特的无歧义的正式语法定义的顺序 语法 box-sizing: content-box(默认样式) | padding-box | border-box content-box,border和padding不计算入width之内 padding-box,p…

前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode animation-play-state animation 1. @keyframes @keyframes 规则中指定了 CSS 样…

前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破.我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式).这样一来就会相当的麻烦,平时我们碰到这样的现象时,也是相当的谨慎,有时甚至无法解决,…

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc().因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过.今天花了一下午的时间彻底学习了一下calc().于是就有了这篇blog,希望对大家有所帮助. 平时在制作页面的…