开始我们需要先了解什么是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的KVC

    KVC作用 KVC类似于java中的反射,它是通过一个字符串 key 来获取和设置对应类中成员属性的值而key就是用来遍历某一个类,去查找类内部是否有与key同名的成员属性 所以对于KVC来说,成员属 ...

  2. npm 常用命令详解

    本文以Windows平台上做测试,以gulp为示例做教程,出自作者白树,转载请声明出处! 目录 npm是什么 npm install 安装模块 npm uninstall 卸载模块 npm updat ...

  3. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  4. Sql Server + ADO.NET

    MsSql-http://www.cnblogs.com/zhangwei595806165/archive/2012/02/23/2364746.html 协议:Shared Memory :效率最 ...

  5. POJ2524并查集水题

    Description There are so many different religions in the world today that it is difficult to keep tr ...

  6. 张高兴的 Windows 10 IoT 开发笔记：使用 ADS1115 读取模拟信号

    考虑到 Raspberry Pi 读取模拟信号是很烦人的事情,更何况是在没人玩的 Windows 10 IoT 下,所以准备正儿八经的写点东西. 需求:使用 Raspberry Pi 读取输出模拟信号 ...

  7. .NET中webservice如何使用，调用

    webservice 只是"面向服务"编程的一种方式,现在把所有的方式都合在一起,就叫做WCF,,,,,, 1.创建 webservice服务,在web项目中添加"web ...

  8. Nginx教程(二) Nginx虚拟主机配置

    Nginx教程(二) Nginx虚拟主机配置 1 虚拟主机管理 1.1 Nginx管理虚拟主机 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主 ...

  9. spring-线程池（2）

    继承:http://www.cnblogs.com/crazylqy/p/4220743.html spring设置容器启动时运行线程类(可循环执行) 修改以下两文件, 1.spring设置容器启动时 ...

  10. koa-router中路由/后面不填参数就会报404的解决办法

    koa-router 中使用路由参数时会遇到一个问题,就是像下面的代码在没有传入 id 是会报 404 错误 router.get('/:id', (err, ctx, next) => { / ...