如何写更少的css来创建不同颜色的方形框

Question

我正在创建包含不同颜色的小div，以便用户可以选择它们。目前，我必须在跨度标签之间插入一些东西

<span>11</span> 

使得元素出现在屏幕上。我尝试添加内容："在CSS中，但它不起作用。

有人能向我建议一个更好的方法来解决这个问题吗？问题是当我创建一个黄色框，然后我必须添加额外的颜色："；黄色"；以确保该框只是一个有颜色的框(其中没有文本(。应该有一个更聪明的方法，对吧？

.colorselection {
width: 5px;
height: 5px;
margin-left: 12px;
content: "";
}
.colorselection--yellow {
background: yellow;
}
.colorselection--black {
background: black;
}
.colorselection--red {
background: red;
}
<!-- begin snippet: js hide: false console: true babel: false -->

<span class='colorselection colorselection--black'>11 </span>
<span class='colorselection colorselection--red '>12 </span>
<span class='colorselection colorselection--yellow'>13 </span>

Answer 1

您应该使用Flexbox。

• Flexbox上的MDN文档
• CSS技巧-Flexbox指南：这是对Flexbox概念的一个很好的解释

.flex-box{
display: flex;
}
.colorselection {
width: 20px;
height: 20px;
margin: 2px;
}
.colorselection--yellow {
background: yellow;
}
.colorselection--black {
background: black;
}
.colorselection--red {
background: red;
}

.colorselection--red {
background: red;
}

<div class="flex-box">
<div class="colorselection colorselection--black"></div>
<div class="colorselection colorselection--red"></div>
<div class="colorselection colorselection--yellow"></div>
</div>

Answer 2

有一些HTML标记用作块元素，而span用作内联元素。因此，您要么使用块元素HTML标记，要么在span标记中使用display: block或display: inline-block。

.colorselection {
width: 25px;
height: 25px;
margin-bottom: 12px;
display: block;
background: #ddd; /* fallback color */
}
.colorselection.yellow {
background: yellow;
}
.colorselection.black {
background: black;
}
.colorselection.red {
background: red;
}

<span class="colorselection"></span>
<span class="colorselection yellow">11</span>
<span class="colorselection yellow"></span>
<span class="colorselection black">11</span>
<span class="colorselection red">11</span>
<span class="colorselection red"></span>

Answer 3

我最喜欢的处理方法是使用CSS变量。首先创建一个作用域为color-selection类的变量，这样它就可以被自己作用域内的更改覆盖。提供block级显示将允许元素遵循height和width维度。您也可以使用inline-flex、flex或inline-block来获得相同的结果。

.color-selection {
--box-color: transparent;
width: 25px;
height: 25px;
background-color: var(--box-color);
margin-bottom: 0.5rem;
display: block;
}
.color-selection.black {
--box-color: black;
}
.color-selection.yellow {
--box-color: yellow;
}
.color-selection.red {
--box-color: red;
}

<span class="color-selection"></span>
<span class="color-selection yellow"></span>
<span class="color-selection red"></span>
<span class="color-selection black"></span>

jsFiddle

Answer 4

我明白了！解决方案非常简单。使用插入的内联元素块元素。如果你想让所有元素内联，那么你需要额外的内容来用display:flex包装彩色的divs。

.container {
display: flex;
gap: 20px;
}
.container div {
width: 40px;
height: 40px;   
border:1px solid black;
}
.container div:nth-child(1) {
background: red;
}
.container div:nth-child(2) {
background: green;
}
.container div:nth-child(3) {
background: yellow;
}

<div class="container">
<div></div>
<div></div>
<div></div>
</div>