巧用CSS3的calc()宽度计算做响应模式布局的方法


Posted in HTML / CSS onMarch 22, 2018

今天浏览这个http://www.sitepoint.com站时,因为好奇看了下人家写的代码,结果发现了这行代码,

巧用CSS3的calc()宽度计算做响应模式布局的方法

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

calc()能做什么?

calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。

calc()语法

calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

width: calc(expression);

其中”expression”是一个表达式,用来计算长度的表达式。

calc()的运算规则

calc()使用通用的数学运算规则,但是也提供更智能的功能:

  1. 使用“+”、“-”、“*” 和 “/”四则运算;
  2. 可以使用百分比、px、em、rem等单位;
  3. 可以混合使用各种单位进行计算;
  4. 表达式中有“+”和“-”时,其前后必须要有空格,如”widht: calc(12%+5em)”这种没有空格的写法是错误的;
  5. 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

浏览器的兼容性

巧用CSS3的calc()宽度计算做响应模式布局的方法

我们来个例子,我们做一个三列并排的模块,宽度按百分比、有padding值、有border值、还有margin-right,而且这三个值是px,

li{
float:left;

width:33.3333%;
height:50px;

padding:10px;
margin-right:10px;

background:#FF6666;
border:5px solid #DAC8A7;
}

效果图:

巧用CSS3的calc()宽度计算做响应模式布局的方法

它是不会好好并列的,在这种情况下就不好算了,就算算出来也有那么一点误差,不是吗?现在我们就用到了calc(),

li{
float:left;

//width:33.3333%;
height:50px;

padding:10px;
margin-right:15px;

background:#FF6666;
border:5px solid #DAC8A7;

width:calc(33.3333% - (10px + 5px) * 2 - 15px )

}

意思是(width-(padding+border)*2-margin)

现在可以并排了

巧用CSS3的calc()宽度计算做响应模式布局的方法

好了,到这就告一段络了,再稍微优化一下左右边15px的空距,让两边都挨边。就在父级上加个margin-right:-15px,OK 搞定,

现在拿这个去做响应模式应该很方便了,

还有一篇外国人写的具体如何做大家有兴趣的可以了解一下http://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
html5实现滑块功能之type="range"属性
Feb 18 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 #HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 #HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 #HTML / CSS
css3 矩阵的使用详解
Mar 20 #HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 #HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 #HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 #HTML / CSS
You might like
php的curl实现get和post的代码
2008/08/23 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
用于table内容排序
2006/07/21 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
python xpath获取页面注释的方法
2019/01/14 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
什么是.net的Remoting技术
2016/07/08 面试题
斯福泰克软件测试面试题
2015/02/16 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
干部下基层实施方案
2014/03/14 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
golang连接MySQl使用sqlx库
2022/04/14 Golang
Python 视频画质增强
2022/04/28 Python