CSS的calc函数用法小结


Posted in HTML / CSS onJune 25, 2022

 calc函数怎么用

CSS的calc()函数可以实现属性值的计算,例如下面这段代码:

min-height: calc(100vh - 128px);

这段代码通常会出现在布局中,64px为顶部栏和底部栏的高度,这样就可以轻松实现Sticky Footer布局。

calc()函数支持四则运算,但是乘法中必须有一个值是数字除法的除数必须也是数字(不能是0)。

calc函数不生效?

在使用calc()函数时,可能会出现不生效的问题,究其原因,就是你的VSCode没有开代码格式化功能(开个玩笑);如果我们将上面那带代码修改成:

min-height: calc(100vh-128px);

他就不会生效,原因是这个属性值被解析成两个长度单位,分别是100vh-128px,所以在我们使用**********运算符时两边必须要有空白字符**。

使用calc函数完成一些布局方案

CSS3的calc()函数可以帮助我们实现很多布局方案,我们依次介绍一下。

水平垂直居中

步骤如下:

  • 使子元素相对于容器元素定位

  • 子元素开启绝对定位

  • 设置该元素的偏移量,值为50% 减去宽度/高度的一半

实现CSS代码如下:

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量,值为 50%减去宽度/高度的一半 */
  left: calc(50% - 150px);
  top: calc(50% - 150px);
}

 两列布局

步骤如下:

  • 左边列开启浮动

  • 右边列开启浮动

  • 右边列宽度为父级 100%减去左列的宽度

实现CSS代码如下:

.left {
  /* 左边列开启浮动 */
  float: left;
}
.right {
  /* 右边列开启浮动 */
  float: left;
  /* 宽度减去左列的宽度 */
  width: calc(100% - 200px);
}

sticky footer布局

使用calc函数实现sticky footer布局比较简单,中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度即可完成该功能。

实现CSS代码如下:

.container {
    /* 这里的 中间 部分的容器最少为视口宽度的 100% - 头部和底部两部分的高度即可完成该功能 */
    min-height: calc(100vh - 200px);
}

全屏布局

实现步骤如下:

  • 通过calc函数计算出中间容器的高度。

  • 中间出现滚动条的容器设置overflow: auto即出现滚动条的时候出现滚动条。

实现CSS代码如下:

.content {
    overflow: hidden;
    /* 通过 calc 计算容器的高度 */
    height: calc(100vh - 200px);
}
.left {
    height: 100%;
}
.right {
    /* 如果超出出现滚动条 */
    overflow: auto;
    height: 100%;
}
.right-in {
    /* 假设容器内有500px的元素 */
    height: 500px;
}

到此这篇关于CSS的calc函数用法小结的文章就介绍到这了,更多相关css calc函数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 

Tags in this post...

HTML / CSS 相关文章推荐
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 #HTML / CSS
css3手动实现pc端横向滚动
Jun 21 #HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 #HTML / CSS
css如何把元素固定在容器底部的四种方式
css中有哪些方式可以隐藏页面元素及区别
Jun 16 #HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 #HTML / CSS
css样式important规则的正确使用方式
Jun 10 #HTML / CSS
You might like
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
JS重要知识点小结
2011/11/06 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
个人求职简历中英文自我评价
2013/12/16 职场文书
如何写好建议书
2014/03/13 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
先进教师事迹材料
2014/12/16 职场文书
企业催款函范本
2015/06/24 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python
python 闭包函数详细介绍
2022/04/19 Python