css3独有属性(CSS3 calc会计算属性详解)
类别:Web前端 浏览量:1334
时间:2022-03-28 01:02:53 css3独有属性
CSS3 calc会计算属性详解前言
正如其名,calc是css3中新增的计算属性,让很多属性增加了一个表达式的说法;
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。
怎么使用
calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算。
标准的写法:
.class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }
兼容性
基本理论
- calc可以做用于任何具有大小的东东,比如border、margin、pading、font-size和width等属性设置动态值
- 支持的运算单位: rem , em , percentage , px
- 计算优先级别和数学一致
注意点:
calc 内部的表达式,在使用运算符号时,两遍必须加上空格(虽然乘除可以无视,但还是建议带上)!!!!!,不然会解析错误!!,看演示写法
width:calc(10 * 10px); width:calc(50% - 50px); width:calc(50% + 5em); width:calc(10% / 1rem);
小demo
仅仅作为演示,响应伸缩
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 Calc</title> <style type="text/css" media="screen"> html{ font-size:62.5%; } .wrapper{ width:100%; border:5px solid #f00; margin:10px ; box-sizing:border-box; height:200px; clear:b; } .items{ height:calc(100% - 40px); display:inline-block; border:1px solid #f70; text-align:center; } .w1 .items{ float:left; margin-top:calc( 5 * 4px ); border:3px solid #0F16C6; width:calc(100% / 3 - 6px) } .w2 .items{ float:left; margin-top:calc(200px - 20px * 9); width:calc(100% / 3 - 2px) } .w3 .items{ float:left; width:calc(100% / 3 - (3 * 6px)); margin:calc(2px * 4 ); } .w3 .items:first-child{ padding:calc(5 * 1rem - 3rem); box-sizing:border-box; } </style> </head> <body> <li class="wrapper w1"> <li class="items">margin-top:calc( 5 * 4px );</li> <li class="items">margin-top:calc( 5 * 4px );</li> <li class="items">margin-top:calc( 5 * 4px );</li> </li> <li class="wrapper w2"> <li class="items">margin-top:calc(200px - 20px * 9);</li> <li class="items">margin-top:calc(200px - 20px * 9);</li> <li class="items">margin-top:calc(200px - 20px * 9);</li> </li> <li class="wrapper w3"> <li class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</li> <li class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</li> <li class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</li> </li> </body> </html>
总结
calac 和flexbox搭配,用来写流式布局非常好;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- react怎样实现响应式计算属性(深入浅析React中diff算法)
- dede联动菜单样式(dede添加自定义属性完美解决方案)
- html5中table属性(Html5之自定义属性data-,dataset)
- php面向对象怎么调用属性(PHP面向对象程序设计__tostring和__invoke用法分析)
- vue中的指令及用法(详解Vue进阶构造属性)
- css伪元素是属性吗(CSS :befor :after 伪元素的巧妙用法)
- ASP.NET中Obsolete属性
- php的数据类型约束的好处(PHP中的Iterator迭代对象属性详解)
- css3独有属性(CSS3 calc会计算属性详解)
- css继承属性有哪些(CSS特殊性、继承与层叠)
- vue设置属性没响应(Vue.$set 失效的坑 问题发现及解决方案)
- css标签及属性的语法规则(详解CSS 伪元素及Content 属性)
- css3过渡动画制作(CSS3中动画属性transform、transition和animation属性的区别)
- vue中的watch属性(vue Watch和Computed的使用总结)
- python常用的属性和方法(Python进阶之@property动态属性的实现)
- 网友很惭愧,自己写了很多年的字,到头来还不如一名小学生写的好(自己写了很多年的字)
- 中华第一楷 张瑞龄 86岁高龄,苦练楷书71年,一幅字卖593万(中华第一楷张瑞龄)
- 冯骥才 年意(冯骥才年意)
- ()
- 百事大吉蓝底 绿底手机高清壁纸(绿底手机高清壁纸)
- 蓝底证件照怎么制作 证件照换底色 换尺寸快速搞定(蓝底证件照怎么制作)
热门推荐
- web服务器架设步骤及流程(web服务器怎么配置?web服务器配置图文教程)
- php漏洞处理方法(php解决安全问题的方法实例)
- 面试如何谈自己做过的项目
- ASP.NET使用JavaScriptSerializer实现序列化与反序列化
- cssdisplay覆盖规律(css解决display:inline-block;产生的缝隙间隙的方法)
- dedecms权限调整(增加dedecms后台留言管理功能)
- mysqlorder工作原理(详解Mysql order by与limit混用陷阱)
- cookie httponly属性
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- navicat不能连接到mysql报错2013(Navicat连接SQL Server数据:报错08001-命名管道提供程序的完美解决方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9