css calc() 函数的介绍与使用方法-kb88凯时官网登录

时间:2019-09-28
阅读:
免费资源网 - https://freexyz.cn/

在html页面的div布局中,如果我们把div的宽度当做一个计算公式,让浏览器去自动去计算它们的值是不是很有意思呢?那么今天就说一下,css中的一个关于计算的函数 calc() 

calc() 函数介绍

calc():英文单词calculate(计算)的缩写,是 css3 新增加的一个功能。它可以动态的设置元素样式中border、margin、pading以及 width 等属性的值。

calc() 函数定义

1、calc() 函数可以计算任何长度的值

2、calc() 函数支持 " ", "-", "*", "/" 运算;

3、calc() 函数使用标准的数学运算优先级规则;

4、特别要注意的是,运算符前后都需要一个空格。

5、现代浏览器都支持 calc() 函数

calc() 函数的语法

calc(expression)

expression:一个数学表达式,会返回表达式所计算出的值

示例:

width: calc(100% - 10px);

calc() 函数用法示例

示例1:

    
    博客标题
    
    
        
    

运行结果如下图:

css代码解释:

top: calc(100% - 40px) ;
left: calc(100% - 50px) ;

相当于

top: 60px; 
left: 50px;

示例2:

    
    博客标题
    
    
        
        
    

运行结果如下图:

css代码解释:

width: calc(100% - 60px);

相当于

width: 140px;
免费资源网 - https://freexyz.cn/

怎么用css实现不随滚动条效果

css中的position属性可以用来设置元素在页面中的定位方式,其中有一个值叫做fixed。fixed值指定的元素会被固定在页面的某个位置,不会随着页面的滚动而移动,这就实现了css不随滚

2023-04-21 14:34:52

如何使用css实现换行(三种方法)

换行是指在文字或者其他内容到达行末时,自动转到下一行的行为。在网页设计中,正确的换行可以使页面看起来更加舒适和自然。在css中,实现正确的换行需要了解一些原理和技巧。本

2023-04-21 14:34:32

几种常用的css居中方法

css居中的方法,是网页制作中非常基础的技术之一。无论是居中文字还是图片,都可以通过简单的css代码来实现。下面,我们将介绍几种常用的css居中方法。一、居中一个div要把一个di

2023-04-21 14:34:15

删除css,重建网页设计

css即层叠样式表,是一种用于描述html文档外观的语言。在网页设计中,css起到了至关重要的作用,可以让网页看起来更加美观、清晰,提高用户体验,使网站更加流行。然而,在实际开发中,很

2023-04-21 14:34:01

html中怎么利用css控制高度样式

html高度设置是网页设计中重要的一部分,它可以让网页以更美观的方式呈现出来。在这篇文章中我们将会讨论html高度设置的基本知识以及如何使用css控制高度。一、html高度设置

2023-04-13 20:51:42

详解css中的比较函数(示例介绍)

clamp(), max(), 和 min() 函数clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三

2022-10-31 20:26:21

【整理分享】75道前端面试css中的高频考点

理论篇1. box-sizing 属性值有什么作用?用来控制元素的盒子模型的解析模式,默认为content-box context-box:w3c 的标准盒子模型,设置元素的 height/width 属性指的是 content

2022-10-28 22:02:09

深入探究css鼠标指针交互效果

将原本的鼠标指针样式,修改成自己想要的效果,并且添加上一些特殊的交互效果。修改鼠标样式首先,第一个问题,我们可以看到,上图中,鼠标指针的样式被修改成了一个圆点:正常而言应该是

2022-06-24 23:07:32

css如何把元素固定在容器底部的四种方式

前几天被人问,「如何把元素固定在容器底部」。(本来想直接把 demo 地址给他,结果没找到,那么今天我们来补一下)demo 地址想法&思路如果是页面底部,我们可以直接 position: fixed;b

2022-06-18 22:22:38

css中有哪些方式可以隐藏页面元素及区别

前言在平常的样式排版中,我们经常遇到将某个模块隐藏的场景通过css隐藏元素的方法有很多种,它们看起来实现的效果是一致的但实际上每一种方法都有一丝轻微的不同,这些不同决定

2022-06-18 22:22:29

flex布局中使用flex-wrap实现换行的项目实践

最近做个项目,其中有个样式是换行布局,作为样式渣渣的我一开始不会,只能查资料,然后摆平了它.今天得空了,简要记录一下,方便后面小伙伴布局使用.参考资料 flex-wrap开始样式

2022-06-18 22:22:21

聊聊css粘性定位sticky案例解析

目录背景粘性定位:案例:实现的代码问题探索及项目中的坑背景最近在做项目迁移,因为技术不同,导致某些功能的问题需要手动解决;如何在居位在主体区域底部不随内容而滚动;
ok进入正

2022-06-08 21:58:06

基于css制作创意端午节专属加载特效

目录介绍演示正文挑选素材发光效果聚集动画融合效果粽子出现结语介绍本期将带给大家的是一个css创意特效——端午加载动画,想法是让粽叶,糯米,红枣绕圆旋转,然后聚集

2022-06-08 21:57:48

css控制继承中的height能变为可继承吗

目录一、前言二、控制继承1.开启继承2.重设几乎所有属性值三、拓展:常见继承属性与非继承属性1.常见可继承属性2.常见不可继承属性四、总结一、前言我们知道,css 属性有可继承

2022-06-08 21:56:50

css样式important规则的正确使用方式

目录一、理解 !important 与优先级无关二、什么时候可以使用 !important 规则1.覆盖内联样式2.覆盖优先级很高的选择器三、禁用 !important 的经验法则一、理解 !important

2022-06-08 21:56:38

分享几个实用的css代码块

目录使用css 实现三角形、多边形等不规则形状flex布局下实现文本省略号展示效果实现自定义dash虚线分割线使用重复性渐变实现分割线总结前言:css是一门神奇的语言,用的好可以

2022-06-08 21:56:28

在css3中可以实现缩放效果的属性是什么

在css3中可以实现缩放效果的属性在css3中,可以利用transform属性配合scale()函数实现元素缩放效果。transform 属性向元素应用 2d 或 3d 转换。该属性允许我们对元素进行旋转

2022-06-08 21:09:35

css3中rotate3d方法怎么用

css3中rotate3d方法怎么用rotate3d() css 函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正,运动将为顺时针,如果为负,则为逆时针。在

2022-06-08 21:09:20

css3中calc怎么设置除法

css3中calc怎么设置除法calc() 函数用于动态计算长度值。需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算;c

2022-06-07 11:41:28

使用css实现黑白格背景效果

需求介绍在页面上,有时会需要展示一些透明背景的图片,为了展示其透明的背景,通常会像ps一样,使用黑白相间的格子组成背景,从而告诉用户,这是一张透明的图片。效果预览实现原理1.利

2022-05-30 21:34:57

css文本阴影 text-shadow 悬停效果详解

目录text-shadow 没有文字阴影text-shadow 语法悬停效果#1悬停效果#2悬停效果#3悬停效果#4最后本文将专注于使用 css text-shadow 属性来实现有趣的鼠标悬停效果,但是实际上

2022-05-28 21:19:07

html中相对位置与绝对位置的具体使用

用户在浏览网站时经常会看到左侧有一种宣传栏,它不会随着鼠标滚动而不被用户看到,它会始终以页面的中心为参照物始终保持在左侧一个固定的位置,今天我们来做一下这个小例子,让我

2022-05-14 09:58:49

html页面中使两个div并排显示的实现

在html中实现两个div并排显示,方法如下:方法1:设置float浮动对需要并排显示的div设置样式:style="float:left;"

div1
方法2:设置div为行内样式对需
2022-05-14 09:58:40

左边固定宽右边自适应的6种方法

这是一道面试题,你有多少种办法呢?这里我们假设左边名为 left,宽度为 200 px,右边名为 right。即默认.left { width: 200px;}我的理解分四大类 flex 布局 需

2022-05-12 22:08:26

flex布局中子项目尺寸不受flex-shrink限制的问题解决

预期是写一个如下所示的布局内容:即有一个固定高度的外部容器,顶部的header已知高度,在header占据了固定高度后,剩下的都分给body部分。因此采用flex布局,header设置flex-shrink

2022-05-10 21:40:29

css如何设置不可点击的实现方法

可以通过设置元素的pointer-events属性设置为none,来实现元素不可点击。此方法是通过设置元素的鼠标事件失效来实现元素不可点击。pointer-events: none;css pointer-events

2022-05-10 14:31:28

css原子化项目落地可行性分析和探究

目录一、背景二、什么是css原子化,又有什么用?1.含义分析2.方案选择三、开发体验可行性优点1.开发的效率和舒适2.灵活和可维护缺点1.仍存在的上手门槛2. 小程序使用windicss受

2022-04-27 21:48:05

css实现文字断裂效果的示例代码

clip-path属性创建一个只有元素的部分区域,可以显示的剪切区域。区域内的部分显示,区域外的隐藏。

使用元素的伪
2022-04-20 22:14:39

浅谈css中浮动float带来的高度塌陷问题及4种kb88凯时官网登录的解决方案

一:高度塌陷问题在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起

2022-04-16 11:00:25

clear在css中的用法是什么

clear在css中的用法是什么css中clear的作用是清除元素的浮动效果。clear属性指定段落的左侧或右侧不允许浮动的元素。在 css1 和 css2 中,这是通过自动为清除元素(即设置了 cl

2022-04-16 10:51:59

关于css布局高度自适应解决办法

我们通常在做布局时父层是不设置高度的,我们一般情况是希望父层的高度是由子层里面的内容来决定的。但是有时候我们要给子层内容做浮动,这样的话父层高度不会被撑开,即父层的高

2019-09-18 17:07:56

在网页中字体样式可分为游览器默认样式,网页定义样式,用户自定义样式。和css一样也是优先级的,用户自定义样式高于网页定义样式,而游览器默认样式优先级是最低的。当然最高的字

2019-09-18 17:07:21

在学html中,有次在做布局时,使用行高时,自己不明白line-height到底是哪段距离,在没查资料时,我还以为是word里的行距呢?因为我经常使用word里的行距做排版。当我上网查资料时,才明

2019-09-18 17:06:35

css3中text-shadow属性使用方法及各参数所代表的含义

在css3中我们可以使用text-shadow属性给页面上的文字添加阴影效果,text-shadow在css2.1的时候曾被删除过的一个属性,但是又在css3.0中恢复了使用。①text-shadow的使用方法:tex

2019-09-18 17:05:54

css3 box-sizing属性使用方法及好处

在盒模型中,如果我们给盒子内部的元素加入了内边距padding和边框 border后,它的总长度或者高度会增加。那么如果元素用于非常精确的布局时,我们就需要重新进行计算增减。这是比

2019-09-18 17:04:59

css3 box-shadow属性使用方法总结

在css3中,我们可以使用box-shadow属性让盒子产生阴影效果。下面介绍几点box-shadow属性的使用:⑴使用方法:box-shadow:length length length color,前三个length分别表示文字阴影

2019-09-18 17:04:14

一个项目的css最基本结构通常是由:base.css,common.css,page.css文件组成的。base.css的作用主要是重设浏览器默认样式和提供通用原子类。base.css文件一般不需维护,但要保证其

2019-09-18 17:02:16

wordpress主题中css样式及js引用方法

在制作wordpress模板时,如何正确引用css样式及js效果是至关重要的。一旦我们在引用css或者是js的时候,路径没有写对,那么页面上就不能够加css载样式或者说就没有js动态效果。博

2019-09-18 15:28:18

firefox 70 将引入“非活跃 css”,快速排查 css 属性

在最新的 firefox 70 beta 版本中,引入了一项名为“inactive css”(非活跃 css)的功能,devtool 新工具将为开发者展示哪些 css 属性不会影响所选元素以及原因,这将大大

2019-09-13 15:09:47

如何用css3给文字添加渐变

大家都知道给一个box添加渐变背景很简单,但是如何用css3给文字添加渐变呢,可能有些童鞋就蒙了,用图?当然不是,如果是,那就没分享的必要了,一起来学习下。我们从零开始学习,一共分三

2019-08-30 14:40:00
返回顶部
顶部
网站地图