基于HTML、CSS和PHP实现动态尺寸与位置的Hilbert矩阵

方案1：自定义矩阵括号样式（推荐） #

这个方案放弃了原电视屏幕样式的圆角，改用更贴合数学矩阵的方括号设计，同时通过PHP动态计算容器尺寸，确保括号完美包裹任意阶数的矩阵：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  z-index: 1;
}

td {
  padding: 10px; 
  color: black;
  width: 40px; /* 固定单元格宽度，保证对齐 */
  text-align: center; /* 内容居中显示 */
}

.matrix-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

/* 生成左括号 */
.matrix-container::before {
  content: '';
  position: absolute;
  height: 85%;
  width: 22px;
  border-left: 4px solid black;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  border-radius: 8px 0 0 8px;
  left: -25px;
}

/* 生成右括号 */
.matrix-container::after {
  content: '';
  position: absolute;
  height: 85%;
  width: 22px;
  border-right: 4px solid black;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  border-radius: 0 8px 8px 0;
  right: -25px;
}

.matrix-entry {
  color: black;
}
</style>
</head>
<body>
<?php
$n = 8; // 修改此处可生成任意n≥1阶矩阵

// 计算容器尺寸：每个单元格总宽度（内容+内边距）60px，总高度同理
$cell_total_size = 60;
$container_width = $n * $cell_total_size + 50; // 预留括号间距
$container_height = $n * $cell_total_size + 20; // 预留上下边距

echo "<div class='matrix-container' style='width: {$container_width}px; height: {$container_height}px;'>";
echo "<table>";
for ($i = 1; $i <= $n; $i++) {
  echo "<tr>";
  for ($j = 1; $j <= $n; $j++) {
    $value = number_format(1 / ($i + $j - 1), 3); // 统一保留三位小数
    echo "<td class='matrix-entry'>" . $value . "</td>";
  }
  echo "</tr>";
}
echo "</table>";
echo "</div>";
?>
</body>
</html>

方案2：基于原TV-Screen模板修改 #

如果你希望保留原电视屏幕的圆角样式，只需通过PHP动态设置容器的宽高即可，原伪元素的百分比定位会自动适配尺寸：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  z-index: 1;
  position: absolute;
}

td {
  padding: 10px; 
  color: black;
  width: 40px;
  text-align: center;
}

.tv-screen {
  position: relative;
  margin: 20px;
  background: white;
  border-radius: 60% / 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tv-screen::before {
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: -1%;
  left: -1%;
  background: black;
  border-radius: 15% / 20%;
  z-index: -1; 
}

.matrix-entry {
  color: black;
  position: relative; 
  z-index: 1; 
}
</style>
</head>
<body>
<?php
$n = 4; 

// 映射你测试过的尺寸，未知n使用拟合公式
$dimensions = [
    4 => ['w' => 230, 'h' => 200],
    8 => ['w' => 480, 'h' => 420],
    10 => ['w' => 600, 'h' => 520],
    16 => ['w' => 970, 'h' => 870]
];

if (isset($dimensions[$n])) {
    $width = $dimensions[$n]['w'];
    $height = $dimensions[$n]['h'];
} else {
    // 基于已知数据拟合的通用公式
    $width = 62 * $n - 18;
    $height = 55 * $n - 20;
}

echo "<div class='tv-screen' style='width: {$width}px; height: {$height}px;'>";
echo "<table>";
for ($i = 1; $i <= $n; $i++) {
  echo "<tr>";
  for ($j = 1; $j <= $n; $j++) {
    $value = number_format(1 / ($i + $j - 1), 3);
    echo "<td class='matrix-entry'>" . $value . "</td>";
  }
  echo "</tr>";
}
echo "</table>";
echo "</div>";
?>
</body>
</html>

核心改进点 #

1. 动态尺寸计算：通过PHP根据阶数n计算容器宽高，确保括号能完全包裹矩阵内容
2. 统一视觉效果：固定单元格宽度、居中对齐内容，用number_format统一小数位数
3. 自适应括号：方案1使用伪元素生成方括号，尺寸随容器百分比自动调整；方案2保留原电视样式，通过百分比定位实现自适应

内容的提问来源于stack exchange，提问作者PixelPioneer