css3-calc用法
css3--calc()使用
css3新增的一个功能,可以计算元素的长度
例如说:一个百分百布局中,分左右两侧,中间需要一个分隔空间,使用padding或者margin则会超出100%,这时候使用calc()来计算 就很完美
calc()运算规则
1.可以使用 + - * / 四则运算
2.可以使用px em rem %等单位
3.可以混合使用各种单位计算
4.使用 + - 运算时,符号前后必须有空格
5.使用 * / 运算时,前后可以没有空格,但是建议留有空格
calc()兼容
pc端兼容还可以 IE9 ff4.0+ chrom19+
移动端兼容不太好 只有 firefox for android 14.0”支持
使用的时候建议加上前缀
使用
效果如下 全屏100%展示 左右两边有10px间距
width:calc(33.3333% - (10px + 5px) * 2 - 15px )
意思是(width-(padding+border)*2-margin)
- 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
- 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com
css3-calc用法的更多相关文章
- css3 calc()的用法
转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个 ...
- css3 calc():css简单的数学运算-加减乘除
css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...
- css3 calc()
概述 CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状. 你还可以在一个calc()内部嵌套另一个calc(). ...
- CSS3 calc()函数使用
1.calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值. calc()函数支持 "+", "-", "*&quo ...
- border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题
box-sizing box-sizing的CSS属性是用来改变默认的CSS框模型 属性 初始值:content-box 适用于:接受的所有元素的宽度或高度 继承:无 媒体:visual 指定的:as ...
- calc 用法以及原理
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. 它是CSS预处理器 .foo { width: 100 ...
- CSS3 calc()的使用
前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...
- css3 calc()方法详解
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
- CSS3 calc() 会计算的属性
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. ...
- 三栏布局之 css3 calc和 flex
圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为 ...
随机推荐
- 清澄 A1485. Catch The Penguins 抓企鹅
试题来源 2013中国国家集训队论文答辩 问题描述 Xyz带着他的教徒们乘着科考船一路破冰来到了南极大陆,发现这里有许许多多的企鹅.邪恶的Xyz想要抓很多企鹅回去开动物园,当宠物玩.但动物保护协会很快 ...
- ado:SqlDataAdapter,dataset 与SqlDataReader的用法一
原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...
- PhPStorm 快捷键使用(转载)
PhPStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,PhpStorm可随时帮助用户对其编码进行调整,运行单元测试或者提供可视化debug功能.Phpstrom的一款名 ...
- hdu 1099(数学)
Lottery Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- React native 横滑效果
import { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, ScrollView, Di ...
- 使用vue-cli搭建element-ui项目
最近在使用element-ui搭建项目时发现若只纯用webpack来运行element-ui,要配置各种文件,对于新手来说实在太不友好了, 就想到用vue-cli来搭建整个vue项目 1.安装node ...
- Noip2017赛前的一些记录
前言 已经退役整整五个月了....选考以后终于又摸上了键盘.... 但是码力已经大不如前了........ 距离比赛也就只有一星期了....那就胡乱的做一些题目吧QAQ 这里是一些根据算法分类的咋杂题 ...
- 使用viewPage实现图片轮播
概述 图片循环播放这种效果,在许多的场合都能看到,只要一打开各大主流网站的首页几乎都有一个这样的组件,它可以很显目的提供给用户最近最火热的信息.因为它应用得如此之广泛,今天,我们就来写一下这个组件. ...
- nodeJS一些事儿
node-webkit:开发桌面+WEB混合型应用的神器[大漠穷秋] 展望未来 其实这条路老早就有人在走 网上有很多人在争论,未来究竟是原生的应用会胜出,还是WEB APP会胜出,实际上这两者并不是你 ...
- mysql insert into 时报1062错误
插入数据库时报1062错误,并没有错误详解 而网上的原因大多是主键重复,找了半天并没有解决办法 最后发现是表设置了联合唯一 ,插入的数据和之前的一样 >_< 太真实了