zoukankan      html  css  js  c++  java
  • css3 clac()方法

    calc()从字面上可以把它理解成为一个函数function,英文单词是calculate(计算),是CSS3的一个新功能,用来显示元素的长度。

    他的用途就是,如果你有一个元素,加了padding或者border就超出了原来预想的效果,或者把元素盒子撑破,这时我们就可以用calc()了,

    注意:

      1、任何长度值都可以使用calc()函数进行计算;

      2、 calc()函数支持 "+", "-", "*", "/" 运算;

      3、 calc()函数使用标准的数学运算优先级规则;

    具体用法也很简单: 

    .box{ calc(100%-30px);padding-top: 30px;background-color: lightskyblue;} 
    

    只是现在只有PC的浏览器可以兼容,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支,在移动端除了firefox for android 14.0,是没有其他的可以兼容的。

    -----------------------------------------------------我是分割线------------------------------------------------------

    但是如果你想解决padding或者border造成的额问题,可以给元素加上box-sizing:border-box;这样元素还是原来的大小。不会被撑破。

  • 相关阅读:
    Apple Watch知识点总结
    segue场景跳转的使用总结
    iOS地图相关知识点总结
    第三方库AFNetwork的作用和用法详解
    UIImagePickerController的知识点总结
    关于图片的压缩问题
    盒子模型知识
    CSS3新增属性
    ps命令详解
    http请求中的Referer的作用
  • 原文地址:https://www.cnblogs.com/eyed/p/7921604.html
Copyright © 2011-2022 走看看