calc() ---一个会计算的css属性

  最近这个月一直在赶项目开发,遇到的问题和学到的前端知识没有更新到博客园,现在闲了下来,就整理一下前端知识。
  在项目开发中,在样式这方面花费的时间较多,因为针对于数字的变化特别多,本人不爱记数字,在看设计图时总是反复计算之间的数值,觉得很麻烦,偶然谷歌一下,发现了css3的一个属性--calc()
  calc() 很显然,是calculate的缩写--计算。是css3的一个属性。可以用来给width,height,border,margin以及padding等属性值设置动态值,拿个例子说:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{width:200px;    //内容的宽度是200pxheight:200px;background: red;border: 1px solid;}.two {height:100%;padding-left: 10px;padding-right: 20px;background: pink;width:calc(100% - 10px - 20px);  //内容的宽度是170px}.three {height:100%;padding-left: 20px;background: aqua;width: calc(100% - 20px);    //内容的宽度是150px}</style>
</head>
<body><div class="one"><div class="two"><div class="three">abc</div></div></div>
</body>
</html>

里面的子元素不管怎么撑开,都不会超过父元素的边框。这样就不会考虑父元素的宽度是多少,直接写出calc(),浏览器自动计算width的属性值。大大的提高了效率。

使用方法:
  1. 可以嵌套使用    例如:calc( calc() );
  2. 可以使用四则运算 - * /;
  3. 可以% ,px,em,rem 混合使用。

注意事项:
  1. 和-在计算时前后要有空格,否则不识别。* 和 /没要求,为了规范都加空格吧。 例如: calc(100%-10px) 这样不会识别。
  2. 0 不能作为除数,否则会报错。很显然。

兼容性:
  既然是css3的新属性,避免不了兼容性问题。

  ie9以下不支持,火狐4以下不支持,4.0-15.0需要加前缀,谷歌19.0以下不支持,19.0-25.0需要加前缀,苹果5.1以下(包括5.1)不支持,6.0需要加前缀,欧朋15.0以下不支持。

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369364.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HashMap实现原理及源码分析

HashMap实现原理及源码分析 哈希表&#xff08;hash table&#xff09;也叫散列表&#xff0c;是一种非常重要的数据结构&#xff0c;应用场景及其丰富&#xff0c;许多缓存技术&#xff08;比如memcached&#xff09;的核心其实就是在内存中维护一张大的哈希表&#xff0c;而H…

使用NetBeans Lambda支持在Java 8中使用Lambda表达式对列表进行排序

作为JSR 335的一部分&#xff0c; Lambda表达式已从Java 8开始引入Java语言&#xff0c;这是Java语言的一个重大变化。 如果您想了解更多关于Lambda表达式以及JSR 335的信息&#xff0c;可以访问以下资源&#xff1a; 在OpenJDK上的Lambda项目 。 Lambda常见问题解答 。 另一…

qq物联网 android sdk,物联网在腾讯:QQ物联

原标题&#xff1a;物联网在腾讯&#xff1a;QQ物联在物联网方面的一些产品&#xff0c;作为BAT三巨头之一&#xff0c;腾讯自然不能落后。本文就介绍一下腾讯的物联网平台&#xff0c;QQ物联。QQ物联&#xff1a;让每个设备成为一个QQ好友QQ物联的最大特点&#xff0c;就是让每…

Vue-cli 搭建项目

Vue框架学习--使用 vue-cli 搭建项目vue-cli 是一个官方发布 vue.js 项目脚手架&#xff0c;使用 vue-cli 可以快速创建 vue 项目&#xff0c;GitHub地址是&#xff1a;https://github.com/vuejs/vue-cli一、安装node.js 首先需要安装node环境(必须)&#xff0c;可以直接到中文…

HTML音乐标签和滚动

<!-- 音乐标签 --><embed src"1.mp3" type""><embed src"1.mp3" type"" hidden"true"> <!-- 滚动 --><marquee behavior"alternate" >gun</marquee><marquee behavior&qu…

响应式框架Bootstrap栅格系统

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 提供了一些辅助类&#xff0c;以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备&#xff0c;实现内容对设备的显示和隐…

int定义源码 python_python学习(第一章)

1.print输出语句# 输出字符串 print(hello) # 输出数字 print(234) print("I come from China") print("I come from China") # 输出表达式 print(71) # 将数据输出到文件中 file fp open(D:/pythoncode.txt, a) print("I come from China",…

使用Specs2和客户端API 2.0进行富有表现力的JAX-RS集成测试

毫无疑问&#xff0c; JAX-RS是一项杰出的技术。 即将发布的规范JAX-RS 2.0带来了更多的强大功能&#xff0c;尤其是在客户端API方面。 今天的帖子的主题是JAX-RS服务的集成测试。 有很多出色的测试框架&#xff0c;例如REST可以确保提供帮助&#xff0c;但是我要展示的方式是使…

python web开发-flask访问请求数据request

Request对象在web应用的开发中是一个非常重要的对象&#xff0c;主要用来获取用户发来的请求数据。 常用属性参考&#xff1a;http://docs.jinkan.org/docs/flask/api.html#flask.request 下面我们以一个表单提交的例子来说明一些常用request属性的使用。 创建一个表单的templa…

Showplan 逻辑运算符和物理运算符参考

本文档已存档&#xff0c;并且将不进行维护。运算符说明了 SQL Server 如何执行查询或数据操作语言 (DML) 语句。 查询优化器使用运算符生成查询计划&#xff0c;以创建在查询中指定的结果或执行在 DML 语句中指定的操作。 查询计划是由物理运算符组成的一个树。 您可以使用 SE…

在win10中通过Anaconda3安装tensorflow

安装Anaconda3&#xff0c;然后在所有程序中启动“Anaconda Navigator”&#xff0c;如图&#xff1a; 切换到“Enviroments"(环境)中&#xff0c;在右边有个显示环境的列表&#xff0c;默认有"base(root)"&#xff0c;然后单击底部的”Create"按钮创建一个…

功能接口简介–在Java 8中重新创建的概念

世界各地的所有Java开发人员都将至少使用以下接口之一&#xff1a;java.lang.Runnable&#xff0c;java.awt.event.ActionListener&#xff0c;java.util.Comparator&#xff0c;java.util.concurrent.Callable。 声明的接口之间有一些共同的特征&#xff0c;该特征是它们在接口…

计算机专业学生求职信500字,计算机专业求职信500字范文

计算机专业求职信500字范文尊敬的领导&#xff1a;您好&#xff01;请恕打扰&#xff0c;我是荆楚理工学院计算机工程学院的一个大学生&#xff0c;即将面临毕业.我很荣幸有机回向您呈上我的个人资料.在投身社会之际,为了找到符合自己专业和兴趣的工作,更好地发挥自己的才能,实…

使用Spring数据和Thymeleaf实现Bootstrap分页

Twitter Bootstrap具有非常好的分页UI &#xff0c;在这里我将向您展示如何使用Spring Data Web分页功能和Thymeleaf条件评估功能来实现它。 引导程序中的标准分页 受Rdio启发的简单分页&#xff0c;非常适合应用程序和搜索结果。 大块很难错过&#xff0c;易于扩展&#xff0…

一道前端学习题

对于没参加过互联网企业招聘&#xff0c;或是没有参加过大型互联网企业招聘的人来说&#xff0c;能以这些公司的面试题做为锻炼&#xff0c;无疑是一种非常好的学习和进步的途径。下面是一道腾讯的前端面试题(JS解答)&#xff0c;题目本身在现实中意义不大&#xff0c;主要是考…

codefroces 297E Mystic Carvings

problem&#xff1a;一个圆上依次有1~2*n的数字。每个数字都有且只有另一个数字与他相连。选出三条线&#xff0c;使得每条线的两端之间隔的最少点(只包括被选择的6个点)的个数相等。输入输出格式输入格式&#xff1a;The first line contains integer n(3<n<10^5) — th…

监听网页微信扫码支付成功_网付扫码点餐新福利,消费者点餐可获微信支付金币奖励...

扫码点餐相信大家都不陌生&#xff0c;即能餐饮解决商家人力物力投入成本痛点&#xff0c;又能方便消费者点餐。现今已成为了餐饮商户的标配系统。近两年&#xff0c;很多系统厂商都在试水扫码点餐领域。尤其是聚合支付服务商&#xff0c;拥有得天独厚的优势。市面上各家扫码点…

在Play上使用twitter4j! 框架和安全社交很容易

在昨天的个人黑客马拉松期间&#xff0c;我启动了一个项目&#xff0c;我可能会在这里介绍。 但是&#xff0c;最酷的启示是&#xff08;再次&#xff09;启动和运行起来有多么容易。 创建一个新的Play项目 添加Secure Social并为Twitter配置它&#xff0c;并使用示例中的InM…

Python 冒泡排序三种写法

需求&#xff1a;输入 n 个整数并将这些数字以从大到小和从小到大的顺序输出代码如下&#xff1a;bubble_sort_v1 1 #coding:utf-82 #__author__ Diva3 4 # 升序&#xff08;从小到大&#xff09;5 SORT_TYPE_ASC 16 # 降序&#xff08;从大到小&#xff09;7 SORT_TYPE_DE…

ptmalloc内存分配和回收详解(文字版)

ptmalloc内存分配和回收详解&#xff08;文字版&#xff09; 进程默认内存布局&#xff08;x86&#xff09; 从进程的内存布局可知&#xff0c;.bss段之上的这块分配给用户程序的空间被称之为heap&#xff0c;start_brk指向heap的开始&#xff0c;而brk指向heap的顶部。可以使用…