CSS技巧(三):CSS经常忘记两个简写

盒子大小

这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同。盒子有上下左右四个方向,每个方向都有个外边距:

缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同,则可以省掉:

margin:1px;//四个方向的边距相同,等同于margin:1px 1px 1px 1px;
margin:1px 2px;//上下边距都为1px,左右边距均为2px,等同于margin:1px 2px 1px 2px
margin:1px 2px 3px;//右边距和左边距相同,等同于margin:1px 2px 3px 2px;
margin:1px 2px 1px 3px;//注意,这里虽然上下边距都为1px,但是这里不能缩写。
font
font简写也是使用最多的一个,它也是书写高效的CSS的方法之一。

font包含以下属性:

font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large);
line-height: normal || (number+unit);
font-family:name,"more names";

font的各个属性也都有默认值,记住这些默认值相对来说比较重要:

font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;

事实上,font的简写是这些简写中最需要小心的一个,稍有疏忽就会造成一些意想不到的后果,所以,很多人并不赞成使用font缩写。

不过这里正好有个小手册,相信会让你更好的理解font的简写:

参考:

常用CCS语法总洁

前端观察

原文地址:https://www.cnblogs.com/eaysun/p/4052036.html