在while循环中使用循环有什么好处for？当我在迭代数组时,我总是使用一个for循环,所以我想知道我是否在这里遗漏了一些东西.
我从来没有遇到for循环无法完成工作的情况,但我担心我可能会在这里养成坏习惯.我对循环的使用是关于网页上的元素,动画中的东西等.
我有一系列从数据库中获取的图像，当添加三个或更多图像时，它会直观地显示三列。
当存在的图像少于三个时，因为我正在使用display: grid;它，所以它当前位于父容器的左侧（在代码示例中，我刚刚使用红色框来表示图像）。
无论如何，是否有这样的设置，以便当存在一两个图像时，这些图像可以对齐到父元素的中心。我很感激我可以使用 javascript 来检测存在多少图像，如果少于三个，则添加一个类并将包装器更改为display: flex，但我想知道仅使用 CSS 是否可以实现这样的布局？
由于布局的性质，当存在三个以上图像时，我确实需要使用 CSS 网格。
注意：我已注释掉 HTML 中的两个红色框，以显示仅存在一个红色框时的初始问题。
代码笔：https ://codepen.io/anna_paul/pen/xxXrVJQ
body {
display: flex;
justify-content: center;
margin: 0
width: 100%;
height: 100vh;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
max-width: 1250px;
}
.box {
width: 200px;
height: 200px;
background: red;
}<div class="wrapper">
<div class="box"></div>
<!-- <div class="box"></div>
<div class="box"></div> -->
</div>我有一个表单，可以使用 javascript fetch()API 将数据使用 PHP 提交到 MySQL 数据库。
在下面的代码中，当提交表单时，页面上会输出一条成功消息，并且通过 API 可以防止硬刷新fetch()。
板模块本身最初是通过“添加到板”元素上的单击事件显示的。
因为板列表是循环输出到页面上的while，所以我希望新的板名称也会在循环中输出，而无需刷新页面。我想我可以通过GET在单独的fetch()函数中添加一个简单的请求来做到这一点。但这不起作用（我也没有收到任何错误消息）。
当页面发生硬刷新时，新板会添加到输出列表中并按预期显示在页面上，因此我知道 PHP 在后端工作一切正常。
**编辑**
我已经输入了我尝试过的原始代码，这与@willgardner的答案基本相同。
因为我对fetch()AJAX 一般来说比较陌生 - 我是否打算在表单中构造（使用 JavaScript）一个新的按钮元素来显示请求的更新结果get？我假设 PHP 循环会在get请求发生时将其输出到页面上？就像页面最初加载时一样？
我还错过了 HTML 中的输入元素，该元素用于将post板名称发送到数据库，然后随请求取回该数据库get。现在它已被添加并且是create-board-name输入元素。
JavaScript
// Use fetch() to prevent page doing hard refresh when a new board name is created
let boardModuleForm = document.querySelector('.board-module-form'),
// URL details
myURL = new URL(window.location.href),
pagePath …当使用 Transform 属性对两个图像进行动画处理时，是否可以让 CSS 滑块循环浏览两个图像translateX？
我面临几个问题：
我似乎无法显示第二个图像，即使它在 HTML 中，除非我使用position: absolute，然后它对overflow: hidden父级不起作用？
如何重置第一张图像以返回到开头以重新开始？
注：动画速记中，动画持续2.5秒，初始延迟3秒。
我只想对属性执行此操作，translateX因为我想要 60FPS 的平滑度（完成后将完成translate3d，但为了使代码更易于阅读，我使用了 translateX）。我不想动画margin: left或left财产等。
任何帮助都会很棒。
代码如下或链接到 Codepen：https ://codepen.io/anna_paul/pen/ZEJrvRp
body {
position: relative;
margin: 0;
display: flex;
justify-content: center;
}
.container {
width: 500px;
height: 333px;
overflow: hidden;
}
.slider-wrapper {
display: flex;
}
.image {
display: block;
}
.hero-image-1 {
transform: translateX(0);
animation: slide-out-image-1 2.5s 3s cubic-bezier(0.54, 0.12, 0.44, 1) …我正在尝试在标记中使用 SVG 符号，但我无法让 CSS 增加元素内呈现的符号的大小？
\n\n我在一组标签中定义了一个 twitter 徽标，然后我在 use 标签内使用 xlink:href 引用它。图标正在显示，但是当我将 CSS 添加到包含该元素的 #box1 div 时，符号的大小没有增加或减少，并且似乎仅以 viewBox 大小呈现。
\n\n另外，当我将 SVG 元素悬停在开发工具上时，它本身会以 300 x 150px 渲染 - 但代码中没有任何这些测量值。
\n\n我真的很困惑 \xe2\x80\x94 任何帮助都会很棒。
\n\n#box1 {\r\n height: 10rem;\r\n width: 10rem;\r\n}<defs style="display: none;">\r\n <svg id="twitter" viewBox="0 0 19.19 15.95">\r\n <symbol id="twitter-symbol"><title>twitter</title>\r\n <path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" fill="#000">\r\n </path>\r\n </symbol>\r\n </svg>\r\n</defs>\r\n\r\n<div id="box1">\r\n <svg>\r\n <use xlink:href="#twitter-symbol"/>\r\n </svg>\r\n</div>我有一个名为的代码片段文件tutorials.code-snippets，我想从 VS Code 中删除它。我在文档中看不到任何告诉您如何删除自定义片段文件的内容。我怎样才能删除它？
我试图在 HTML 页面中组合“符号”和“使用”SVG 元素，但似乎无法让它发挥作用。
我使用“symbol”在页面顶部的 div 中声明了原始图形，然后用“use”调用它。原始图形随即显示。
当我尝试进一步重复它时，它没有显示。当我检查页面时，尽管没有显示/渲染并且显示了 svg“阴影根”，但还是为该元素分配了一些空间。
任何帮助都是极好的。
#box1, #box2 {width: 300px;}<div id="box1">
<symbol id="shapes-square" viewBox="0 0 352.16 240.77">
<svg id="square" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 195.74 129.42">
<title>Blue Square</title>
<rect x="0.5" y="0.5" width="194.74" height="128.42" fill="blue" stroke="#000" stroke-miterlimit="10"/>
</svg>
</symbol>
</div>
<!-- Declare Initial 'use' of SVG -->
<svg>
<use href="#shapes-square" />
</svg>
<br />
<!-- Div to hold the second 'use' of the SVG -->
<div id="box2">
<svg>
<use href="#shapes-square" />
</svg>
</div>