zoukankan      html  css  js  c++  java
  • 使用rem单位以及calc()方法在进行自适应布局非常强大

    在进行自适应布局的时候有时候会碰到需要有给固定宽高的地方,比如一个div宽度为屏幕尺寸的一半,但是有10px的padding,那在这种情况下假如我们直接给宽度50%,或者计算完之后的rem单位,再给padding,.因为盒模型的关系导致其宽度为50%+20px。但是又因为50%是一个不固定的值,导致很难计算出一个具体的值,在这种情况下我们就可以使用css3中的一个计算方法,calc(),可以设置

    div{calc(50% - 20px);}

    这样设置之后得到的结果就是计算之后的结果,任何需要给具体的值的地方都可以使用calc来进行计算,不过需要主要目前此方法只能进行+ - * /的四则运算,并且在计算符号前后都需要有一个空格。当然上面的50%也可以换成计算之后的rem单位。

    注意点:
    calc 内部的表达式,在使用运算符号时,两遍必须加上空格(虽然乘除可以无视,但还是建议带上)!!!!!,不然会解析错误!!,看演示写法

    calc(10 * 10px);
    calc(50% - 50px);
    calc(50% + 5em);
    calc(10% / 1rem);
    通过这些在方法在进行自适应布局的时候就可以更加的得心应手了~~
    结论
    使用rem单位以及calc()方法在进行自适应布局非常强大,可以配合媒介查询,可以非常灵活的控制各种元素的自适应。

    calc(100% - 20px);啥意思

    css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少20px。

  • 相关阅读:
    JAVA安装
    capture格式布局
    CSS样式表
    进制的转换
    CentOs7设置主机名称,以及主机名称和ip的对应关系
    CentOS7中NAT网卡设置静态IP
    CentOs7安装配置JDK
    基于Go语言构建区块链:part5
    基于Go语言构建区块链:part4
    BoltDB使用笔记
  • 原文地址:https://www.cnblogs.com/iqiao/p/12097476.html
Copyright © 2011-2022 走看看