开始我们需要先了解什么是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. Python学习之路-Day2-Python基础3

    Python学习之路第三天 学习内容: 1.文件操作 2.字符转编码操作 3.函数介绍 4.递归 5.函数式编程 1.文件操作 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个 ...

  2. 简单五子棋，没有电脑AI

    刚学了C#委托,做了个五子棋练习,把前台绘制和后台逻辑分开,前台绘制方法用委托传给后台逻辑. 界面好简单... 先看类图 控制类控制整个游戏的逻辑,包括调用棋盘类的属性初始化棋盘.初始化两个棋手.轮流 ...

  3. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

  4. MyBatis源码解读（3）——MapperMethod

    在前面两篇的MyBatis源码解读中,我们一路跟踪到了MapperProxy,知道了尽管是使用了动态代理技术使得我们能直接使用接口方法.为巩固加深动态代理,我们不妨再来回忆一遍何为动态代理. 我相信在 ...

  5. Java读写Excel之POI超入门

    转自:http://rensanning.iteye.com/blog/1538591 Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给J ...

  6. .net 非对称加密

    后台   public class RSAHelper     {         /// <summary>         /// RSA加密         /// </sum ...

  7. 初码-Azure系列-记一次MySQL数据库向Azure的迁移

    初码Azure系列文章目录 还在继续给客户迁移不同的系统到Azure,这一次是一个系统的MySQL数据库要迁移,将迁移过程记录一下 原系统环境 数据库版本:MySQL Community Editio ...

  8. opencv基础到进阶（1）

    Opencv是一个用户基础非常多的视觉开发库,可以用来实现人脸识别等功能,由于涉及到大量的调用与计算,所以对硬件的条件要求很高,并且还需要时时刻刻注意内存溢出这个问题,怎么样?很刺激吧. 从这篇文章开 ...

  9. 【WPF】如何获取命令行参数

    应用程序以 Main 方法为入口点,如果为 Main 方法指定一个 string[] 类型的参数,在程序运行时,这个参数会获取到传递给应用程序的命令行参数. 而 WPF 应用程序比较特殊,因为在VS中 ...

  10. 从零开始——PowerShell应用入门（全例子入门讲解）

    学习一门技术,不止要会,还要善用,例子就是带你快速入门的最佳利器.本文就是要用例子,不,大量的例子来带你走进PowerShell应用世界. 本文主要介绍一些PowerShell入门的基础知识,对技术小 ...