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 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
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
php内嵌函数用法实例
2015/03/20 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
javascript的函数
2007/01/31 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
js输出列表实现代码
2010/09/12 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python中如何获取类属性的列表
2016/12/26 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
python之Character string(实例讲解)
2017/09/25 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python读取mysql数据绘制条形图
2020/03/25 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
工会主席岗位责任制
2014/02/11 职场文书
求职意向书范文
2014/04/01 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
个人批评与自我批评材料
2014/10/17 职场文书