css clac计算属性

最新推荐文章于 2024-05-25 16:08:20 发布

林夕_______

最新推荐文章于 2024-05-25 16:08:20 发布

阅读量1k

点赞数

分类专栏： Css 文章标签： calc 计算属性

本文链接：https://blog.csdn.net/jinyt_/article/details/77265933

版权

Css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，

而且还可以根据单位如px,em,rem和百分比来转化计算。

一个简单例子：

child的高度就是计算属性算出来的。

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>calc计算属性</title>
</head>
<style>
   .box{
      height:500px;
      width:500px;
      border:1px solid #e1b700;
   }
   .content{
      height:100px;
      width:500px;
      background: #f56868;
   }
   .child{
      height:calc(500px - 100px);
      background: #1d7db1;
   }
</style>
<body>
   <div class="box">
      <div class="content"></div>
      <div class="child"></div>
   </div>
</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

林夕_______

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css clac计算属性

calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。一个简单例子：child的高度就是计算属性算出来的。html>lang="zh"> charset="UTF-8"> http-equiv="X-UA-Compatible" content="IE=edge,chr
复制链接

扫一扫