主页 / coding / 问题

问题[css](coding)

Martin Hope
zombie
Asked: 2024-11-22 03:44:52 +0800 CST
  • 4

我有一个父 div，上面有“显示详细信息”按钮。它的工作原理如下：按下按钮时 -> bool 发生变化 -> 显示详细信息。

代码是这样的:(而不是blabla是巨大的div）

import React, { useState, useCallback } from 'react';

function Page() {
  const [showDetails, setShowDetails] = useState(true);

  const PurchaseComponent = () => {
    const toggleDetails = useCallback(() => {
      setShowDetails(prevShowDetails => !prevShowDetails);
    }, []);

    return (
        <div className="mydiv">
            <button onClick={toggleDetails}>
              Show Details
            </button>
            {showDetails && (
              <div>BlaBla</div>
            )}
        </div>
    );
  };

  return (
    <div>
        <PurchaseComponent />
    </div>
  );
}

export default Page;

样式表：

.mydiv {
    min-height: 250px;
    width: 800px;
    border-radius: 10px;
    padding: 50px;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #4d474f, #282f32, #371211, #7d1416, #850b0f, #40080a, #850b0f, #7d1416, #371211, #282f32, #4d474f);
    background-size: 2200% 2200%;

    -webkit-animation: AnimationName 51s ease infinite;
    animation: AnimationName 51s ease infinite;
    transition: transform 2s ease;
  }
  

  @-webkit-keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
  }
  @keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
  }

父级具有使用渐变动画制作的动画背景。我只希望它在按下详细信息按钮时不会重新启动（子级更新）。按下按钮时，父级 div 的大小会发生变化。

css
Martin Hope
Mike G.
Asked: 2024-11-21 22:25:41 +0800 CST
  • 6

我在计算绕 x 轴旋转的 div 的子 div 的最佳旋转角度时遇到了问题。

为了使其更容易理解，我快速绘制了我所拥有的内容：

css 3D场景方案

在一个以vh表示的可配置透视（容器）的场景中，我有一个DIV元素（父DIV），它作为子div元素（子DIV）的定位矩形，这个父div在X轴上倾斜一个角度，这个角度也是可配置的。

我的目标是将子 div 直接显示为面向屏幕（顶部/底部/右侧/左侧边缘与屏幕的顶部/底部/右侧/左侧边缘平行），并且形状为正方形（宽度=高度），因此计算 X 轴上的负旋转角度，使得子 div 像我想要的那样是直的，但是经过多次不成功的尝试和计算（我数学不太好，年纪很大了，记不清上学了...）我没有得到适用于所有类型的父矩形的透视和倾斜角度设置的结果...

我以为我只需要做父级的反向角度，即父级角度= 50 度，子级角度= -50 度，但遗憾的是它不起作用......经过一些测试，我发现 perspective 属性的值对子 div 的渲染也有影响...

为了说明我想要做什么，我的项目的某些屏幕： 渲染示例 这个屏幕的宽度非常好，父级 57 度/子级 -33 度，子级还有一个 scaleY（1.6），否则它就不是正方形，但如果我改变视角或角度，它就会变糟...

渲染示例 这个一点都不好，场景规模较小，我的子 div 不是直的，同时使用相同的错误公式来计算 rotateX 角度...

任何能帮助我的想法都将受到欢迎！

（附言：抱歉我的英语不好...不是我的母语）

编辑： 做了一个片段来简化并显示我的问题：

#scene { 
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); 
  width: 400px; height: 300px; perspective: 60vh; overflow: hidden; }
#recp { 
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #393; 
  transform: rotateX(50deg); transform-origin: bottom; backface-visibility: hidden; 
  transform-style: preserve-3d; perspective: 60vh; }
#recp > div { 
  position: absolute; width: 20%; height: 80px; background: #999; 
  transform: rotateX(-25deg); transform-origin: bottom; 
  font-size: 48px; text-align: center; line-height: 80px; }
#recp > div#elt1 { left: 0; top: 0; }
#recp > div#elt2 { left: 40%; top: 40%; }
#recp > div#elt3 { left: 80%; top: 60%; }
<div id="scene">
  <div id="recp">
    <div id="elt1">1</div>
    <div id="elt2">2</div>
    <div id="elt3">3</div>
  </div>
</div>

编辑 2： 经过一些测试和阅读，我明白只有角度不足以解决我的问题……父 div 的视角对于子 div 的良好渲染也很重要，实际上我放置的值与容器视角相同，但我认为这是错误的，这必须是与定位矩形（父 div）本身相对应的值。因此，问题仍然是使用哪个公式来计算子 div 上的正确角度和父 div 上的正确视角……

编辑3： 通过反复试验，并且在没有真正理解我正在做的事情的数学逻辑的情况下（嗯......）我意识到如果我保持相同的视角并应用一个等于父 div 角度一半的角度（负数），我几乎很好，给予或减少几个像素...我更新了代码片段。

也许我需要为父 div 设置另一个透视值并达到像素完美，或者我对角度除以 2 的假设不正确，我承认我对这些数学很迷茫......

还有 div 的高度，我有一个 JS 例程，它遍历我的子元素并分配一个等于图像宽度的像素高度，以确保它是正方形（宽度以百分比表示，以满足网格上的对齐需求），但渲染时图像根本不是正方形的......

编辑 4： 使用 retain-3d 更新代码片段（感谢@Temani Afif）在容器上添加了 4/3 的 W/H 比，因为我的项目场景具有这个纵横比。

css
Martin Hope
user28155802
Asked: 2024-11-21 15:33:26 +0800 CST
  • 6

.pipe(sassGlob())
.pipe(sass(["last 2 version", "> 2%"]))
.pipe(autoprefixer())
.pipe(cssbeautify())
.pipe(gulp.dest("./dist/assets/css/"))
.pipe(cssnano())
.pipe(
    rename({
        suffix: ".min",
        extname: ".css",
    })
)
.pipe(gulp.dest("./dist/assets/css/"))

在引导样式中，根目录中有几行 --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; --bs-form-invalid-border-color: #dc3545 }

cssnano() 改变 --bs-form-invalid-border-color:** #dc3545 -> border:1px solid #dc3545; 如何避免这种情况？

在此处输入图片描述 红色 HTML 边框 =)

css
Martin Hope
Lovethenakedgun
Asked: 2024-11-21 08:04:41 +0800 CST
  • 6

假设有一个 N×M 的单元格网格，我该如何实现以下效果。

我可以制作出 3x3 的网格。

[A][B][C]
[D][E][F]
[G][H][I]

添加gap空格来分隔元素：

[A] [B] [C]

[D] [E] [F]

[G] [H] [I]

我可以填充背景以产生网格线的效果。

.-----------.
|[A]|[B]|[C]|
|---+---+---|
|[D]|[E]|[F]|
|---+---+---|
|[G]|[H]|[I]|
`-----------`

但是，是否有可能让网格线在网格的间隙内对齐，并且还可以“延伸”到网格之外一定的量？

  |   |   |   |
--+---+---+---+--
  |[A]|[B]|[C]|
--+---+---+---+--
  |[D]|[E]|[F]|
--+---+---+---+--
  |[G]|[H]|[I]|
--+---+---+---+--
  |   |   |   |

我设法使用绝对定位的 DIV 来“破解”它，使用公式引用网格的自定义属性来对齐自身。但这要求我提前知道行数并插入 HTML 元素以进行样式设置。我想一定有更好的方法。

    body {
      margin: 0;
    }
    
    .grid-wrapper {
      --grid-margin: 10px;
      --grid-cell-size: 100px;
      --grid-line-thickness: 2px;
      --grid-line-offset: calc(0px - var(--grid-line-thickness));
      
      --grid-color: darkgray;
      --grid-line-color: gray;
      
      position: relative;
      margin: var(--grid-margin);
      width: calc(3 * var(--grid-cell-size));
    }

    .grid {
      display: grid;
      gap: var(--grid-line-thickness);
      grid-template-columns: repeat(3, var(--grid-cell-size));
      grid-auto-rows: var(--grid-cell-size);
    }

    .grid > div {
      width: 100%;
      height: 100%;
      background: var(--grid-color);
    }

    .grid-line-row {
      width: 110%;
      left: -5%;
      position: absolute;
      height: var(--grid-line-thickness);
      background: var(--grid-line-color);
      top: var(--grid-line-offset);
    }

    .grid-line-row:nth-child(2) {
      top: calc(var(--grid-line-offset) + 
        var(--grid-line-thickness) + 
        var(--grid-cell-size));
    }

    .grid-line-row:nth-child(3) {
      top: calc(var(--grid-line-offset) + 
        2 * var(--grid-line-thickness) + 
        2 * var(--grid-cell-size));
    }

    .grid-line-row:nth-child(4) {
      top: calc(var(--grid-line-offset) + 
        3 * var(--grid-line-thickness) + 
        3 * var(--grid-cell-size));
    }

    .grid-line-col {
      height: 110%;
      top: -5%;
      position: absolute;
      width: var(--grid-line-thickness);
      background: var(--grid-line-color);
      left: var(--grid-line-offset);
    }

    .grid-line-col:nth-child(6) {
      left: calc(var(--grid-line-offset) +
        var(--grid-line-thickness) + 
        var(--grid-cell-size));
    }

    .grid-line-col:nth-child(7) {
      left: calc(var(--grid-line-offset) + 
        2 * var(--grid-line-thickness) + 
        2 * var(--grid-cell-size));
    }

    .grid-line-col:nth-child(8) {
      left: calc(var(--grid-line-offset) +
        3 * var(--grid-line-thickness) + 
        3 * var(--grid-cell-size));
    }
<body>
    <div class="grid-wrapper">
        <div class="grid">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="grid-line-row"></div>
        <div class="grid-line-row"></div>
        <div class="grid-line-row"></div>
        <div class="grid-line-row"></div>
        <div class="grid-line-col"></div>
        <div class="grid-line-col"></div>
        <div class="grid-line-col"></div>
        <div class="grid-line-col"></div>
    </div>
</body>

css
Martin Hope
Haithem-B
Asked: 2024-11-19 18:38:51 +0800 CST
  • 6

我找不到更改 Material 组件的 Azure 和 Blue 主题所赋予的颜色的方法。尤其是对于 mat-form-field (matInput)。

HTML

<mat-form-field appearance="fill">
   <mat-label>{{ "pression_amont_minimum" | translate }} (P1)</mat-label>
   <input matInput type="number" formControlName="PressAmMin" />
</mat-form-field>

尝试通过在 style.css 和 component.css 中引用该组件来更改其样式：

mat-form-field{
  background-color : white;
}

什么都没发生

input{
  background-color : white;
}

一部分变成了白色

使成为

mat-label{
  background-color : white;
}

::ng-deep

对我来说没用

我发现改变

.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: var(--mdc-filled-text-field-container-color, var(--mat-app-surface-variant)
);

可以改变它的颜色，但没有找到方法来达到 css 的这一部分或覆盖它。

css
Martin Hope
Joren
Asked: 2024-11-19 05:43:14 +0800 CST
  • 5

这是可行的，但持续时间设置被忽略了。我遗漏了什么？

https://jsfiddle.net/r76z0o8s/

function onClick(e) {
  e.target.classList.add('clicked_media_transition')
  document.startViewTransition(() => {
    e.target.classList.add('expand')
  })
}
body {
  margin: 0;
}

div {
  width: 300px;
  height: 300px;
  background-color: pink;
  position: absolute;
}

.expand {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

::view-transition-group(clicked_media_transition) {
  transition-duration: 5s;
  transition-timing-function: ease-out;
}

.clicked_media_transition {
  view-transition-name: clicked_media_transition;
}
<div onclick="onClick(event)"></div>

css
Martin Hope
B2ng4
Asked: 2024-11-18 22:35:14 +0800 CST
  • 6

如何删除父节点（即组件树中具有子节点的节点）的复选框显示。

我在课堂上尝试过。

.q-checkbox__inner) {
  display: none;

但随后所有复选框都消失了。我想知道该怎么做

css
Martin Hope
jacob_frankovic
Asked: 2024-11-18 10:31:58 +0800 CST
  • 6

我有这个 HTML/CSS 片段：

.test123 {
  grid-template-columns: 255px 255px;
  transition: 200ms;
  display: grid;
  gap: 30px;
  .card {
    border-radius: 50px;
    border: 1px solid #BBD0FB;
  }
  .c1 {
    background-color: red;
    width: 100%;
    height: 100px;
  }
  .c2 {
    background-color: blue;
    width: 100%;
    height: 100px;
  }
}
.test123:has(:nth-child(1):hover) {
  grid-template-columns: 1fr 255px;
}
.test123:has(:nth-child(2):hover) {
  grid-template-columns: 255px 1fr;
}
<div class="test123">
        <div class="card c1"></div>
        <div class="card c2"></div>
</div>

我希望蓝色和红色卡片在悬停时能够有一些过渡，这样它们就可以平滑地增大和缩小。

我尝试允许transition-behaviour: allow-discrete但没有帮助，所以我有点被这个问题困扰了。

谢谢

css
Martin Hope
gregsdennis
Asked: 2024-11-18 09:56:51 +0800 CST
  • 6

我有一个包含两列的弹性框。左侧内容通常比右侧内容高，我想将右侧内容渲染为居中。

但是，左侧的内容可以扩展，我想让右侧的内容在扩展时保持在原处，而不是保持居中。

到目前为止，我有第一部分，但是当左侧部分扩展时，右侧部分会下降以保持居中。

.host {
  width: 500px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: yellow;
}

.left-panel {
  width: 50%;
  margin: 5px;
  flex-direction: column;
  background: pink;
}

.summary {
  margin: 5px;
  background: green;
}

.expand-list {
  margin: 5px;
  background: skyblue
}

.right-panel {
  width: 50%;
  margin: 5px;
  display: flex;
  flex-direction: row;
  background: blue;
}

.image {
  margin: 5px;
  background: red;
}

button {
  margin: auto 5px;
  width: 100px;
}
<div class="host">
  <div class="left-panel">
<div class="summary">
  Here is a long paragraph of text that I need to display.
  It takes up most of the container, but there's an expander
  below that will make this text take up less because the
  expander will take up more when expanded.
</div>
<details class="expand-list">
  <summary>click me</summary>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
  </ul>
</details>
  </div>
<div class="right-panel">
<div class="image">
  <p>
    Don't let this text fool you;
  </p>
  <p>
   it's actually an image.
  </p>
</div>
<button>
  Do it
</button>
  </div>
</div>

我无法明确设置右侧内容的上边距，因为左侧内容没有设置高度。

如何让左侧内容扩展时右侧内容保持不变？最好使用纯 CSS 解决方案。

css