zoukankan      html  css  js  c++  java
  • CSS-calc 兼容写法


    90%;/*写给不支持calc()的浏览器*/ -moz-calc(100% - (10px + 5px) * 2); -webkit-calc(100% - (10px + 5px) * 2); calc(100% - (10px + 5px) * 2);

    我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing,在一定程度上解决了上面的问题,而在今天的文章中我们来通过css3新增加的另外一个属性calc()来实现适应布局。

    calc()是css3新添加属性,它可以让你使用一个算术表达式来表达长度值,这意味着可以用它来定义div的宽度,并设置margin、padding、border等。
    calc()的运算规则

    使用”+”、”-”、”*”、”/”四则运算;
    可以使用百分比、px、em、rem等单位;
    可以混合使用各种单位进行计算。

    实例1:定位在页面上的块元素,含有外边距

    .banner {
      position:absolute;
      left: 40px;
       -moz-calc(100% - 80px);
       -webkit-calc(100% - 80px);
       calc(100% - 80px);
      border: solid black 1px;
      box-shadow: 1px 2px;
      background-color: yellow;
      padding: 6px;
      text-align: center;
    }
    
    实例2:自动调整大小的表单,又适应容器
    
    input {
      padding: 2px;
      display: block;
       -moz-calc(100% - 1em);
       -webkit-calc(100% - 1em);
       calc(100% - 1em);
    }  
    
    #formbox {
       -moz-calc(100%/6);
       -webkit-calc(100%/6);
       calc(100%/6);
      border: 1px solid black;
      padding: 4px;
    }
    
    <form>
      <div id="formbox">
      <label>Type something:</label>
      <input type="text">
      </div>
    </form>
    
    浏览器兼容性
    
        firefox 4.0+已经开支支持calc()功能,需要使用-moz-calc()私有属性;
        chrome从19 dev版,开始支持私有的-webkit-calc()写法;
        IE9支持原生写法,calc();
        Opera貌似还不支持~~
    
    This is why you see examples like this:
    
     calc(100%/3 - 2*1em - 2*1px);
    That’s actually the minimum number of characters you need to write that particular expression, so far as I can tell. Given the grammar requirements, you could legitimately rewrite that example like so:
    
     calc(100% / 3 - 2 * 1em - 2 * 1px);
    …but not like so:
    
     calc(100%/3-2*1em-2*1px);
  • 相关阅读:
    堆栈学习
    需要阅读的书籍
    Rust Book Lang Ch.19 Fully Qualified Syntax, Supertraits, Newtype Pattern, type aliases, never type, dynamic sized type
    Rust Lang Book Ch.19 Placeholder type, Default generic type parameter, operator overloading
    Rust Lang Book Ch.19 Unsafe
    Rust Lang Book Ch.18 Patterns and Matching
    Rust Lang Book Ch.17 OOP
    Rust Lang Book Ch.16 Concurrency
    Rust Lang Book Ch.15 Smart Pointers
    HDU3966-Aragorn's Story-树链剖分-点权
  • 原文地址:https://www.cnblogs.com/lst619247/p/9297813.html
Copyright © 2011-2022 走看看