css 简写用法介绍

2020-05-08 08:46:59易采站长站整理

padding:1px 2px 3px 4px;

等效于:

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;

顺序:

top | right | bottom | left

不论是边框宽度,还是边框颜色、边距等,只要css样式涉及四边,顺序通通都是“上右下左”(顺时针方向)。

如果四边的值省略一个,只写三个:

padding:1px 2px 3px;

则等效于:

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;

(省略的“左”值等于“右”)

如果四边的值省略两个:

padding:1px 2px;

则等效于:

padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;

(省略的“下”值等于“上”)

如果只有一个值:

padding:1px;

则等效于:

padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;