css3实现可以计算的自适应布局——calc()
开始我们需要先了解什么是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()的更多相关文章
- css3 calc()属性介绍以及自适应布局使用方法
前端知识 Calc()介绍 calc的英文是calculate的缩写,中文为计算的意思,是css3的一个新增的功能,用来只当元素的长度.比如说:你可以用calc()给元素margin.padding. ...
- 使用css3中calc()进行自适应布局
calc()能做什么? calc()可以通过计算得到元素的宽度或者高度,让我们很容易进行自适应布局. 你可以为一个div元素,使用百分比.em.px和rem单位值计算出其宽度或者高度,比如说“widt ...
- 关于使用rem单位，calc()进行自适应布局
关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...
- 关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...
- 处理移动端自适应布局的方法- calc()与vw
在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...
- 再谈布局，栅栏式自适应布局的学习和实现(calc自适应布局)
布局真的很重要.一个不好的布局后期会有很多很多的bug,就像是建房子的地基一样. 首先,再一次地圣杯布局的学习,来源于该教程: http://www.jianshu.com/p/f9bcddb0e8b ...
- css3自适应布局单位vw,vh
css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ...
- 这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
随机推荐
- Docker基于已有的镜像制新的镜像
1.根据运行的容器制作镜像 #查看所有的容器 docker ps #暂停当前容器 docker pause COTNAINER-ID #将容器运行当前状态提交 docker commit COTNAI ...
- FileInputStream和FileOutputStream详解
一.引子 文件,作为常见的数据源.关于操作文件的字节流就是 FileInputStream & FileOutputStream.它们是Basic IO字节流中重要的实现类.二.FileInp ...
- 清理我的 Mac
在Macbook使用久之后,会发现本来还富裕的硬盘,变得越来越少,尤其现在Macbook使用容量很小的固态硬盘.在此种情况下,该如何清理Macbook垃圾文件,以保证Macbook有足够空间做其他事情 ...
- python 基本数据类型练习题
练习题一.元素分类有如下值集合 [11,22,33,44,55,66,77,88,99,90],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.即: {' ...
- Fast Fourier Transform ——快速傅里叶变换
问题: 已知$A=a_{0..n-1}$, $B=b_{0..n-1}$, 求$C=c_{0..2n-2}$,使: $$c_i = \sum_{j=0}^ia_jb_{i-j}$$ 定义$C$是$A$ ...
- DB太大？一键帮你收缩所有DB文件大小（Shrink Files for All Databases in SQL Server）
本文介绍一个简单的SQL脚本,实现收缩整个Microsoft SQL Server实例所有非系统DB文件大小的功能. 作为一个与SQL天天打交道的程序猿,经常会遇到DB文件太大,把空间占满的情况: 而 ...
- 【WPF MaterialDesign 示例开源项目】 Work Time Manager
转岗写了将近一年的 PHP 最近因为 工作太多太杂, 在汇报工作的时候经常会忘记自己做了些什么,本来想只是使用excel来记录,但是发现了excel的很多局限性,光是无法共享就郁闷死了,习惯了下班不带 ...
- 由12306.cn谈谈网站性能技术
12306.cn网站挂了,被全国人民骂了.我这两天也在思考这个事,我想以这个事来粗略地和大家讨论一下网站性能的问题.因为仓促,而且完全基于本人有 限的经验和了解,所以,如果有什么问题还请大家一起讨论和 ...
- Fiddler中如何抓取app中https(443端口)数据
Fiddler不但能截获各种浏览器发出的HTTP请求, 也可以截获手机发出的HTTP/HTTPS请求,总结下Fiddler截获IPhone和Android发出的HTTP/HTTPS包,前提条件是:安装 ...
- Android6.0-运行时权限处理
为什么需要有运行时权限? 大家都知道在Android6.0之前,权限在应用安装过程中只询问一次,以列表的形式展现给用户,如果点击取消(即不认可应用所申请的权限),则会取消应用的安装.而用户出于安装应用 ...