前端学堂(好切网)-Web前端开发,网页切图教程分享平台
前端学堂(好切网),PS网页切图,专业WEB前端外包网站
您的位置:首页 > 前端学堂 > HTML/CSS

css属性margin缩写方式

2017-03-23 17:16:42分类:HTML/CSS阅读(137)

margin是css属性中使用频率非常高的代码,margin缩写不仅可以有效提高效率,更能让代码看起来更整洁,更利于维护。

在css中,可以将margin-top,margin-right,margin-bottom,margin-left,缩写为一个标记margin,顺序为上右下左(顺时针)。

margin标记可以带一个、二个、三个、四个参数,各有不同的含义。

例如:

margin:10px 20px 30px 40px;   /*4个参数依次代表上边距10px、右边距20px、下边距30px、左边距40px*/

则等同于:

margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;

对于margin只有3个参数的情况,则3个参数分别代表上边距、右边距、下边距,缺少的左边距与右边距相等。

例如:

margin:10px 20px 30px;

则等同于:

margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:20px;    /*左边距与右边距相等*/

同样道理,如果margin只有2个参数,例如:

margin:10px 20px 30px;

则等同于:

margin-top:10px;
margin-right:20px;
margin-bottom:10px;    /*下边距与上边距相等*/
margin-left:20px;    /*左边距与右边距相等*/

如果margin只有1个参数,那么4个边距都相等,例如:

margin:10px;

则等同于:

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

通过margin缩写,css代码可以减少很多,看起来更简洁。

原文链接:http://www.hqhtml.com/htmlcss/22.html,出自好切网(前端学堂),转载请注明出处。
标签:css技巧 web规范
相关阅读 ~
推荐文章

© 2016 好切网(hqhtml.com) 长春诺阳科技有限公司(网页前端切图) 版权所有 吉ICP备15007500号