美文网首页
30秒 学懂 css(二)

30秒 学懂 css(二)

作者: XAKX | 来源:发表于2019-05-08 14:23 被阅读0次

计算属性calc()

函数calc()支持CSS3; 让你的CSS具有计算功能, CSS属性值就是表达式的结果

html

<div class="box-example"></div>

CSS

.box-example {
  height: 280px;
  background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
  background-position: calc(100% - 20px) calc(100% - 20px);
}

关键点:

calc() :

  1. 支持 加+, 减-, 乘*,除/ 运算
  2. 可以使用的单位: px, %, rem, em , vw, rem
  3. 允许嵌套calc()
  4. 平台覆盖率: 96.21%, 支持最低版本 '浏览器 IE9', '安卓浏览器4.4', 'Safari 6.1', Opera内核不支持

相关文章

  • 30秒 学懂 css(二)

    计算属性calc() 函数calc()支持CSS3; 让你的CSS具有计算功能, CSS属性值就是表达式的结果 h...

  • 30秒 学懂 css(一)

    盒子规格Box-sizing html CSS 关键点:box-sizing : content-box: 默认,...

  • 书法――琴赋

    不才只学懂一星二点,望有才之人赐教。

  • 学懂

    (大师之字:字如其人,魂在“用敬”。我辈乱舞,堪称“桃符”。) 1.学懂 学者,觉也。 觉醒与睡觉,都用“觉”字表...

  • 【CSS】 二、定义样式表

    CSS 一、使用CSS样式的方式CSS 二、定义样式表CSS 三、常见属性CSS 四、DIV+CSS布局## 二、...

  • day03

    A今日所学 一、CSS基本样式 二、CSS继承 B今日已掌握 一、CSS基本样式 二、CSS继承 C今日未掌握

  • 学懂感恩

    从少就失去父母的韩信极为落魄,靠讨饭度日。淮阴县市场上有个卖肉的年轻人有一次拦住韩信说:“别看你又高又壮,还带刀挎...

  • 学懂赞美

    文/惜缘 有一种赞美一定要学懂。当一个人特别是女人学懂了赞美,你的胸怀就会变得宽阔,格局会越来越大,你的人生会更加...

  • 学懂学会

    之前做HTML、CSS的练习要告一段落了,目前的重点将放在算法、前段框架技术的学习,对于之前的学习其实并不满意,关...

  • 【CSS】 Index

    CSS 一、使用CSS样式的方式CSS 二、定义样式表CSS 三、常见属性CSS 四、DIV+CSS布局

网友评论

      本文标题:30秒 学懂 css(二)

      本文链接:https://www.haomeiwen.com/subject/rlhmoqtx.html