CSS3的calc()做响应模式布局的实现方法


Posted in HTML / CSS onSeptember 06, 2017

 REM方法

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

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

width:calc(50% + xxpx)

总结

以上所述是小编给大家介绍的 CSS3的calc()做响应模式布局的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 #HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 #HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 #HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 #HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 #HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 #HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 #HTML / CSS
You might like
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
canvas仿iwatch时钟效果
2017/03/06 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python单例模式的两种实现方法
2017/08/14 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python使用thrift教程的方法示例
2019/03/21 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python类反射机制使用实例解析
2019/12/30 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
挂靠协议书范本
2014/04/22 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
如何解决php-fpm启动不了问题
2021/11/17 PHP
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers