首页 > 代码库 > CSS常见简写规则整理

CSS常见简写规则整理

  • 外边距(margin)

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

简写顺序为顺时针方向(上、右、下、左),如:margin: 1px 2px 3px 4px;

其中四边都相等时可简写为一个,如:margin: 1px;

当上下、左右分别相等时,也可简写,如:margin: 1px 2px; 代表上下1px,左右2px

只有左右相等时,可简写为:margin: 1px 2px 3px;

但只有上下相等时不可简写。

  • 内边距(padding)

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

例:

h1 {  padding-top: 10px;  padding-right: 0.25em;  padding-bottom: 2ex;  padding-left: 20%;  }

规则与外边距相同,在此就不细说了。

  • 边框(border)

border:2px solid #cdcdcd;

p  {  border:5px solid red;  }

 

分别为border-width、border-style、border-color

除border-style必须提供之外,其它都可省略而使用默认参数,其中border-width默认为3px,border-color默认为黑色。

  • 字体(font)

技术分享

  • 背景(background)

可设置属性(可选)

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image

 

  • 列表(list-style)

list-style:disc outside url(list.png)

分别为list-style-type、list-style-position、list-style-image

 

CSS常见简写规则整理