html中calc属性什么意思,深入理解CSS calc属性
在过去的几年时间里,前端WEB页面的布局已经从固定宽度演变为现在的响应式布局。本教程将带大家理解CSS calc属性,这是一个非常有用的属性,理解它的最好方法是举一些例子。
Example 1:垂直Margin(Vertical Flush Margins)
来看看下面的一张图片:图片中的瀑布图片被浮动起来,右边有2em的margin。图片被制作为流式布局,宽度为它的父元素的50%。它的html结果如下:
Det er et velkjent faktum...
现在,我们想要瀑布图片的margins沿着垂直方向延伸,现在的问题是p段落的文字最终会跑到图片的下方去。我们想要的效果如下图:
解决的方法有很多种,我们这里要遵从下面的原则:跟随在图片后的p元素要有50%+2em的左margin。
我们在兄弟选择器上使用calc属性来解决这个问题:
img ~ p { margin-left: calc(50% + 2rem); }
calc 允许我们融合不同的单位:百分比和rem,从而得到margin固定而图片是流式布局的效果。
Example 2:容器中的全屏宽度(Full-Width Elements In Padded Containers)
来看下面的例子:
HTML
......
CSS
* { box-sizing: border-box; }
body { background: #000; font-family: Edelsans, sans-serif; line-height: 1.5; }
article { width: 80%; margin: 0 auto; background: #fff; padding: 0 2rem; color: #000; }
article header img { width: 100%; height: auto; }
上面的代码得到的页面效果如下:
这个设计的问题是给 article 元素的padding会作用在header上。使图片也一起被压缩了。
我们能通过在header元素上使用calc解决这个问题。
article header { width: calc(100% + 4rem); margin-left: -2rem; }
通过在head上添加4rem的宽度来弥补左右两侧的2rem的padding。得到结果如下:
操作符(Operations)
calc可以做基本的数学运算:+、-、*、/。
有一点要记住,calc在做加法和减法运算时,在它的操作符两侧必须有空格隔开并且calc必须紧贴着括号。例如:
下面的写法是正确的:
width: calc(20% - 1rem);
下面的写法是错误的:
width: calc(20%-1rem);
下面的写法也是错误的:
width: calc (20% - 1rem);
如果书写错误,浏览器会将“-”号解释为“负值”。乘法和除法不需要添加空格,但是建议都加上空格。
浏览器支持和局限性
所有的现代浏览器都支持使用calc来计算长度。理论上,可以在任何地方使用这些calc计算,这将会 得到一些非常有趣的效果:
.box { background: rgba(255, 0, 0, calc(.3 * 2)); }
.box { transform: rotate(calc(45deg - 2.31rad)); }
如果你看到上面的两个方形分别是半透明和旋转一定角度的,那么祝贺你,你的浏览器支持不同声明的CSS calc属性。大多数浏览器对这种极端情况都做了声明:
Chrome和Opera:支持所有的calc,但是Chrome 38 / Opera 25不支持角度计算。
Firefox:仅支持calc的长度和百分比计算。
Safari / Mobile Safari:calc可以计算3D CSS transforms和olor calculations。但奇怪的是,它不支持2D transforms。
Android 4.4:仅支持加法和减法运算,较早的版本完全不支持calc。
Chrome 38 on Android:和它的桌面版本支持是一样的。
Internet Explorer 9+:(desktop and mobile)支持长度计算。如果在IE9中使用calc来计算background-position,IE9将崩溃!
另外,绝大多数浏览器在使用calc时不需要添加厂商的前缀。
html中calc属性什么意思,深入理解CSS calc属性相关推荐
- css的content属性,以及如何通过css content属性实现css计数器?
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>cs ...
- html5 index属性,深入理解CSS z-index属性
当你打开一个HTML页面的时候,你会不会注意到其实页面上的元素都是处于3D空间中的?HTML页面上的每一个元素不仅有X轴和Y轴属性,它还具有Z轴属性. CSS属性margin.float和其它位置属性 ...
- 5中div标签有没有url属性_[网页编程]-03 CSS 常用属性
字体处理常用属性 <!DOCTYPE html> <html><head><meta charset="utf-8"><tit ...
- java中的scr是什么意思,javascrpt中属性描述符的理解与使用
javascrpt中属性描述符的理解与使用 属性描述符是ES5出现的概念.顾名思义:它用于描述对象里面的属性应该是什么样,例如是否只读,能否可枚举,能否可配置等.怎样?好理解吧. 既然是对象里面的属性 ...
- css规则中区块block,css常用属性总结:背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
- CSS calc() 使用指南
CSS calc 使用指南 CSS calc() 使用指南 1. 什么是 CSS calc() 函数? 2. 使用 calc() 在 CSS 中进行单位转换 3. 使用 calc() 转换字体大小 4 ...
- html div box,CSS box-sizing属性的正确用法
CSS box-sizing属性的正确用法 CSS自定义属性(变量) CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框. 没有CSS box-sizing属性 默认情况下, ...
- JavaScript文档DOM对象处理HTML→document属性方法、write、getElementBy**、getsetAttribute、节点操作方法、innerHTML、操作CSS样式属性
document文档对象 document.write getElementById()ID获取元素 getElementsByName()名字获取元素 getElementsByTagName()标 ...
- html和css的属性大全
一.HTML属性 1.字体属性(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般只要用数值就可以,单位:PX.PD 2.样式 {font-st ...
最新文章
- JAVA中文注解驱动,解决api接口返回的json里面出现中文乱码的问题
- 【c语言】判断一个数是否为素数
- 在数据中心利用AI的5个理由
- android切换字体颜色,Android开发实现按钮点击切换背景并修改文字颜色的方法
- 在Ubuntu18.04上安装ros2的环境,ros2的常用命令:播放包、录制包等
- Leetcode1688. 比赛中的配对次数[C++题解]:简单题模拟
- 【知识便利贴】ImageNet得的比Best Paper还牛的Longuet-Higgins奖是啥?
- 如何用word帮别人改文章呢?
- 有关分库分表你想知道的,都在这儿了
- Integer 数据类型
- Appium脚本(2):元素检测
- excel_applications
- grep awk sed 练习题
- 防骗指南-套路贷以及肉偿
- 网站关键词-网站关键词设置方法-网站关键词排名优化软件
- 02计算机优秀毕业论文-摘要·前言
- 电脑版微信头像无法显示并且不能显示表情
- 前端40+精选VSCode插件
- 计算机课师生互动过多,课堂师生互动存在问题及途径分析
- ICPLAZA凭BFT+POS快速“出圈” 打造更繁荣的生态系统