css也有函数?好吧,我孤陋寡闻了。这里记录一下学习情况。

calc()函数

定义:用于动态计算长度值

支持版本:css3

  • 运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
  • 任何长度值都可以使用calc()函数进行计算
  • 支持"+","-","*","/"运算,使用标准的数学运算优先级规则

支持浏览器:

函数 谷歌 edge 火狐 safari o
calc()

26.0

19.0 -webkit-

9.0

16.0

4.0 -moz-

7.0

6.0 -webkit-

15.0

举例代码:

#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}

attr()函数

定义:返回选择元素的属性值

支持版本:css2

支持浏览器:

 
函数 谷歌 edge 火狐 safari o
attr() 2.0 3.0 1.0 3.0 9.0

举例代码:

a:after {
content: "(" attr(href) ")";
}

参考教程:

菜鸟教程-css函数

HTML中文网-css函数

css函数——calc()和attr()的更多相关文章

  1. 利用CSS函数calc(...)实现Web页面左右布局

    前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...

  2. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  3. css 1) calc() 函数的使用. 2)box-sizing:border-box

    calc() 是一个css 函数, 可以实现.计算 ---------------------------- 1. 每个div宽度是25%; 总共4个div. 同时 前三个div 有 border-r ...

  4. CSS 中 calc() 函数用法

    CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...

  5. CSS函数

    布局时发现CSS居然能进行计算,cale()函数用于动态计算长度值 html,body的height为100%,黑框浮动width为200px,橙框处标准流,由于浮动最初目的是为了实现文字环绕,所以文 ...

  6. CSS函数大全

    CSS函数(方法)参考 CSS函数用作各种CSS属性的值. 函数 描述 attr() 返回所选元素的属性值 calc() 允许您执行计算以确定CSS属性值 cubic-bezier() 定义Cubic ...

  7. JS里的CSS函数

    <title>无标题文档</title> <script> function css(obj,name,value){ if(arguments.length==2 ...

  8. agruments应用——求出函数参数的总合&&css函数——设置/读取对象的属性&&当前输入框高亮显

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 常用的Css函数

    1. attr() 用来选择元素的属性值,用法:attr(html元素的属性名),正常搭配css content一起使用 html: <p><a href="http:// ...

随机推荐

  1. 便捷编程-Xcode常用第三方插件 (随时更新)

    Xcode工具插件 1.XAlign 让Xcode编辑器中的代码以多种方式瞬间对齐 地址:https://github.com/qfish/XAlign 2.VVDocumenter-Xcode 在X ...

  2. js中由undefined说起

    typeof()函数 返回的是字符串.有六种可能:"number"."string"."boolean"."object" ...

  3. [51Nod]NOIP2018提高组省一冲奖班模测训练(三) 题解

    链接 A.Anan的派对 题意:Anan想举办一个派对.Anan的朋友总共有 n 人.第i个人如果参加派对会得到 \(c_i\) 的快乐值,除他自己外每多一个人参加他会减少 \(d_i\) 的快乐值. ...

  4. elasticsearch index 之 engine

    elasticsearch对于索引中的数据操作如读写get等接口都封装在engine中,同时engine还封装了索引的读写控制,如流量.错误处理等.engine是离lucene最近的一部分. engi ...

  5. vue 点击事件阻止冒泡 用stop

    1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'

  6. 程序猿的量化交易之路(14)--Cointrader数据表(2)

    Cointrader表结构 转载须注明出处:http://blog.csdn.net/minimicall?viewmode=contents,http://cloudtrader.top 设置(se ...

  7. virmon防火墙64位正式版(暂定)公布

    ChangeLog: 2015-06-2564位版本号签名问题临时得到解决.还要致谢一下某位黑客. 支持版本号x64 Windows Vista.7.8.8.1以上等.个人仅仅在Windows7上做了 ...

  8. worktools-不同分辨率下图片移植

    1.下载需要移植的平台代码 1)查看手机需要的项目平台信息:adb shell getprop | gerp flavor     ----->mt6732_m561_p2_kangjia_cc ...

  9. php课程 12-40 抽象类的作用是什么

    php课程 12-40 抽象类的作用是什么 一.总结 一句话总结:定标准的 1.继承的关键词有哪两个? extendsparent 2.抽象类的实际意义是什么? 制造符合规范的产品你必须实现了抽象类里 ...

  10. Scala入门到精通——第二十九节 Scala数据库编程

    本节主要内容 Scala Mavenproject的创建 Scala JDBC方式訪问MySQL Slick简单介绍 Slick数据库编程实战 SQL与Slick相互转换 本课程在多数内容是在官方教程 ...