心中的雷区

每次做项目写样式的时候，写到某些可以简写的属性，我仍然分开着去写，我当然知道简写的好处，但是我也有些害怕又去调试这种错误，有些东西又记不清楚模模糊糊，然后又需要去查，打断了我做项目的思路。
虽然是简单的东西，但是事后也不太想在这些东西上面去花时间，久而久之，像是雷区一样。

但是！！！我现在要鼓起勇气去直面内心的恐惧！！！惊乜嘢啧！！

因为要做勇士，就不能害怕黑暗，我们要主动出击

属性简写的作用

官方文档上面是这么说的

通常建议使用简写属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

当你的项目中开始在项目中使用简写属性的时候，久而久之，会给你的样式文件减少很多的体积
而且更加雅观，更加整洁。
想想是不是这个道理，当我们分开写属性的时候，很多时候是没有凑在一起写的

比如 background-image 又放在 height 的前面了，background-color 又放在 font-size 的后面了

这样写来，没有整合起来，其实阅读起来会花不少时间。
而简写就不一样了，一行读起来清清楚楚，明明白白。

常用有什么属性可以简写

我查了查，常用的一些简写属性大概是这些，如果有什么补充的，可以留言告诉我

margin、padding
border、border-radius
transition
background
font
list-style

下面我们以一个八拍的形式来说明一下这些属性的简写用法

background

/* backgroud:color image repeat attachment position origin clip / size */
background: #000 url(img/bg-cover.jpg) no-repeat scroll top left  content-box border-box /100% 100%

/* 相当于 */
background-color:#000   /* 背景颜色 */    
background-image: url(img/bg-cover.jpg)   /* 背景图片 */    
background-repeat:no-repeat     /* 背景如何重复 */    
background-attachment:scroll   /* 背景是否可以滚动 */    
background-position: top left   /* 背景图片位置 */    
background-origin:content-box   /* 背景图片定位区域 */    
background-clip:border-box   /* 背景的绘制区域 */    
background-size:100% 100%   /* 背景图片的尺寸 */

特别说明几个问题

1、属性的顺序是否固定？

属性的顺序是不固定的，比如下面的效果都是一样的

1
2
3

background: #000 url(img/bg-cover.jpg) no-repeat scroll border-box border-box top left/contain
background: url(img/bg-cover.jpg) no-repeat #000 border-box border-box top left/contain
background: no-repeat border-box  top left border-box url(img/bg-cover.jpg)  #000/contain

2、backgroud-origin 和 background-clip 在简写的位置怎么对应？

1、当简写属性时，只有一个 content-box（或者border-box）的时候，指的是 background-clip background-origin 都是 content-box（或者border-box）

1 2	/* background-origin 和 background-clip 都是 content-box */ background: #000 url(img/bg-cover.jpg) content-box ;

2、当简写属性时，有两个 content-box 的时候，第一个对应 background-origin，第二个对应 background-clip

1 2	/* 第一个 content-box 指的是 background-origin，第二个border-box指的是 background-clip */ background: #000 url(img/bg-cover.jpg) content-box border-box;

PS：background-origin 和 background-clip 默认都是 border-box

3、background-size 的简写注意

1、background-size 要放在斜杠 “/“ 后面，而且必须写上 background-position，不然不起效果，我敢负责任地说我不确定，虽然亲测是这样的，但是不排除意外…….

1	background: #000 url(img/bg-cover.jpg) top left/contain;

2、background-size:100% 50% == 表示宽100%，高50%

4、background-position 注意

您需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

来自w3cschool

顺便写一下而已，好像跟我们的简写主题不相关，但是没什么关系…….

font

font: italic normal bold 12px "宋体"

/* 相当于 */
font-style:italic    /* 字体样式，是斜体，还是正常什么的*/
font-variant:normal  /* 字体变化， */
font-weight:bold     /* 字体粗细 */
font-size:12px       /* 字体大小 */
font-family:"宋体"   /* 字体 */

margin、padding、border-radius

margin 和 padding 以及 border-radius 的简写顺序都是按照顺时针方向来的， 上右下左

四个值，四个方向的值 不一样 的时候

/* margin: margin-top margin-right margin-bottom  margin-left */
marigin: 1px 2px 3px 4px

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

/* border-radius: top-left top-right bottom-right bottom-left */
border-radius: 1px 2px 3px 4px

一个值，四个方向的值一样的时候，只用写一个值就可以了

1
2
3

marigin: 1px   /* 相当于 margin: 1px 1px 1px 1px  */
padding: 1px   /* 相当于 margin: 1px 1px 1px 1px  */
border-radius: 1px   /* 相当于 border-radius: 1px 1px 1px 1px  */

两个值，上下方向的值一样，左右一样

1
2
3

marigin: 1px 2px  /* 相当于 margin: 1px 2px 1px 2px  */
padding: 1px 2px  /* 相当于 margin: 1px 2px 1px 2px  */
border-radius: 1px 2px  /* 相当于 border-radius: 1px 2px 1px 2px  */

三个值，上下方向的值 不一样 ，左右一样

1
2
3

marigin: 1px 2px 3px  /* 相当于 margin: 1px 2px 3px 2px  */
padding: 1px 2px 3px  /* 相当于 padding: 1px 2px 3px 2px  */
border-radius: 1px 2px 3px   /* 相当于 border-radius: 1px 2px 3px 2px  */

border

这个一般见都是合起来写，也很少见过分开写的，除非你比较清新脱俗

/* 四条边一样 */
border: 1px solid #000  

/* 相当于 */
border-left:1px solid #000  
border-rigiht:1px solid #000  
border-top:1px solid #000  
border-bottom:1px solid #000  

/* 四条边都不一样，如果这么写就觉得有点长了 */
border-left:1px dotted #222 
border-rigiht:2px dashed #333  
border-top:3px groove #444  
border-bottom:4px solid #555  

/* 
  这么写就显得少一些 ，同样是 上右下左 的顺序
  也和margin 一样，可以只写 1个值 或 2个值 或 3个值
  意思可以参考上面
*/
border-width: 10px 20px 30px 10px ;
border-color: black red gold blue;
border-style: dotted dashed groove solid ;

list-style

简写的时候，可以不设置其中的某个值，但是没有设置的属性会使用默认值

/* list-style: list-style-type list-style-position list-style-image  */
list-style: circle inside url('/a.gif') 

/* 相当于 */
list-style-type: circle
list-style-position: inside
/* list-style-image 级别大于 list-style-type，如果存在image，不显示 type */
list-style-image: url('/a.gif')

另外，说说 list-style-position 为 inside 和 outside 的区别，看图便知
inside
log
outside
log

这个图是不是看起来有点逼死强迫症，总想把色块去掉哈哈哈

transition、animation

/* transition: property duration timing-function delay */
transition: transform 10s linear 2s;

/* 相当于 */
transition-property: transform
transition-duration: 10s
transition-timing-function: linear
transition-delay: 2s

/* animation: name duration timing-function delay iteration-count direction */
animation: keyframeName 10s linear 2s 3 alternate ;

/* 相当于 */
animation-name: keyframeName  /* 动画帧名称 */
animation-duration: 10s  /* 动画完成时间 */
animation-timing-function: linear  /* 动画过渡方式 */
animation-delay: 2s  /* 动画延迟多久开始 */
animation-iteration-count: 3   /* 动画播放多少次，可以无限播放 */
animation-direction: alternate  /* 动画播放方向 ，可以轮流反向播放*/