声明顺序

最新推荐文章于 2022-09-01 10:47:58 发布

weixin_30318645

最新推荐文章于 2022-09-01 10:47:58 发布

阅读量145

点赞数

原文链接：http://www.cnblogs.com/guangyuan/p/7077517.html

版权

相关的属性声明应该以下面的顺序分组处理：

Positioning
Box model 盒模型
Typographic 排版
Visual 外观

Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。

其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。

.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* Visual */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* Misc */ opacity: 1; }