避免把属性'width'分成几块
Avoid the property 'width' into several blocks
我有 4 种不同的颜色:
我的问题是,我经常使用属性 width: 25%
分成几个块。可以避免重复吗?
HTML
<div class="color">
<div class="red"></div>
<div class="aqua"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
CSS
.color{
width: 90%;
background-color: black;
margin: 0 auto;
height: 10%;
display: flex;
}
.red {
width: 25%;
background-color: red;
}
.aqua {
width: 25%;
background-color: aqua;
}
.green {
width: 25%;
background-color: green;
}
.blue {
width: 25%;
background-color: blue;
}
是的,您可以在颜色 div 上使用网格,例如:
.color {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
使用一个额外的class并给所有部分:
.color{
width: 90%;
background-color: black;
margin: 0 auto;
height: 10%;
display: flex;
}
.part {
width: 25%;
height: 100px;
}
.red {
background-color: red;
}
.aqua {
background-color: aqua;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="color">
<div class="part red"></div>
<div class="part aqua"></div>
<div class="part green"></div>
<div class="part blue"></div>
</div>
是的,只需向您想要影响的每个元素添加第二个 class。
<div class="color">
<div class="red block"></div>
<div class="aqua block"></div>
<div class="green block"></div>
<div class="blue block"></div>
</div>
.block {
width: 25%;
}
您可以使用此代码:
.color > * { width: 25%; }
它将 25% 的宽度分配给 .color
的所有 direct 子元素
这样就不需要向 HTML 代码添加任何内容,也不需要额外的 类。
.color{
width: 90%;
background-color: black;
margin: 0 auto;
height: 10%;
display: flex;
}
.color > * {
width: 25%;
}
.red {
background-color: red;
}
.aqua {
background-color: aqua;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="color">
<div class="red">a</div>
<div class="aqua">b</div>
<div class="green">c</div>
<div class="blue">d</div>
</div>
因为你使用的是 flexbox
那么你可以在所有 flexbox 项目中添加一个公共 class 并添加 flex: 1
;
.color {
width: 90%;
background-color: black;
margin: 0 auto;
height: 10%;
display: flex;
}
.box {
flex: 1;
}
.red {
background-color: red;
}
.aqua {
background-color: aqua;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="color">
<div class="box red">red</div>
<div class="box aqua">aqua</div>
<div class="box green">green</div>
<div class="box blue">blue</div>
</div>
使用.color div
。这将选择 class 名称颜色下的所有 div。阅读 CSS selectors 了解更多信息。
.color div {
width: 25%;
}
.color {
width: 90%;
background-color: black;
margin: 0 auto;
height: 10%;
display: flex;
}
.red {
background-color: red;
}
.aqua {
background-color: aqua;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.color div {
width: 25%;
}
<div class="color">
<div class="red"></div>
<div class="aqua"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
我有 4 种不同的颜色:
我的问题是,我经常使用属性 width: 25%
分成几个块。可以避免重复吗?
HTML
<div class="color">
<div class="red"></div>
<div class="aqua"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
CSS
.color{
width: 90%;
background-color: black;
margin: 0 auto;
height: 10%;
display: flex;
}
.red {
width: 25%;
background-color: red;
}
.aqua {
width: 25%;
background-color: aqua;
}
.green {
width: 25%;
background-color: green;
}
.blue {
width: 25%;
background-color: blue;
}
是的,您可以在颜色 div 上使用网格,例如:
.color {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
使用一个额外的class并给所有部分:
.color{
width: 90%;
background-color: black;
margin: 0 auto;
height: 10%;
display: flex;
}
.part {
width: 25%;
height: 100px;
}
.red {
background-color: red;
}
.aqua {
background-color: aqua;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="color">
<div class="part red"></div>
<div class="part aqua"></div>
<div class="part green"></div>
<div class="part blue"></div>
</div>
是的,只需向您想要影响的每个元素添加第二个 class。
<div class="color">
<div class="red block"></div>
<div class="aqua block"></div>
<div class="green block"></div>
<div class="blue block"></div>
</div>
.block {
width: 25%;
}
您可以使用此代码:
.color > * { width: 25%; }
它将 25% 的宽度分配给 .color
这样就不需要向 HTML 代码添加任何内容,也不需要额外的 类。
.color{
width: 90%;
background-color: black;
margin: 0 auto;
height: 10%;
display: flex;
}
.color > * {
width: 25%;
}
.red {
background-color: red;
}
.aqua {
background-color: aqua;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="color">
<div class="red">a</div>
<div class="aqua">b</div>
<div class="green">c</div>
<div class="blue">d</div>
</div>
因为你使用的是 flexbox
那么你可以在所有 flexbox 项目中添加一个公共 class 并添加 flex: 1
;
.color {
width: 90%;
background-color: black;
margin: 0 auto;
height: 10%;
display: flex;
}
.box {
flex: 1;
}
.red {
background-color: red;
}
.aqua {
background-color: aqua;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="color">
<div class="box red">red</div>
<div class="box aqua">aqua</div>
<div class="box green">green</div>
<div class="box blue">blue</div>
</div>
使用.color div
。这将选择 class 名称颜色下的所有 div。阅读 CSS selectors 了解更多信息。
.color div {
width: 25%;
}
.color {
width: 90%;
background-color: black;
margin: 0 auto;
height: 10%;
display: flex;
}
.red {
background-color: red;
}
.aqua {
background-color: aqua;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.color div {
width: 25%;
}
<div class="color">
<div class="red"></div>
<div class="aqua"></div>
<div class="green"></div>
<div class="blue"></div>
</div>