zoukankan      html  css  js  c++  java
  • CSS3calc()函数练习(制作响应式布局)

      语法

    calc() = calc(四则运算)

      说明

    动态计算长度值

    任何长度值都可以使用calc()函数进行计算,例如:width、height

    calc()函数支持 ( + 、- 、*、/ ) 运算

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

      兼容性

     (以上数据来自css参考手册)在特定的浏览器上,需要添加前缀

      用法

     01、解决百分百布局中,padding和margin属性溢出问题

    想要内容的宽度占满整个盒子的宽,传统的做法是设定width为100%,但是如果此时想添加padding和margin,就会撑破盒子。

     100%;
    background-color: rgba(255, 204, 204,0.5);
    border: 2px solid #99cccc;
    padding: 20px;

    这时利用calc()函数去动态计算宽度,可以使得内容占满整个盒子,同时可以添加padding等属性也不溢出

    以上例子中的padding和border占据了数值分别为2px*2、20px*2,总共占据长度为44px,那么内容占据的宽度应该为100%-44px

    解析:2px*2为border(宽方向)占据的长度,20px*2为padding(宽方向)占据的长度

     80%;/*写给不支持calc()的浏览器*/
     calc(100% - 44px);
    background-color: rgba(255, 204, 204,0.5);
    border: 2px solid #99cccc;
    padding: 20px;
    

    02、解决侧边栏过早变窄问题

    当盒子里存在主内容和侧边栏,设定百分布局,在调整可视区域时侧边栏会过早变得很紧

    这时我们可以使用calc()函数设定宽度,让侧边栏的宽度固定,而主内容的宽度响应

     .item01 .content{
             80%;
            background-color: rgb(255, 204, 204);
            float: left;
            height: 4rem;
        }
        .item01 .sidebar{
             17%;
            background-color: rgb(255, 204, 204);
            float: right;
            height: 4rem;
        }
        .item02 .content{
             80%;/*写给不支持calc()的浏览器*/
             calc(100% - 7rem);
            background-color: rgba(153, 204, 204,0.7);
            float: left;
            height: 4rem;
        }
        .item02 .sidebar{
             17%;
             calc(6rem);
            background-color: rgba(153, 204, 204,0.7);
            float: right;
            height: 4rem;
        }
    css代码

    练习到此结束

  • 相关阅读:
    shell——变量
    xxx is not in the sudoers file.This incident will be reported.的解决方法
    百度面试回忆
    iOS网络协议 HTTP/TCP/IP浅析
    使用xib封装一个自定义view的步骤
    修改了系统自带头文件后,Xcode会报错
    字典转模型规范化
    文本属性Attributes
    苹果API常用英语名词
    命令行 -- 命令"%cd%"
  • 原文地址:https://www.cnblogs.com/liangdecha/p/9626013.html
Copyright © 2011-2022 走看看