CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)

在CSS中，有些属性可以使用简写方式，例如padding、margin和border等属性可以使用如下的简写方式：

padding: 10px 20px 10px 20px;
margin: 10px 20px;
border: 1px solid #000;

这种简写方式在某些情况下能够有效地节省代码量，提高开发效率。但是在使用这种方式时，需要注意TRouBLe的顺序问题。

• T: top
• R: right
• B: bottom
• L: left

具体来说，就是在使用简写方式时，需要按照上下左右的顺序来设置属性值，如果不按照顺序来设置，可能会出现踩坑的情况。

下面是两个示例说明：

示例一

假设我们有以下的CSS代码：

padding: 10px 20px;

这种情况下，10px表示上下的padding值，20px表示左右的padding值，因为按照TRouBLe的顺序来设置，所以这个代码是正确的。

但是如果我们将它改成这样：

padding: 20px 10px;

这时候就会导致错误，因为20px实际上表示的是上padding和左padding的值，而10px表示的是下padding和右padding的值。这时候会出现一个横向上的padding比纵向大的情况，很可能会影响页面布局。

示例二

假设我们有以下的CSS代码：

border: 1px  solid #000;

这种情况下，1px表示的是上、下、左、右四个方向上的border-width，solid表示的是border-style，#000表示的是border-color。因为按照TRouBLe的顺序来设置，所以这个代码是正确的。

但是如果我们将它改成这样：

border: solid 1px #000;

这时候就会导致错误，因为solid表示的是border-style，1px表示的是border-width，这样写的话不符合TRouBLe的顺序，可能会导致样式表渲染不正常。

综上所述，在使用CSS中的简写属性时，要注意TRouBLe的顺序问题，避免踩坑。