css三个值上右下左顺序

CSS中的定位和边框属性中，经常会用到上右下左（top right bottom left）的顺序，例如：盒子的定位、边框、内边距等。这个顺序很重要，因为同样的数值如果放在不同的位置，就会产生不同的效果。

.box {
  position: absolute;
  top: 10px;
  right: 20px;
  bottom: 30px;
  left: 40px;
} 

上面的代码中，.box是一个绝对定位的盒子，其上、右、下、左边距分别为10px、20px、30px、40px。这里的顺序是按照top right bottom left来规定的。

下面我们来看不同的顺序对效果的影响：

/* 顺序为 top left bottom right */
.box {
  position: relative;
  top: 10px;
  left: 20px;
  bottom: 30px;
  right: 40px;
} 

上面的代码中，.box是一个相对定位的盒子，其上、左、下、右边距分别为10px、20px、30px、40px。这里的顺序是按照top left bottom right来规定的。我们可以看到，这个盒子跟上面那个盒子的位置不同，尽管它们的边距数值都是一样的。

再看一个例子：

/* 顺序为 right bottom left top */
.box {
  border: 1px solid #ccc;
  padding: 10px 20px 30px 40px;
} 

上面的代码中，.box是一个带有边框和内边距的盒子。其中，上、右、下、左的内边距分别为10px、20px、30px、40px。这里的顺序是按照right bottom left top来规定的。我们可以看到，这个盒子的左内边距比上面的例子大了20px，因为它们的内边距顺序不同。

综上所述，CSS中的上右下左顺序非常重要，同样的数值如果放在不同的位置，就会产生不同的效果。掌握好这个顺序，我们就能更加准确地控制盒子的位置和边框、内边距等样式。