利用CSS3中的clac()实现按照屏幕分辨率自适应宽度
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()实现按照屏幕分辨率自适应宽度的更多相关文章
- JavaScript浏览器对象(BOM)中有关设备、浏览器屏幕高度和宽度的API介绍
JavaScript世界中,有很多看起来能够帮我们知道网页宽度和高度的API,但太繁多了,而且容易弄混.不容易区分它们.下面我就来介绍一下,这些API到底是什么意思,之间的区别又在哪里. 一.设备的分 ...
- Android程序对不同手机屏幕分辨率自适应的方法
相信各位Android开发爱好者都知道,由于OEM之间的竞争,各种Android操作系统的手机简直就是琳琅满目,屏幕分辨率的差异可想而知.目前比较主流的有WVGA=800x480,HVGA=480x3 ...
- WinForm 根据屏幕分辨率自适应
方法来自百度, 不算太好,但目前能满足需求.(窗口在LOAD的时候记录每个控件的坐标,每次窗口重绘的时候引时SizeChange事件,根据比率重新设置坐标) 以下是代码 AutoSizeFormCl ...
- 利用CSS3中transparent实现三角形及三角形组合图
??如何绘制三角形及三角形的组合图案,以下是自己画的草图 源码如下 <!DOCTYPE html> <html lang="en"> <head> ...
- 利用CSS3 中steps()制用动画
.monster { width: 190px; height: 240px; margin: 2% auto; background: url('http://treehouse-code-samp ...
- 如何在VMware中修改Mac OS的屏幕分辨率
关于mac os分辨率问题:方法一:临时方法,只对当次启动有效,即在启动倒计时的时候,回车,等待输入参数是输入如下文本:“Graphics Mode"="1280x800x32@6 ...
- 关于HTML,css3自适应屏幕,自适应宽度
设置了在不同分辨率下,显示的css样式: @media screen and (min-width:1080px){ .box{ width: 1080px;}.content{width: 1040 ...
- NGUI之UIRoot屏幕分辨率自适应
NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以一个UIRoot为UI游戏对象树的根的,那么这个UIRoot是起什么作用的呢? 先简单看一下UIRoot中的基本属性 U ...
- Unity3D开发(一):NGUI之UIRoot屏幕分辨率自适应
原地址:http://blog.csdn.net/onerain88/article/details/11713299 NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以 ...
随机推荐
- java exception 异常错误记录
//异常:Could not obtain transaction-synchronized Session for current thread 做定时器的时候用ApplicationContext ...
- Java单例模式 多种实现方式
一:通过静态私有成员实现单例模式 (1):私有化构造函数 (2):new静态实例属性对象,加锁. 单例类: package SinglePag; /* * 构造函数私有化,结合锁+静态的概念 实现单例 ...
- JQuery学习笔记系列(一)----选择器详解
笔者好长时间没有更新过博客园的笔记了,一部分原因是去年刚刚开始工作一段时间忙碌的加班,体会了一种每天加班到凌晨的充实感,之后闲暇时间了也因为自己懒惰没有坚持记笔记的习惯,现在重新拾起来. 借用古人的一 ...
- JAVA代理方式使用示例总结
JAVA代理方式使用示例总结 一. 代理方式概括 Java的代理方式主要包含了静态代理,动态代理两种方式,其中,动态代理根据实现的方式不同,又可以划分为jdk动态代理和cglib动态代理. 二. ...
- Session和Cookie对比详解
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- Java学习笔记2——数据类型和转换
前提知识: 1字节=8bit:1bit以一个二极管表示,代表2个状态(0或者1):2bit代表22即4种状态(00,01,10,11),8bit即是28即256种状态,16bit即是65536种状态. ...
- 函数反抖 debounce
debounce :如果在一段延时内又触发了事件,则重新开始延时.即每次触发事件,只触发最近一次的事件. const debounce = (fn, duration) => { let tim ...
- 编写模块时的声明(含MODULE_LICENSE等)(转)
编写模块必须先声明下面两句: #include <linux/module.h> //这个头文件包含了许多符号与函数的定义,这些符号与函数多与加载模块有关 #i ...
- 超实用的JavaScript代码段
1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...
- zabbix监控超详细搭建过程(转)
监控及zabbix 目录: 1 监控分类... 1 1.1 硬件监控... 1 1.2 系统监控... 2 1.3 网络监控... 3 1.4 ...