6.10 CSS 尺寸速写

用来把多个位置的尺寸定义写在一起

设置4个位置的值

我们可以把4个位置(top, bottom, left 和 right)写在一个CSS属性中,也就是CSS属性的速写形式。

比如 padding 就是4个位置变体(padding-top, padding-bottm, padding-leftpadding-right)的速写。

padding 可以一次性把所有位置设置成相同的值:

blockquote{ padding: 20px;}
/* 等同于 */
blockquote{ padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;}

padding 还可以分别给不同的位置设置不同的值,把多个值以空格分开连接在一起:

blockquote{ padding: 20px 0 10px 50px;}

这个时候就需要知道上述规则中的位置顺序,来对应不同的值。从左到右分别是:top, right, bottomleft

设置2个或3个值

如果只设置两个值,那么第一个将应用于 topbottom 上面,第二个用于 rightleft

blockquote{ padding: 20px 0;}
/*
       top
       20px
left         right
 0             0
      bottom
       20px
*/

看起来有点复杂,其实你可以想象有一个转盘,从0点(12点)开始顺时针方向旋转(上、右、下、左)。然后再加上对称位置可共享相同值即可。 比如只有2个值的时候,按顺序就是只定义了top和right,而bottom分享top的值,left分享right的值。 再比如只有3个值的时候,按顺序就是只定义了top、right和bottom,剩下的left分享right的值。

所有需要使用4个位置的属性都可以运用该转盘规则:

  • margin
  • padding
  • border-width

这里需要特别说明一下 border 属性的用法,如前所述 border 是下面3个属性的速写:

  • border-width
  • border-style
  • border-color

其中 border-width 属性支持转盘规则定义,但是两者不能混合起来用:

blockquote{ border: 1px 0 solid green;}
/* 不工作 */

这种情况,正确的写法是把 border-width 单独分开来定义:

blockquote{ border: solid green; border-width: 1px 0;}