cacl的使用[通俗易懂]

cacl的使用[通俗易懂]1、居中元素使用calc()给我们提供另一个垂直元素的解决方案。如果我们知道元素的尺寸,一个典型的解决方案使用负外边距移动自身距离高于宽的一般,如下:/*对于300px*300px*/position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-150px;如果使用calc()函数,那么我...

1、居中元素

使用calc()给我们提供另一个垂直元素的解决方案。如果我们知道元素的尺寸,一个典型的解决方案使用负外边距移动自身距离高于宽的一般,如下:

/*对于300px*300px*/ position:absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px;

如果使用calc()函数,那么我们可以只通过top和left值便能实现相同的效果。

/*对于300px*300px*/ position:absolute; top: calc(50% - 150px); left: calc(50% - 150px);

Flexbox的介入,已经很少需要这种方法了。不过,一些情况下Flexbox不能被使用。比如,元素需要绝对定位或者固定定位,这种方法是有用的。

2、创建根栅格尺寸

使用rem、calc()函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小为视口宽度的一部分。

html{ font-size: calc(100vw / 30); }

现在1rem为视口宽度的1/30。在页面上的任何文本,将会根据你的视口自动播放。更进一步,相同比例的视口总会显示相同的文本数量,不管视口的真实尺寸是多少。

如果我们对非文本使用rem设置大小,他们同样遵守这个行为。一个rem宽度的元素总是视口元素宽度的1/30.

3、清晰

calc()使计算更加清晰。如果你使用一组项目为他们父元素容器的1/6,你可以这么写:

width:16.666666%;

然而,它能够更加清晰并具有可读性:

width:calc(100% / 6);


只听到从架构师办公室传来架构君的声音:
唱彻《阳关》泪未干,功名馀事且加餐。有谁来对上联或下联?

 

转载于:https://www.cnblogs.com/zhx119/p/11242503.html

架构君码字不易,如需转载,请注明出处:https://javajgs.com/archives/209344
0

发表评论