我是靠谱客的博主 幸福洋葱,这篇文章主要介绍你真的会用calc()属性吗?,现在分享给大家,希望可以做个参考。

可能很多人还不清楚这个属性???

what???

那你可就吃亏了......

CSS3中的**calc( )**属性,也叫可以计算的属性

说到计算,自然而然就想到了 + - * /,没错,calc()就具备这个功能

相信很多人都遇到过这个问题:

在写一个这样布局的页面时,知道头部的高度,假设为100px,但是侧边栏的高度我不知道该如何设置才能让他刚好为浏览器高度-头部的高度,这个时候我们用calc()就很方便啦。(欢迎大家各抒己见)

复制代码
1
2
height:calc(100vh - 100px); 复制代码
复制代码
1
2
注意:-的左右侧都有一个空格,若没有,则没有办法实现,+ * /亦是这样 复制代码

不仅如此,相信大家写过很多遍让一个盒子垂直居中的方法,但是用到cala()的我觉得还是少数(我觉得,勿喷)

那下面我就列出来我所知道的让盒子垂直居中的方法:

盒子没有固定的宽和高

  • 用translate
复制代码
1
2
3
4
5
6
7
8
9
10
.box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #aaa; padding: 60px; } <div class="box"></div> 复制代码
  • 用flex布局(知道父亲的宽高,不知子元素的宽高,让子元素实现垂直居中)
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box{ width: 300px; height: 200px; background: pink; color: #fff; /*以下三句话特别重要*/ justify-content: center; /*子元素水平居中*/ align-items: center; /*子元素垂直居中*/ display: flex; } <div class="box"> <div>haha</div> </div> 复制代码

盒子有固定的宽和高

对于这种情况我们应该是最熟悉的,负margin的方法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
.box{ width: 100px; height: 100px; background: #aaa; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } <div class="box"></div> 复制代码

margin:auto的方法:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box{ width: 200px; height: 100px; background: pink; color: #fff; position: absolute; left:0; right:0; top: 0; bottom: 0; margin: auto; } <div class="box"></div> 复制代码

calc()计算的方法:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
.box{ width: 100px; height: 100px; background: #aaa; position: absolute; left: 50%; top: 50%; left: calc( 50% - 50px ); top: calc( 50% - 50px ); } <div class="box"></div> 复制代码

水平有限,望补充!!!

一起进步吧!哈哈哈哈~

转载于:https://juejin.im/post/5cda86cd518825686401fb46

最后

以上就是幸福洋葱最近收集整理的关于你真的会用calc()属性吗?的全部内容,更多相关你真内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(95)

评论列表共有 0 条评论

立即
投稿
返回
顶部