10.CSS3的calc函数

CSS3calc 函数

经典真题

  • CSS 的计算属性知道吗?

CSS3 中的 calc 函数

calc 是英文单词 calculate(计算)的缩写,是 CSS3 的一个新增的功能。

MDN 的解释为可以用在任何长度、数值、时间、角度、频率等处,语法如下:

/* property: calc(expression) */
width: calc(100% - 80px);

可以用常见的 + - * / 符号来进行运算,但需要注意的是 + 和 - 必须用空格隔开,原因很简单,如果 - 号和计算的数字挨在一起,则浏览器在解析时会认为这可能是一个负值。

例如:

width: calc(100% -8px); /* 这样会出错,结果为0 */
width: calc(100% - 8px); /* 当 + -  符号用空格隔开时,运算成功 */

接下来我们来看一下 calc 函数的具体使用示例,如下:

<div class="container"><div class="item"></div>
</div>
* {margin: 0;padding: 0;
}.container{width: 500px;height: 250px;background-color: skyblue;margin: 10px;position: relative;
}
.item{width: 100px;height: 100px;background-color: pink;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);
}

效果:

image-20240222090937506

更多关于 calc 函数信息可以参阅:https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc()

真题解答

  • CSS 的计算属性知道吗?

参考答案:

calc( ) 函数,主要用于指定元素的长度,支持所有 CSS 长度单位,运算符前后都需要保留一个空格。

比如: width: calc(100% - 50px);

-EOF-

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

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

相关文章

【高频SQL题目】再做一遍 1164.指定日期的产品价格

题目要求&#xff1a; 产品数据表: Products ------------------------ | Column Name | Type | ------------------------ | product_id | int | | new_price | int | | change_date | date | ------------------------ (product_id, change_date)…

Spring6学习技术|Junit

学习材料 尚硅谷Spring零基础入门到进阶&#xff0c;一套搞定spring6全套视频教程&#xff08;源码级讲解&#xff09; Junit 背景 背景就是每次Test都要重复创建容器&#xff0c;获取对象。就是ApplicationContext和getBean两个语句。通过Spring整合Junit&#xff0c;可以…

二进制部署k8s集群部署的步骤总结

二进制部署k8s集群部署的步骤总结 &#xff08;1&#xff09;k8s的数据存储中中心的搭建 etcd 准备证书启动etcd服务&#xff0c;加入集群 &#xff08;2&#xff09;单机master节点的部署 准备证书和tokern文件安装 apiserver&#xff0c; controller mangerscheduler &am…

sentinel的资源数据指标是如何采集

资源数据采集 之前的NodeSelectorSlot和ClusterBuilderSlot已经完成了对资源调用树的构建, 现在则是要对资源进行收集, 核心点就是这些资源数据是如何统计 LogSlot 作用: 记录异常请求日志, 用于故障排查 public class LogSlot extends AbstractLinkedProcessorSlot<Def…

统计图雷达图绘制方法

统计图雷达图绘制方法 常用的统计图有条形图、柱形图、折线图、曲线图、饼图、环形图、扇形图。 前几类图比较容易绘制&#xff0c;饼图环形图绘制较难。 还有一种雷达图的绘制也较难&#xff0c;今提供雷达图的绘制方法供参考。 本方法采用C语言的最基本功能&#xff1a; &am…

外资并购支付牌照如何进行变更审批

孟凡富 本文首发移动支付网公众号&#xff0c;标题为外资并购支付牌照难点解析 2023年12月17日&#xff0c;《非银行支付机构监督管理条例》正式公布&#xff0c;自2024年5月1日起开始施行。根据《条例》规定&#xff0c;中华人民共和国境外的非银行机构&#xff0c;若拟为境…

【Hudi】索引

Hudi默认采用的HoodieBloomIndex索引&#xff0c;其依赖布隆过滤器来判断记录存在与否&#xff0c;当记录存在时&#xff0c;会读取实际文件进行二次判断&#xff0c;以便修正布隆过滤器带来的误差。 Hudi Bucket Index 在字节跳动的设计与实践] 1.1 索引的作用 在传统 Hive …

跟着野火学FreeRTOS:第二段(事件组)

在小节里面介绍了二进制信号量&#xff0c;计数信号量&#xff0c;互斥量和递归互斥量等功能&#xff0c;其中二进制信号量和计数信号量&#xff08;也包括队列&#xff09;常用于任务和任务之间以及任务和中断之间的同步&#xff0c;她们具有以下属性&#xff1a; 当等待的事…

Day15-Linux系统特殊权限知识精讲

Day15-Linux系统特殊权限知识精讲 为什么创建文件默认权限为644&#xff0c;目录为755&#xff1f;&#xff1f;&#xff1f; umask 权限掩码。控制系统的文件和目录的默认权限。 [rootoldboy oldboy]# umask 0022针对文件来说&#xff1a;默认权限计算方法 6 6 6 0 2 2 - …

为什么0.1+0.2不等于0.3

一、JS内部的计算是以二进制形式进行的 js里整数和小数转为二进制形式的方法是不一样的&#xff1a; 二、Number类型使用IEEE754标准64位存储 双精度浮点数&#xff08;double类型&#xff09;为每个数分配64位空间&#xff0c;并以科学计数法的方式存储&#xff1a; 那么对于…

C++入门学习(三十三)函数的定义,两数之和函数作为例子

为什么使用函数&#xff1a;将一些重复的代码封装&#xff0c;方便以后的使用&#xff0c;直接调用即可。 先给一个例子&#xff1a; // 函数返回整数类型 int addNumbers(int a, int b) { // 函数体 int sum a b; return sum; // 返回计算得到的和 } 返回值类型&…

基于卷积神经网络的图像去噪

目录 背影 卷积神经网络CNN的原理 卷积神经网络CNN的定义 卷积神经网络CNN的神经元 卷积神经网络CNN的激活函数 卷积神经网络CNN的传递函数 基于卷积神经网络的图像去噪 完整代码:基于卷积神经网络的图像去噪.rar资源-CSDN文库 https://download.csdn.net/download/abc9918351…

xrpc: 一个基于消息队列的的Go语言RPC框架

文章目录 前言XRPC的特性XRPC的实现通信编码/解码服务调用 总结 项目地址: GitHub Gitee 前言 RPC作为分布式系统中的基础组件, 使用非常广泛。大多数的RPC框架都是基于点对点的网络连接, 比如golang原生的rpc框架、grpc等. 点对点连接的通讯方式, 随着集群节点的增加, 会导致…

(全注解开发)学习Spring-MVC的第三天

全注解开发 第一部分 : 1.1 消除spring-mvc.xml 这些是原来spring-mvc.xml配置文件的内容 <!--1、组件扫描, 使Controller可以被扫描到--><context:component-scan base-package"com.itheima.controller"/><!--2、非自定义的Bean, 文件上传解析器--&…

mysql-多表查询-外连接

一、外连接查询语法 &#xff08;1&#xff09;左外连接 select 所要查询的内容 from 左表 left outer join 右表 on 条件; &#xff08;2&#xff09;右外连接 select 所要查询的内容 from 左表 right outer join 右表 on 条件; 二、示例 用以下两张表示例 左外连接 右外…

Pyglet综合应用|推箱子游戏之关卡图片载入内存

目录 读取图片 分割图片 综合应用 本篇为之前写的博客《怎样使用Pyglet库给推箱子游戏画关卡地图》的续篇&#xff0c;内容上有相关性&#xff0c;需要阅读的请见链接&#xff1a; https://hannyang.blog.csdn.net/article/details/136209138 「推箱子」是一款风靡全球的益…

c++内存的四大分区详解

目录 前言&#xff1a; 1、程序的基本运行流程 2&#xff0c;为啥要分为四个区域&#xff1f; 3&#xff0c;分为哪四个区域&#xff1f; 4&#xff0c;4个区域详解 代码区&#xff1a; 为什么会设置这两个功能呢&#xff1f; 全局区&#xff1a; 栈区&#xff1a; 堆…

system V 共享内存

1.共享内存的原理 要理解共享内存的原理&#xff0c;首先我们得记起进程间通信的前提&#xff1a;必须让不同的进程看到同一份资源&#xff08;必须由OS提供&#xff09; 我们都知道进程都会有自己的进程地址空间&#xff0c;然后都会通过页表与物理内存进行映射&#xff0c;…

图纸透明加密:保护机械图纸安全的新方法

随着信息技术的不断发展&#xff0c;机械制造行业对于图纸安全的需求越来越高。机械图纸是企业的核心竞争力之一&#xff0c;泄露可能导致严重的商业损失和技术风险。为了解决这一问题&#xff0c;图纸透明加密成为了一种新的保护机械图纸安全的方法。本文将介绍图纸透明加密的…

面试字节跳动,我被怼的好狠,怎一个惨字了得

人们都说&#xff0c;这个世界上有两种人注定单身&#xff0c;一种是太优秀的&#xff0c;另一种是太平凡的。 我一听呀&#xff1f;那我这岂不是就不优秀了吗&#xff0c;于是毅然决然和女朋友分了手。 人们都说&#xff0c;互联网寒冬来了&#xff0c;这个时候还在大面积招人…