开始我们需要先了解什么是calc() ，calc()是一个CSS函数，你可以使用calc()给元素的margin、pading、width等属性设置

而且你还可以在一个calc()内部嵌套另一个calc() 

clac()的语法就非常简单了 ， 使用数学表达式来表示：

expression 一个数学表达式,用来计算长度的表达式，该表达式的结果会作为最终的值。

clac()使用“+”、“-”、“*” 和 “/”四则运算，可以使用百分比、px、em、rem等单位，而且可以混用多种单位计算

需要注意的是

如果“0”作为除数会让HTML解析器抛出异常.

“+”和“-”时，前后必须要有空格 比如calc(100%-15px) 这是错误的

“*”和“/”时，前后可以不留空格，但是建议加上空格

举两个栗子

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>demo</title>

 <style>

 .box{

     width: 500px;

     height: 300px;

 }

 .left{

     width: 250px;

     background:#ccc;

     float: left;

 }

 .right{

     width: calc(100% - 250px);

     float: right;

     background: #333;

 }

 .left,.right{

     height: 100%;

 }

 </style>

 </head>

 <body>

 <div class="box">

     <div class="left"></div>

     <div class="right"></div>

 </div>

 </body>

 </html>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>demo</title>

 <style>

 .demo{

     width: 500px;

 }

 .box{

     width: 100%;

     height: 30px;

     background: #ccc;

 }

 input{

   width: 100%;

   border:1px solid #333;

   width: calc(100% - (0px + 1px) * 2);

 }

 </style>

 </head>

 <body>

 <div class="demo">

     <div class="box">

         <input type="text">

     </div>

 </div>

 </body>

 </html>

如果不使用calc()

兼容问题也不是很大

强势的分割线 -- 原创文章码字不易，转载请注明出处
　　　　　　　　　　　　　　　　　　　　　　　　-- 本文完

css3实现可以计算的自适应布局——calc()的更多相关文章

  1. css3 calc()属性介绍以及自适应布局使用方法

    前端知识 Calc()介绍 calc的英文是calculate的缩写,中文为计算的意思,是css3的一个新增的功能,用来只当元素的长度.比如说:你可以用calc()给元素margin.padding. ...

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

    calc()能做什么? calc()可以通过计算得到元素的宽度或者高度,让我们很容易进行自适应布局. 你可以为一个div元素,使用百分比.em.px和rem单位值计算出其宽度或者高度,比如说“widt ...

  3. 关于使用rem单位，calc()进行自适应布局

    关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...

  4. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  5. 处理移动端自适应布局的方法- calc()与vw

    在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...

  6. 再谈布局，栅栏式自适应布局的学习和实现(calc自适应布局)

    布局真的很重要.一个不好的布局后期会有很多很多的bug,就像是建房子的地基一样. 首先,再一次地圣杯布局的学习,来源于该教程: http://www.jianshu.com/p/f9bcddb0e8b ...

  7. css3自适应布局单位vw,vh

    css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ...

  8. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  9. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

随机推荐

  1. IOS打包相关问题

    使用了AFNetworking框架,模拟器和真机运行都不报错,但是提交商店报错Unsupported Architecture. Your executable contains unsupporte ...

  2. 思考一个关于Lambda表达式做为linq条件的问题

    有一个集合如下 List<User> users = new List<User> { new User{Name = "1",Aget = 12}, ne ...

  3. [刷题]算法竞赛入门经典(第2版) 4-5/UVa1590 - IP Networks

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa1590 - IP Networks #include<iost ...

  4. JavaScript作用域问题

    最近在研究JavaScript,遇到了好多问题,之前还是挺清楚JavaScript作用域的,今天突然发懵了,求哪个大神给讲解一下? 谢谢!

  5. 基于Spring的Appium配置应用

    本文主要是讲述,使用Spring框架,优化Appium的Driver调用,并将写在代码里的大量配置参数定义到配置文件当中,还可灵活的控制调用AndroidDriver还是IOSDriver. Spri ...

  6. Android 桌面不显示应用图标

    忽然有一天,运行自己的程序,发现桌面没有应用图标了. google了半天,也没什么发现. 最后发现是主Activity中: <action android:name="android. ...

  7. 关于c#邮件发送的简单例子

    这里所说的发送邮件,以发送qq邮件为例. 首先我们先要在自己的邮箱配置好如下选项:

  8. How to get the file in a resource folder

    In a Maven project, we may often struggle to get a certain file (e.g. json file or sql file). Here i ...

  9. iOS自动打包并发布脚本

    假如你的项目目录如下所示: |____AOP | |____AppDelegate.h | |____AppDelegate.m | |____Base.lproj | | |____LaunchSc ...

  10. Spring MVC和Struts2的比较

    Spring MVC PK Struts2 我们用struts2时采用的传统的配置文件的方式,并没有使用传说中的0配置.spring3 mvc可以认为已经100%零配置了(除了配置spring mvc ...