• css实现高度是宽度一半的效果

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

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

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    2、方法二：使用padding来实现（padding会相对于宽度进行计算）：

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

      

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    <body>
	<div class="outer-box">
	  <div class="inner-box">div>
	div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
  • 相关阅读:
    接口测试 —— Requests库GET请求
    使用pymodbus进行modbus-TCP通信
    java代理
    为什么基础架构即代码对您的业务很重要
    [Python] Django ORM与执行原生SQL实现操作数据库
    JDBC详解
    Express 中间件的分类
    呼声与现实：WPS Office 64位版何时到来？
    flink 端到端一致性
    Springboot+Redis执行lua脚本
  • 原文地址：https://blog.csdn.net/qq_42832446/article/details/136685155