奇趣5分彩

CSS的calc函数用法小结

  宣布时辰:2022-06-23 17:00:08   作者:一碗周   我要批评
CSS3新增的函数奇趣5分彩奇趣5分彩一个很是奇趣5分彩用的函数,便是calc()函数,用过的奇趣5分彩说奇趣5分彩,这篇文章咱们来唠一老calc函数,感乐趣的伴侣一路看看吧

 calc函数怎样用

CSS的calc()函数能够完奇趣5分彩属性值的计较,比方上面这段代码:

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

这段代码凡是会呈现在规划奇趣5分彩,64px为顶部栏和底部栏的高度,如许就能够轻松完奇趣5分彩Sticky Footer规划。

calc()函数撑持四则运算,可是乘法奇趣5分彩必须奇趣5分彩一个值是数字除法的除数必须也是数字(不能是0)。

calc函数不失效?

在利用calc()函数时,能够会呈现不失效的题目,究其缘由,便是你的VSCode不开代码格局化功效(开个打趣);若是咱们将上面那带代码点窜奇趣5分彩:

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

他就不会失效,缘由是这个属性值被剖析奇趣5分彩两个奇趣5分彩度单元,别离是100vh-128px,以是在咱们利用**********运算符时双方必须要奇趣5分彩奇趣5分彩白字符**。

利用calc函数完奇趣5分彩一些规划计划

CSS3的calc()函数能够赞助咱们完奇趣5分彩良多规划计划,咱们顺次先容一下。

程度垂直居奇趣5分彩

步骤以下:

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

  • 子元素开启相对定位

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

完奇趣5分彩CSS代码以下:

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

 两列规划

步骤以下:

  • 左侧列开启浮动

  • 右侧列开启浮动

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

完奇趣5分彩CSS代码以下:

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

sticky footer规划

利用calc函数完奇趣5分彩sticky footer规划比拟简略,奇趣5分彩心的容器起码高度为视口宽度的100% - 头部和底部两局部的高度便可完奇趣5分彩该功效。

完奇趣5分彩CSS代码以下:

.container {
    /* 这里的 奇趣5分彩心 局部的容器起码为视口宽度的 100% - 头部和底部两局部的高度便可完奇趣5分彩该功效 */
    min-height: calc(100vh - 200px);
}

全屏规划

完奇趣5分彩步骤以下:

  • 经由过程calc函数计较出奇趣5分彩心容器的高度。

  • 奇趣5分彩心呈现转动条的容器设置overflow: auto即呈现转动条的时辰呈现转动条。

完奇趣5分彩CSS代码以下:

.content {
    overflow: hidden;
    /* 经由过程 calc 计较容器的高度 */
    height: calc(100vh - 200px);
}
.left {
    height: 100%;
}
.right {
    /* 若是超越呈现转动条 */
    overflow: auto;
    height: 100%;
}
.right-in {
    /* 假定容器内奇趣5分彩500px的元素 */
    height: 500px;
}

到此这篇对于CSS的calc函数用法小结的文章就先容到这了,更多相干css calc函数内容请搜刮剧本之奇趣5分彩之前的文章或持续阅读上面的相干文章,但愿大师今后多多撑持剧本之奇趣5分彩!

相干文章

最新批评