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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
JS模拟自动点击的简单实例
2013/08/08 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python中__name__的使用实例
2015/04/14 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
用python进行视频剪辑
2020/11/02 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
美国渔具店:FishUSA
2019/08/07 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
幼儿园大班开学寄语
2014/08/02 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
公务员个人年终总结
2015/02/12 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书