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截图_动力节点Java学院整理
Jul 11 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
php实现的日历程序
2015/06/18 PHP
PHP多态代码实例
2015/06/26 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
python使用append合并两个数组的方法
2015/04/28 Python
Python AES加密模块用法分析
2017/05/22 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python WEB应用部署的实现方法
2019/01/02 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
Java语言的优势
2015/01/10 面试题
会计实习自我鉴定
2013/12/04 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
关于环保的标语
2014/06/13 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
MySQL触发器的使用
2021/05/24 MySQL