0
点赞
收藏
分享

微信扫一扫

类和对象(上)--关于面向对象,类的定义,访问限定符,this指针

一世独秀 2天前 阅读 2
css前端

1、方法一:使用变量:root、var()、clac()实现:

1.1 效果如下:
在这里插入图片描述
2.2 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    :root {
      --width: 200px;
      --height: calc(var(--width) / 2)
    }
    .box {
      width: var(--width);
      height: var(--height);
      background-color: #ccc;
    }
  </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

2、方法二:使用padding来实现(padding会相对于宽度进行计算):

2.1效果如下:
在这里插入图片描述
2.2代码如下:

  <style>
    .outer-box {
      width: 200px;
    }
    .inner-box {
      width: 100%;
      padding-bottom: 50%;
      background-color: #ccc;
    }
  </style>
<body>
	<div class="outer-box">
	  <div class="inner-box"></div>
	</div>
</body>
举报

相关推荐

0 条评论