firefox推荐与个人理解的css书写顺序

最近的工作中，遇到不少问题，其中一个问题我觉得是最重要的，那就是css的书写顺序，他可以体现一个前端工作者的思续。如果您看到本文，请不要再想到哪个属性就写哪个属性。

先来看一下firefox推荐的书写顺序 
* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/ 
从上面推荐的顺序可以看出，非常的有条理。上面推荐的顺序并没有把更加详细的属性写进去，比如：top,right,bottom,left等，也许有人会问，这样些对性能有什么影响吗?我非常遗憾的告诉你，我也不知道，但我想，有条理的做事才是正确的（也许你有更好的方法）。

我的理解：
1.显示属性：display||visibility||list-style(list-style-type、list-style-image、list-style-position)||overflow
2.定位及浮动属性：position||top||right||bottom||left||float||clear
3.盒模型：width||height||margin||padding||border
4.背景:background(background-image、background-position、background-repeat、background-attachment)
5.文字属性：font-style||font-variant||font-weight||font-size||font-family||color
6.文本属性：text-indent||text-align||vertical-align||letter-spacing||word-spacing||text-transform||text-decoration||text-shadow
7.其它

引用某位人的话，”不管你用不用这个顺序，反正我是用了”。欢迎大家指正

赞 (0)

相关推荐

  • firefox推荐与个人理解的css书写顺序

    最近的工作中,遇到不少问题,其中一个问题我觉得是最重要的,那就是css的书写顺序,他可以体现一个前端工作者的思续.如果您看到本文,请不要再想到哪个属性就写哪个属性. 先来看一下firefox推荐的书写顺序 * mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup) */ /* Sugg

  • Mozilla建议的CSS书写顺序

    //显示属性 display list-style position float clear //自身属性 width height margin padding border background //文本属性 color font text-decoration text-align vertical-align white-space other text content

  • font和line-height之CSS代码书写顺序不同，导致显示效果不一样

    无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同. 即: >>> 如果先写font,再写line-height,显示效果正常 >>> 如果先写line-height,再写font,则line-height定义的效果会丢失,在IE.Firefox.Opera下都出现这种BUG 具体效果请看以下代码: <p>h1:</p> <h1 style=&

  • 小心：CSS代码书写顺序不同，导致显示效果不一样

    无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同. 即: >>> 如果先写font,再写line-height,显示效果正常 >>> 如果先写line-height,再写font,则line-height定义的效果会丢失,在IE.Firefox.Opera下都出现这种BUG 具体效果请看以下代码: h1: IECN.Net - 专注Web技术,体验开发乐趣! IECN.N

  • Mysql系列SQL查询语句书写顺序及执行顺序详解

    Mysql系列SQL查询语句书写顺序及执行顺序详解

    目录 1.一个完整SQL查询语句的书写顺序 2.一个完整的SQL语句执行顺序 3.关于select和having执行顺序谁前谁后的说明 1.一个完整SQL查询语句的书写顺序 -- "mysql语句编写顺序" 1 select distinct * 2 from 表(或结果集) 3 where - 4 group by -having- 5 order by - 6 limit start,count -- 注:1.2属于最基本语句,必须含有. -- 注:1.2可以与3.4.5.6中任一

  • 兼容ie、firefox的图片自动缩放的css跟js代码分享

    需求:图片width<=330px,height<=150. 1.利用max-width,max-height使图片等比例自动缩放,代码: 复制代码 代码如下: img{max-width: 330px;max-height: 150px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小. 2.用javascript脚本来兼容ie6,代码如: 复制代码 代码如下: var img_width = img.Offset

  • 让用户自己控制网页字体的大小的css书写方法

    现在国内绝大多数的站点都用CSS把字体大小设定为12px,像素虽然也是相对尺寸单位,但只是相对于屏幕的分辨率 ,当屏幕的分辨率一定时,如果你感到字太小,阅读有困难,在非标准浏览器中就无能为力了,所以说,如果把单位改成em,那么就可以用CTRL+鼠标滚动把字放大,或者用菜单上的查看>文字大小来改变字的大小. 如何设定 1.在body标签里将字体尺寸设为62.5%,如果在body里没有CSS设定,那么浏览器默认的大小是16px,设了62.5%,则字体尺寸=16px*62.5%=10px,这时你能用e

  • 深入理解javascript的执行顺序

    如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜. 那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语: 1.代码块JavaScript中的代码块是指由<script>标签分割的代码段.例如: 复制代码 代码如下: <script type="text/javascript">     

  • div+CSS 兼容小摘

    区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; IE7,IE8兼容: <meta http

  • 浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

    自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过.当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波.真希望哪一天FF可以一统天下,虽然现在还是IE的大天下.特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担. 为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK.当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下

随机推荐