zoukankan      html  css  js  c++  java
  • CSS3 calc() 会计算的属性

    CSS3 calc() 会计算的属性

    calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

    以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意,两者只能使用一个哦,否则就会造成冲突了。

    怎么使用

    calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算。

    比如三局平均分布的布局,中间间距为5像素。

    calc


    *{margin: 0; padding: 0;} .col-3{ calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;} .col-3:nth-child(3){margin-right: 0;}


    浏览器兼容性

    calc-support

  • 相关阅读:
    web前端之jQuery
    java之awt编程
    java连接数据库的基本操作
    实习生应聘经历2018/3/1
    javaweb学习之建立简单网站
    mysql之视图
    71. Simplify Path
    347. Top K Frequent Elements
    7. Reverse Integer
    26. Remove Duplicates from Sorted Array
  • 原文地址:https://www.cnblogs.com/luckyuns/p/6599848.html
Copyright © 2011-2022 走看看