使用css3中calc()进行自适应布局

calc()能做什么？

calc()可以通过计算得到元素的宽度或者高度，让我们很容易进行自适应布局。

你可以为一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素div的宽度值到底是多少，而把这个任务交由浏览器去计算。

calc()语法

calc()语法非常简单，就像我们小时候学加（+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.elm {

  width: calc(expression);

}

其中"expression"是一个表达式，用来计算长度的表达式。

calc()的运算规则

calc()使用通用的数学运算规则，同时也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

浏览器的兼容性

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

大家在实际使用时，同样需要添加浏览器的前缀。

实例

<head>

   <style>

    .left-elem {

        width: -moz-calc(100% - 100px);

        width: -webkit-calc(100% - 100px);

        width: calc(100% - 100px);

        float: left;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

        }

    .right-elem {

        width: 100px;

        text-align: right;

        display: inline-block;

    }

   </style>

</head>

<body>

   <div style="border:solid 1px red">

      <div class="left-elem">

        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

      </div>

      <div class="right-elem">

        yyyyyyyyy

      </div>

   </div>

</body>

实现的效果如下：

使用css3中calc()进行自适应布局

当缩小浏览器尺寸时，左边的xxxxxx... 会呈现自适应效果。

随机推荐

python模块引用梳理
文件组织结构: t ├── __init__.py ├── main.py ├── t1 │ ├── A.py │ └── __init__.py └── t2 ├── B.py └── __ ...
[设计模式] Javascript 之观察者模式
观察者模式:定议定义对象间的一种一对多的关系,当一个对象状态改变时 (一般称为被观察者),依赖于该对象的对象被通知,并更新; 观察者模式:说明 1. 观察者模式是行为模式,也被称为:发布-订阅模式. ...
Android SDK Manager 更新代理配置 ,蛋碎了
启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口: 在『Andro ...
javaScript 工作必知（二) null 和undefined
null null 表示个“空” , 使用typeof (null) ;//Object ; 说明他是一个特殊的对象. null 类型只自己唯一个成员.他是不包含属性和方法的. undefined u ...
php 多进程中的信号问题
1.以下代码sleep时间远小于20 <?php // 当子进程退出时,会触发该函数 function sig_handler($sig) { switch($sig) { case SIGCH ...
Red Hat Enterprise Linux Server(RHEL) yum安装软件时This system is not registered with RHN&period; RHN support will be disabled&period; 的解决方法（转）
新安装了redhat6.5.安装后,登录系统,使用yum update 更新系统.提示: This system is not registered to Red Hat Subscription M ...
D - Cow Ski Area
Description Farmer John's cousin, Farmer Ron, who lives in the mountains of Colorado, has recently t ...
第一章 C++基本认识
1.使用visual studio时让程序暂停,在return前加上这个: char response; std::cin >> response; 2.c++程序开发流程 3.变量名的命 ...
android monitor 汉化 ddms
作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-mail: 313134555 @qq.com android.jar\com\androi ...
工具类官网Web原型制作分享-Adobe
Adobe是全球知名的软件开发团队,研发了设计创意领域全球领先的优秀软件产品,为设计行业提供了巨大的价值. 网站原型以图文排版为主,顶部一级导航,弹出面板和面板的使用实现了一级导航下拉的效果. 本原型 ...

秒客网

使用css3中calc()进行自适应布局

随机推荐

相关文章