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>. 表达式 该表达式中可以使用下面的几个运算符连接任意的简单表达式: + 加法 - 减法 * 乘法 / 除法. 表达式中的操作数可以使用任意的长度…

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

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…

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

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

calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. 以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距.现在我们又多了一个选择了.但要注意,两者只能使用一个哦,否则就会造成冲突了. 怎么使用? calc()可以使用数学运算中的简单加(+).减(-).乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,…

圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为css有限,有不当或者错误之处,敬请指出. css3 cal 的支持情况,总体 93%. flex布局的支持情况, 总体97% 为了增加复杂度 1. 块之间有间距 2. 有 border 3. 都采用了 box-sizing: content-box 先看 calc的实现 <!DOCTYPE htm…

什么是calc()? calc()从字面我们可以把他理解为一个函数function.其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值.为何说是动态值呢?因为我们使用的表达式来得到的值.不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度. 语法 calc() = calc(四则运算)…

前端知识 Calc()介绍 calc的英文是calculate的缩写,中文为计算的意思,是css3的一个新增的功能,用来只当元素的长度.比如说:你可以用calc()给元素margin.padding.border.font-size和width等属性设置动态值.为什么说是动态值呢?因为我们是使用来表示得到的值.不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度. Calc()的用处 calc()能让你给元素的做计算,你可以给一个div元素,使用百分比.em.px…

在写前端页面样式中使用calc 显示Invalid property value 后来查了文档之后才发现是自己的格式不对 我的写法: .clac { width:calc(100%-112px); } 以我的写法样式是无效的  运算符前后需要保留空格才有用 正确写法: .clac { width:calc(100% - 112px); }…

1.calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border.margin.pading.font-size和width等属性动态的设置值. 2.calc()语法 .element { width:calc(expression); } 3.calc()的运算法则 1).使用 "+"."-"."*" 和 "/" 运算 2).可以使用百分比.px.em.rem等单位运算 3).可以混…

1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可分为两种情况: 1. box-sizing:content-box   盒子大小为 width + padding + border(默认) 2. box-sizing:border-box     盒子大小为 width 如果盒子模型我们改为了 box-sizing:border-box,…

1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;…

什么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他. calc() 从字面我们可以把他理解为一个函数function.其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元 素的长度.比如说,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值.为何说 是动态值呢?因为我们使用的表达式来得到的值.不过calc()…

一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了. Chrome/Firefox/Safari浏览器都是绿油油的,兼容性大大超出我的预期,于是果断尝鲜记录下语法用法和特性. 二.CSS变量var()语法和用法和特性 CSS中原生的变量定义语法是:…

CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释…

css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个.其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个.其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小, 即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工…

一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了. Chrome/Firefox/Safari浏览器都是绿油油的,兼容性大大超出我的预期,于是果断尝鲜记录下语法用法和特性. 二.CSS变量var()语法和用法和特性 CSS中原生的变量定义语法是:…

HTML5 HTML5简介 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.作为新HTML语言,具有新的元素,属性和行为 它具有更大的技术集,允许更多样化和强大的网站和应用程序 增加了新特性: 语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维.图形及特效特性,性能与集成特性,CSS3特性 广义的HTML5 广义的HTML5是HTML5本身+CSS3+JavaScript 虽然HTML5的一些特性仍然不被某些浏览器支持,但是它是一种发展…

在 less中不能使用css3 calc属性不能 css3 新增长度计算属性 可以根据不同单位计算宽度 .test{ width: calc(100% - 150px); } 但是当我们在less中使用这个方法的时候却出现了问题: less中写法:.test{ width: calc(100% - 150px)} less编译后:.test{ width: -50%;} 现这个问题的原因是less的运算方式和calc发送了冲突,要解决这个问题可以这样设置: .test{ width: calc(…

1.黑白图像img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}2. 使用 :not() 在菜单上应用/取消应用边框/* add border */.nav li { border-right: 1px solid #666;}…

记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line-height 1.4 padding 水平与垂直同时居中 2.1 挡板方式实现的水平垂直居中 2.2 vertical-align 2.3 模拟单元格特性 2.4 position + margin:负值 2.5 position + margin:auto 2.6 position + translate 2.7 pos…

先mark 1 .  移动端uc浏览器不兼容css3 calc() 2 .  ie8下a标签没有内容给宽高也不能触发点击跳转 3 . safari输入框加上readOnly="ture"属性仍然可以触发获取焦点,可再加上onfocus="this.blur()"解决 4 .  animate在移动端卡顿严重,移动端运动要用css3实现 5 .  ios下伪类事件失效,可给当前元素的touchstart/touchend事件绑定一个空匿名函数 解决 6 . 移动端或w…

  记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align1.2 margin1.3 line-height1.4 padding 水平与垂直同时居中2.1 挡板方式实现的水平垂直居中2.2 vertical-align2.3 模拟单元格特性2.4 position + margin:负值2.5 position + margin:auto2.6 position + translate2.7 position +…

[资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/define-font-size-with-css3-rem [资源二]淘宝m站首页的动态实现 学习http://m.taobao.com 首页的实现. 最近读到@大漠的新文章<使用Flexible实现手淘H5页面的终端适配>,和本部分有点关系.暂且加上来以供参考.(updated 2015-11-24…

导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%…

Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的, 本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究. 横向滚动桥 横向滚动桥比较简单,无需设置宽度,直接overflow-x:auto就ok. 这里需要注意的是使用white-space:nowrap去避免自动换行,导致横向滚动桥出不来. 如果要确保横向滚动桥显示,关键点是要不自动换行: 使用white-space:nowrap去避免自动换行,否则会导致横向滚动桥出不来. 如果有内部元素,内部元素需要使用…

原文:https://segmentfault.com/a/1190000003936841 使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: g…