【CSS】港真，我自己都怕CSS属性简写

神仙朱

发布于 2019-08-02 14:38:13

5330

发布于 2019-08-02 14:38:13

文章被收录于专栏：Vue源码 & 前端进阶体系Vue源码 & 前端进阶体系

神仙朱前言

闲置在家，没有工作，咸鱼到月底。加上最近在大佬的建议下搭个人博客，于是把自己的笔记整理了一下，捣鼓捣鼓，发点文章

心中的雷区

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

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

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

属性简写的作用

官方文档上面是这么说的

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

当你的项目中开始在项目中使用简写属性的时候，久而久之，会给你的样式文件减少很多的体积

而且更加雅观，更加整洁。想想是不是这个道理，当我们分开写属性的时候，很多时候是没有凑在一起写的

比如 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、属性的顺序是否固定？

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

  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）

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

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

  /* 第一个 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，不然不起效果，我敢负责任地说我不确定，虽然亲测是这样的，但是不排除意外…….

  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

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

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

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

border

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

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: url('/a.gif')

ps：list-style-image 级别大于 list-style-type，如果存在image，不显示 type

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

outside

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

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  /* 动画播放方向 ，可以轮流反向播放*/