4

对于给定的课程，我希望具有以下样式：

stlye1 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0px;
}

但这有很多重复，所以我只想写：

stlye1 {
    padding: 0;
    padding-bottom: 10px;
}

这会是一件坏事吗？

更新：

当我看到 3 个值（简写）时，我不确定最后一个要适用于什么。所以我想出了上面的第二种方法来明确我想要覆盖哪个。

更新2：

对于速记方法，您如何具体说明以下内容：

stlye1 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0px;
}

style1 {
    padding: 0 0 10px; // now i know this one, thanks!
}



stlye2 {
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 0px;
}

style2 {
    padding: 0 10px 0; // is this correct?
}



stlye3 {
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0px;
}

style3 {
    padding: 10px 0 0; // is this correct?
}



stlye4 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

style4 {
    padding: // i have no clue.
}

更新 3：

简而言之，style2 和 4 不能通过仅提供 3 个值以速记格式完成。正如 PassKit 所指出的，left 和 right 不能单独用 3 个值指定。

4

2 回答 2

5

你为什么不直接使用速记？

stlye1 {
    padding: 0 0 10px; /* top (right/left) bottom */
}

它在哪里：

padding: top right bottom left;
于 2013-01-07T19:01:47.150 回答
3

虽然您的建议完全有效，但最简洁的形式是：

stlye1 {
    padding: 0 0 10px;
}

这种速记格式分解为padding: top(0) right(0) bottom(10px);left 默认为 right 值，因为未指定 left 值。

对于您问题中的 4 种样式，样式 1 和 3 是正确的，但对于样式 2 和 4，请参阅下面的样式 5 和随附的注释。

作为参考，样式速记分解如下：

如果有一个值，它适用于所有 4 个属性，顶部、右侧、底部和左侧。

stlye1value {
    padding: 10px;
}

/* equals */

stlye1value {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

如果有两个值，第一个值适用于顶部和底部属性，第二个值适用于左右

stlye2values {
    padding: 0 10px;
}

/* equals */

stlye2values {
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
}

如果有 3 个值，第一个应用于顶部，第二个应用于左右，第三个应用于底部。

stlye3values {
    padding: 0 10px 20px;
}

/* equals */

stlye3values {
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

指定所有 4 个值会按上、右、下、左的顺序设置填充（想想从顶部开始的顺时针圆圈）。

stlye4values {
    padding: 0 10px 20px 30px;
}

/* equals */

stlye4values {
    padding-top: 0;
    padding-right: 10px; 
    padding-bottom: 20px;
    padding-left: 30px;

}

注意：padding-left如果不输入所有 4 个值或使用or ，则无法使用简写独立指定右值或左值padding-right。

style5 {
    padding-left: 10px; 
}

/* providing there are no previous padding rule for style5 equals */

style5 {
    padding: 0 0 0 10px; 
}

/* equals */

stlye5 {
    padding:0;
    padding-left:10px;
}

/* equals */

stlye5 {
    padding-top: 0;
    padding-right: 0; 
    padding-bottom: 0;
    padding-left: 10px;

}
于 2013-01-07T19:01:44.217 回答