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

2019-08-02 14:38:13 浏览数 (1)

神仙朱前言

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

心中的雷区

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

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

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

属性简写的作用

官方文档上面是这么说的

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

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

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

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

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

常用有什么属性可以简写

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

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

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

background

代码语言：javascript复制
  /* 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、属性的顺序是否固定？

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

代码语言：javascript复制
  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）

代码语言：javascript复制
  /* background-origin 和 background-clip 都是 content-box */
  background: #000 url(img/bg-cover.jpg) content-box ;

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

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

代码语言：javascript复制
  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

代码语言：javascript复制
   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 的简写顺序都是按照顺时针方向来的， 上 右 下 左

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

代码语言：javascript复制
    /* 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

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

代码语言：javascript复制

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

代码语言：javascript复制

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

代码语言：javascript复制

border

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

代码语言：javascript复制

list-style

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

代码语言：javascript复制
  /* 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

代码语言：javascript复制
  /* 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  /* 动画播放方向 ，可以轮流反向播放*/

结尾

害怕的东西

去了解了，去看了，突破了心里雷区的第一关 去尝试了，举一反三了，突破了心里雷区的第二关 做笔记，是写给自己看的，可以很随便，只要自己能看懂就行 写文章，是写给别人看的，必须写清楚，就算没人看，这也算是我比较怕触碰的地方，算是我的雷区大Boos。

我会继续突破自己！！！高度不负责任，有问题自己告诉我然后自己去试试就好了

background border image list size

0 人点赞