1、简介

  calc()看其外表像个函数。平时在制作页面的时候,总会碰到有的元素是100%的宽度(例如body元素)。如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式)。平时我们碰到这样的现象时,只能通过改变结构来实现,有时甚至无法解决。就算你通过繁琐的方法实现了,但由于浏览器的兼容性而导致最终效果不一致。虽然上一篇随笔介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题,但calc()函数功能实现上面的效果来得更简单。

2、语法

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

  calc() = calc(四则运算);

  说明:

  用于动态计算长度值。

  • 需要注意的是,运算符前后都需要保留一个空格,表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格;例如:width: calc(100% - 10px)
  • 可以使用百分比、px、em、rem等单位;
  • 任何长度值都可以使用calc()函数进行计算;
  • calc()函数支持 "+", "-", "*", "/" 运算;
  • calc()函数使用标准的数学运算优先级规则;

3、浏览器兼容性

  浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符。

  (-moz-、-webkit-)

4、实例

  比如要实现以下的设计图(注:图片来自百度前端技术学院2016春季班第一阶段任务三,链接:http://7xrp04.com1.z0.glb.clouddn.com/task_1_3_1.png)中的中间一栏的布局。

 代码如下:

  HTML:(只有中间一栏的部分布局)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Third</title>
</head>
<body>
<div class="middle">
<h3>团队介绍</h3>
<p><strong>黃藥師</strong>,「天下五絕」之一「東邪」。桃花島島主,黃蓉之父。黃藥師形相清癯,身材高瘦,風姿雋爽,蕭疏軒舉,湛然若神。身穿青衣直綴,頭戴同色方巾,文士模樣。個性離經叛道,狂傲不羈。性情孤僻,行動怪異,身形飄忽,有如鬼魅。「桃花影落飛神劍,碧海潮生按玉簫」是他一生武功的寫照,武功造詣非凡,已臻化境,為金庸小說中武功最絕頂的高手之一。</p>
<p><strong>歐陽鋒</strong>,「天下五絕」之一「西毒」。歐陽鋒身材高大,身穿白衣,高鼻深目,臉鬚棕黃,英氣勃勃,目光如電,眼神如刀似劍,甚是鋒鋭,語聲鏗鏗似金屬之音。應為歐洲白人血統。此人兇狠毒辣,為求奪得「武功天下第一」的名號不擇手段,是金庸武俠小說中的著名反派角色和武功最絕頂的高手之一。</p>
<p><strong>段智興</strong>,「天下五絕」之一「南帝」,後改稱「南僧」。法號「一燈」,一燈身穿粗布僧袍,兩道長長的白眉從眼角垂了下來,面目慈祥,眉間雖隱含愁苦,但一番雍容高華的神色。身兼「先天功」及「一陽指」兩大神功武學,功力深厚非凡。</p>
<p><strong>洪七公</strong>,「天下五絕」之一「北丐」,是郭靖、黃蓉的師父,為金庸小說中武功最絕頂的高手之一。洪七公一張長方臉,頦下微須,粗手大腳,身上衣服東一塊西一塊的打滿了補釘,卻洗得乾乾淨淨,手裡拿著一根打狗棒,背上負著個朱紅漆的大葫蘆,身法迅雷不可目,「神龍見首不見尾」是他一生的寫照。</p>
<p><strong>王重陽</strong>,「天下五絕」之一「中神通」。中國道教全真派創始人,被尊為全真五祖之一,原名中孚,字允卿,本金朝諸生,後為武官,改名德威,字世雄。入道後改名嚞,一名喆,字知明,道號重陽子,故稱王重陽,綽號王害瘋,京兆咸陽(今陝西省咸陽市)大魏村人。七個主要門人稱七真。</p>
</div>
</body>
</html>

  CSS:(只包含中间布局部分)

 

.middle {
width: calc(100% - (80px + 120px + 200px));/*用100%的屏幕宽度减去已经知道固定的宽度,就是自适应的部分*/
overflow: auto;
background-color: #FFF;
border: 1px #999 solid;
margin: 20px;
}
.middle h3,p {
margin: 20px;
}

  

利用CSS3中的clac()实现按照屏幕分辨率自适应宽度的更多相关文章

  1. JavaScript浏览器对象(BOM)中有关设备、浏览器屏幕高度和宽度的API介绍

    JavaScript世界中,有很多看起来能够帮我们知道网页宽度和高度的API,但太繁多了,而且容易弄混.不容易区分它们.下面我就来介绍一下,这些API到底是什么意思,之间的区别又在哪里. 一.设备的分 ...

  2. Android程序对不同手机屏幕分辨率自适应的方法

    相信各位Android开发爱好者都知道,由于OEM之间的竞争,各种Android操作系统的手机简直就是琳琅满目,屏幕分辨率的差异可想而知.目前比较主流的有WVGA=800x480,HVGA=480x3 ...

  3. WinForm 根据屏幕分辨率自适应

    方法来自百度, 不算太好,但目前能满足需求.(窗口在LOAD的时候记录每个控件的坐标,每次窗口重绘的时候引时SizeChange事件,根据比率重新设置坐标) 以下是代码  AutoSizeFormCl ...

  4. 利用CSS3中transparent实现三角形及三角形组合图

    ??如何绘制三角形及三角形的组合图案,以下是自己画的草图 源码如下 <!DOCTYPE html> <html lang="en"> <head> ...

  5. 利用CSS3 中steps()制用动画

    .monster { width: 190px; height: 240px; margin: 2% auto; background: url('http://treehouse-code-samp ...

  6. 如何在VMware中修改Mac OS的屏幕分辨率

    关于mac os分辨率问题:方法一:临时方法,只对当次启动有效,即在启动倒计时的时候,回车,等待输入参数是输入如下文本:“Graphics Mode"="1280x800x32@6 ...

  7. 关于HTML,css3自适应屏幕,自适应宽度

    设置了在不同分辨率下,显示的css样式: @media screen and (min-width:1080px){ .box{ width: 1080px;}.content{width: 1040 ...

  8. NGUI之UIRoot屏幕分辨率自适应

    NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以一个UIRoot为UI游戏对象树的根的,那么这个UIRoot是起什么作用的呢? 先简单看一下UIRoot中的基本属性 U ...

  9. Unity3D开发(一):NGUI之UIRoot屏幕分辨率自适应

    原地址:http://blog.csdn.net/onerain88/article/details/11713299 NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以 ...

随机推荐

  1. C++标准库 -- pair

    头文件:<utility> 可访问属性: first 第一个值 second 第二个值 可访问方法: swap(pair) 和另外一个pair交换值 其他相关方法: make_pair(v ...

  2. yii2史上最简单式安装教程,没有之一

    写一篇绝对堪称史上最easy的Yii2安装教程教你入门. 既然是安装Yii,我们先去官网下载一份Yii的高级模版,什么,你说打开页面乱七八糟的英文字母你看不懂?那这样大哥,你按照下面的截图进行操作好吧 ...

  3. getContentResolver()内容解析者查询联系人、插入联系人

    首先,我们需要知道的两个Uri: 1.Uri uri = Uri.parse("content://com.android.contacts/raw_contacts");//查到 ...

  4. C、C++编译,链接,extern链接

    //b.cpp #inlcude <iostream> void b() { std::cout<<"fun b"; } //a.cpp extern vo ...

  5. 【转】前端图片该保存为什么格式?png or jpg?

    疑虑: 图片存储为web格式,该用什么格式保存呢?png?jpg?压缩比例该为多大?css spript的优劣?有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低.了解图片 ...

  6. Mui实现退出登录

    document.getElementById("logout").addEventListener("tap",function(){ var btn=[&q ...

  7. hdu 3934 Summer holiday(凸包最大内接三角形)

    求n个点能组成的最大三角形,一发旋转卡壳模板题... #include<algorithm> #include<iostream> #include<cstring> ...

  8. Python3入门笔记(1) —— windows安装与运行

    Python的设计哲学是"优雅"."明确"."简单".这也是我喜欢Python的理由之一 Python的安装: 1.进入Python官方网站 ...

  9. 【Java学习笔记之十八】Javadoc注释的用法

    Javadoc注释的用法 Java 文档 // 注释一行/* ...... */ 注释若干行/** ...... */ 注释若干行,并写入 javadoc 文档 通常这种注释的多行写法如下: /*** ...

  10. Django商城项目笔记No.16用户部分-用户中心收货地址

    首先完成省市区三级联动 新建areas应用 python ../../manage.py startapp areas 模型类代码 class Area(models.Model): "&q ...