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基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
validform表单验证的实现方法
2019/03/08 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
python生成随机mac地址的方法
2015/03/16 Python
Python实现截屏的函数
2015/07/26 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
关于读书的演讲稿500字
2014/08/27 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
小学校长开学致辞
2015/07/29 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技