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);
  • 相关阅读:
    TP5学习笔记- 使用命令行创建控制器
    centos 7 下安装mysql5.7
    webserver的安装
    linux常用命令 服务器硬件资源信息
    SSH 安装/ config 配置以及免密码登录
    thinkphp ,laravel,yii2运行环境搭建.
    分享几个博客园代码样式的CSS配置(复制黏贴即可)
    vue中通过.sync修饰符实现子组件修改父组件数据
    vue中$attrs和$listeners以及inheritAttrs的用法
    Vue项目中实现用户登录及token验证
  • 原文地址:https://www.cnblogs.com/lst619247/p/9297813.html
Copyright © 2011-2022 走看看