CSS 的 横向、纵向属性顺序

作者:vkvi 来源:千一网络(原创) 日期:2021-7-3

对于位置类,通常有 2 个属性值,如果值是数值,则分别表示 x、y。

比如 background-position:100% 50%;,100% 是 x,50% 是 y,不要搞混了。

不过,如果用 top、right、bottom、left、center 时,则无所谓,它会自动识别,而且就算 center 与其他方位混用,它也能够识别 center 是表示 x 还是 y。

即:background-position:bottom left; 与 background-position:left bottom; 效果是一样的。

而对于四边类,通常有 1-4 个属性值。

当有 4 个值时,依次表示:上、右、下、左。

当有 3 个值时,依次表示:上、右和左、下。

当有 2 个值时,依次表示:上和下、左和右。可以理解为 y 和 x。

当有 1 个值时,表示:上和右和下和左。

相关文章