css函数——calc()和attr()
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函数——calc()和attr()的更多相关文章
- 利用CSS函数calc(...)实现Web页面左右布局
前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...
- 关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...
- css 1) calc() 函数的使用. 2)box-sizing:border-box
calc() 是一个css 函数, 可以实现.计算 ---------------------------- 1. 每个div宽度是25%; 总共4个div. 同时 前三个div 有 border-r ...
- CSS 中 calc() 函数用法
CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...
- CSS函数
布局时发现CSS居然能进行计算,cale()函数用于动态计算长度值 html,body的height为100%,黑框浮动width为200px,橙框处标准流,由于浮动最初目的是为了实现文字环绕,所以文 ...
- CSS函数大全
CSS函数(方法)参考 CSS函数用作各种CSS属性的值. 函数 描述 attr() 返回所选元素的属性值 calc() 允许您执行计算以确定CSS属性值 cubic-bezier() 定义Cubic ...
- JS里的CSS函数
<title>无标题文档</title> <script> function css(obj,name,value){ if(arguments.length==2 ...
- agruments应用——求出函数参数的总合&&css函数——设置/读取对象的属性&&当前输入框高亮显
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 常用的Css函数
1. attr() 用来选择元素的属性值,用法:attr(html元素的属性名),正常搭配css content一起使用 html: <p><a href="http:// ...
随机推荐
- SimpleDateFormat 时间格式化
- CSUOJ 1532 JuQueen
Problem H JuQueen JuQueen is the super computer with the best performance allover Germany. It is on ...
- HTTP请求和响应1:概述
HTTP的报文分为请求报文和响应报文,打开一个web页面后,浏览器将发起一个HTTP请求报文.HTTPserver收到请求后将回送一个响应报文. 报文的基本结构 HTTP的请求和响应报文都由三个部分组 ...
- [python]CompressionError: bz2 module is not available
事情是这种,在centos6 上本来是python2.6 然后我下载了一个python2.7.5 安装之后,把默认python改动为python2.7.5版本号. 使用pip安装twisted的时候出 ...
- Icomparer和Icomparable集合排序
c#中实现对象集合的排序可以使用ArrayList中的Sort()方法,而有比较才能谈排序,因为不是基本类型(如string ,int.double......等)所以.NET Framework不可 ...
- Android 学习笔记之Bitmap位图的旋转
位图的旋转也可以借助Matrix或者Canvas来实现. 通过postRotate方法设置旋转角度,然后用createBitmap方法创建一个经过旋转处理的Bitmap对象,最后用drawBitmap ...
- 误操作 rpm -e --nodeps zlib
误删缘由:目的是要升级ssh版本,结果好像是冥冥之中有股力量在作祟迫使我粘了一条致死的命令rpm -e --nodeps zlib就执行了,奇怪的是执行之后根本就全然不知.最后在敲rpm命令时居然报 ...
- 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结
页面响应加载的顺序: 1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...
- Autoencoders and Sparsity(一)
An autoencoder neural network is an unsupervised learning algorithm that applies backpropagation, se ...
- 今日SGU 5.3
SGU 107 题意:输入一个N,表示N位数字里面有多少个的平方数的结尾9位是987654321 收获:打表,你发现相同位数的数相乘结果的最后几位,就和那两个相乘的数最后几位相乘一样,比如3416*8 ...