你会用CSS简写属性吗?

发布时间:2019-02-22 作者:一点通


CSS简写属性就是将几个相关的属性汇总到一个属性值里面,可以让代码更简洁,更可读。

注意这并非是简单的组合各个属性,而是可能会附加一些新的属性

比如我们常用的border属性,可以写成

div{
    border: 1px solid #DDD;
}

实际上等价于

border-width: 1px;
border-style: solid;
border-color: #DDD;

事实上在不考虑语义的前提下,交换这3个属性的顺序也是没问题的。

div{
    border: #DDD 1px solid;
}
div{
    border: 1px #DDD solid;
}

上面的写法都能正确显示。

但是请注意,这里有一个很重要的条件,就是所有的属性值的类型是不一样的,这样浏览器才会在无序的情况下识别出是哪个属性值。

如果有相同类型的属性,则最好严格按照标准的顺序来写。

再举一个background的例子

backgrouond

background-color: #FFF;
background-image: url(bg.png);
background-repeat: no-repeat;
background-position: bottom left;

可以简写成

background: #FFF url(bg.png) no-repeat bottom left;

看似background只是一个组合写法,但是实际上还附加了一些额外的CSS属性,咱们可以测试一下

如果用background-color

background-color: #EEE;

查看Chrome F12的computed可以发现只有

background-color: rgb(238, 238, 238);

而如果是

background: #EEE;

则变成了

background-clip: border-box;
background-color: rgb(238, 238, 238);
background-image: none;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-repeat-x: ;
background-repeat-y: ;
background-size: auto;

可见,这并非是简单的组合写法

当然CSS简写属性还有很多,每个简写属性的用法都不一样,完整的简写属性列表如下:

  • background
  • font
  • margin
  • padding
  • border
  • border-top
  • border-right
  • border-bottom
  • border-left
  • border-color
  • border-style
  • border-width
  • border-radius
  • transition
  • transform
  • list-style

实际开发中要记住这么多的简写属性并非易事,我们可以借助编辑器或IDE的一些提示插件来帮我们开发。