您当前位置：首页 > web前端 > htmlcss > 去掉CSS赘余代码，CSS可以更简洁

去掉CSS赘余代码，CSS可以更简洁

来源：程序员人生发布时间：2014-05-08 09:23:55 阅读次数：2531次

本篇文章适合css新手学习，对于已经掌握了css的朋友们也可以通过本片文章来复习知识。

作者通过实践，认为在有些情况下css的代码是可以更加简洁的，多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的。

精简的代码对于网页是有莫大的好处的，对于浏览者访问速度会有一定的提升，另外对于搜索引擎也更加可以抓取网页关键内容。废话不说了，下面就看看笔者总结的可以精简的代码:

以下为引用的内容：

　　1.Margin & Padding

　　例1：

　　.div {

　　margin-top:10px;

　　margin-right: 5px;

　　margin-bottom:30px;

　　margin-left:0px;

　　}

精简后代码如下：

以下为引用的内容：

　　.div { margin:10px 5px 30px 0;})

　　例2：

　　.div {

　　margin-top:10ox;

　　margin-right:20px;

　　margin-bottom:0;

　　margin-left:20px;

　　}

精简后代码：

以下为引用的内容：

　　.div {

　　margin:10px 20px 0;

　　}

　　例3：

　　.div {

　　margin-top:0;

　　margin-right:auto;

　　margin-bottom:0;

　　margin-left:auto;

　　}

精简后代码：

以下为引用的内容：

　　.div {

　　margin:0 auto;

　　}

　　例4：

　　.div {

　　margin-top:50px;

　　margin-right:50px;

　　margin-bottom:50px;

　　margin-left:50px;

　　}

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 ajax实例教程：模拟google动态提示效果

下一篇 Access数据库提示OleDbException (0x80004005): 操作必须使用一个可

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点