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. SimpleDateFormat 时间格式化

  2. CSUOJ 1532 JuQueen

    Problem H JuQueen JuQueen is the super computer with the best performance allover Germany. It is on ...

  3. HTTP请求和响应1:概述

    HTTP的报文分为请求报文和响应报文,打开一个web页面后,浏览器将发起一个HTTP请求报文.HTTPserver收到请求后将回送一个响应报文. 报文的基本结构 HTTP的请求和响应报文都由三个部分组 ...

  4. [python]CompressionError: bz2 module is not available

    事情是这种,在centos6 上本来是python2.6 然后我下载了一个python2.7.5 安装之后,把默认python改动为python2.7.5版本号. 使用pip安装twisted的时候出 ...

  5. Icomparer和Icomparable集合排序

    c#中实现对象集合的排序可以使用ArrayList中的Sort()方法,而有比较才能谈排序,因为不是基本类型(如string ,int.double......等)所以.NET Framework不可 ...

  6. Android 学习笔记之Bitmap位图的旋转

    位图的旋转也可以借助Matrix或者Canvas来实现. 通过postRotate方法设置旋转角度,然后用createBitmap方法创建一个经过旋转处理的Bitmap对象,最后用drawBitmap ...

  7. 误操作 rpm -e --nodeps zlib

    误删缘由:目的是要升级ssh版本,结果好像是冥冥之中有股力量在作祟迫使我粘了一条致死的命令rpm -e --nodeps  zlib就执行了,奇怪的是执行之后根本就全然不知.最后在敲rpm命令时居然报 ...

  8. 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结

    页面响应加载的顺序:   1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...

  9. Autoencoders and Sparsity(一)

    An autoencoder neural network is an unsupervised learning algorithm that applies backpropagation, se ...

  10. 今日SGU 5.3

    SGU 107 题意:输入一个N,表示N位数字里面有多少个的平方数的结尾9位是987654321 收获:打表,你发现相同位数的数相乘结果的最后几位,就和那两个相乘的数最后几位相乘一样,比如3416*8 ...