相关的属性声明应当归为一组,并按照下面的顺序排列:

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

.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;
}

声明顺序 (Bootstrap 编码规范)的更多相关文章

  1. Bootstrap编码规范

    黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的,也可以是你自己总结的.如果你发现本规范中有任何错误,敬请指正.通过 open an issue on GitHub为本规范添加或贡献内容. 不 ...

  2. 8.Bootstrap CSS编码规范

    Bootstrap CSS编码规范 本节的介绍内容为 Bootstrap 中的 CSS 编码规范. 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择 ...

  3. 7.bootstrap HTML编码规范

    Bootstrap HTML编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双 ...

  4. 前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享

    前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享 http://codeguide.bootcss.com/#html-doctype HTML 语法 HTML5 doctype ...

  5. HTML编码规则、CSS属性声明顺序--简介

    From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...

  6. 前端HTML与CSS编码规范

    HTML 语法 HTML5 doctype 语言属性(Language attribute) 字符编码 IE 兼容模式 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔(bool ...

  7. 编码规范(CSS)

    code { font-family: "PT Mono", Menlo, "Courier New", monospace; padding: 2px 4px ...

  8. Bootstrap-Other:CSS编码规范

    ylbtech-Bootstrap-Other:CSS编码规范 1.返回顶部 1. Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致 ...

  9. Bootstrap-Other:HTML编码规范

    ylbtech-Bootstrap-Other:HTML编码规范 1.返回顶部 1. Bootstrap HTML编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得 ...

随机推荐

  1. fragment第二次载入就报错

    1.布局中加入一个<fragment 标签,第一次载入的时候是正常的,第二次加载的时候,就直接crashed,退出 2.查到原因Caused by: java.lang.IllegalArgum ...

  2. html input type="button" 页面跳转

    <div class="message_text"> <p>你的申请已提交,请耐心等候哦!~</p><br /> <input ...

  3. hibernate动态创建数据库表名几种方式

    数据库中数据量很大, 但又不可以删除时同时又要优化程序检索数据时间. 答:方式有很多比如 创建数据库表分区,创建索引, 存储过程等; 我这里采用动态创建数据库表的方式. 完全可以在不创建表分区情况下实 ...

  4. OpenSSL重大漏洞-Heartbleed之漏洞利用脚本POC讲解

    OpenSSL Security Advisory [07 Apr 2014] ======================================== TLS heartbeat read ...

  5. sublime 配置

    Sublime Text 2是那种让人会一眼就爱上的编辑器,不仅GUI让人眼前一亮,功能更是没的说,拓展性目前来说也完全够用了,网上介绍软件的文章和推荐插件的文章也不少,而且很不错,大家可以去找找自己 ...

  6. Android支付接入(三):电信爱游戏支付

    原地址:http://blog.csdn.net/simdanfeg/article/details/9011977 注意事项: 1.电信要求必须先启动电信的闪屏界面 2.非网络游戏不允许有Inter ...

  7. valgrind基本使用

    1.valgrind是一个内存检测工具,类似的还有purify,insure++等 2.测试文件test.c test.c : main(){ int* a=new int[100]; return ...

  8. 【疯狂Java学习笔记】【理解面向对象】

    [学习笔记]1.Java语言是纯粹的面向对象语言,这体现在Java完全支持面向对象的三大基本特征:封装.继承.多态.抽象也是面向对象的重要组成部分,不过它不是面向对象的特征之一,因为所有的编程语言都需 ...

  9. codeforces #310 div1 C

    操作无论是U还是L,都会使原图形分裂成两个图形,且两个图形的操作互不影响 我们又发现由于操作点只可能在下斜线上,如果将操作按x排序 那么无论是U还是L,都会将操作序列完整分割成两半,且两个操作序列互不 ...

  10. 探讨read的返回值的三种情况

    http://blog.chinaunix.net/uid-23629988-id-3035613.html 今天探讨一个很看似简单的API “read”的返回值问题.read的返回值有哪几个值?每个 ...