声明顺序 (Bootstrap 编码规范)
相关的属性声明应当归为一组,并按照下面的顺序排列:
- Positioning
- Box model
- Typographic
- 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 编码规范)的更多相关文章
- Bootstrap编码规范
黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的,也可以是你自己总结的.如果你发现本规范中有任何错误,敬请指正.通过 open an issue on GitHub为本规范添加或贡献内容. 不 ...
- 8.Bootstrap CSS编码规范
Bootstrap CSS编码规范 本节的介绍内容为 Bootstrap 中的 CSS 编码规范. 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择 ...
- 7.bootstrap HTML编码规范
Bootstrap HTML编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双 ...
- 前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享
前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享 http://codeguide.bootcss.com/#html-doctype HTML 语法 HTML5 doctype ...
- HTML编码规则、CSS属性声明顺序--简介
From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...
- 前端HTML与CSS编码规范
HTML 语法 HTML5 doctype 语言属性(Language attribute) 字符编码 IE 兼容模式 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔(bool ...
- 编码规范(CSS)
code { font-family: "PT Mono", Menlo, "Courier New", monospace; padding: 2px 4px ...
- Bootstrap-Other:CSS编码规范
ylbtech-Bootstrap-Other:CSS编码规范 1.返回顶部 1. Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致 ...
- Bootstrap-Other:HTML编码规范
ylbtech-Bootstrap-Other:HTML编码规范 1.返回顶部 1. Bootstrap HTML编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得 ...
随机推荐
- javaweb 在netbeans 上的部署问题
最近用netbeans去部署开发 javaweb程序!现总结一下自己的安装开发过程. 第一,在官网上下载netbeans时,有自带的tomcat,可以直接使用这个服务器,在我这儿这个自带的tomcat ...
- EXPLAIN PLAN获取SQL语句执行计划
一.获取SQL语句执行计划的方式 1. 使用explain plan 将执行计划加载到表plan_table,然后查询该表来获取预估的执行计划 2. 启用执行计划跟踪功能,即autotrace功能 3 ...
- 类的本质、description方法、SEL、NSLog输出增强
一.类的本质 1.类也是个对象 其实类也是一个对象,是Class类型的对象,简称“类对象” Class类型的定义 typedef struct objc_class *Class; 类名就代表着类对象 ...
- Myeclipse 2013 professional 破解,下载
昨天重装了系统,今天重新搭建开发环境,就顺便把Myeclipse升级到了2013,点击下载Myeclipse2013.惯例,需要破解Myeclipse2013,不过我发现我之前的破解Myeclipse ...
- 1048: [HAOI2007]分割矩阵 - BZOJ
Description 将一个a*b的数字矩阵进行如下分割:将原矩阵沿某一条直线分割成两个矩阵,再将生成的两个矩阵继续如此分割(当然也可以只分割其中的一个),这样分割了(n-1)次后,原矩阵被分割成了 ...
- 1017: [JSOI2008]魔兽地图DotR - BZOJ
Description DotR (Defense of the Robots) Allstars是一个风靡全球的魔兽地图,他的规则简单与同样流行的地图DotA (Defense of the Anc ...
- ExtJS4.2学习(七)EditorGrid可编辑表格(转)
鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...
- [LeetCode]Divide Two Integer
Divide two integers without using multiplication, division and mod operator. 思考:位运算.AC的时候真的想说一句“尼玛.. ...
- 1028-Digital Roots
描述 The digital root of a positive integer is found by summing the digits of the integer. If the resu ...
- ids & hdmi 原理
http://www.taiwanwebinar.com/zh_TW/STATIC/SITE/dwc_hdmi_tx.pdf http://blog.csdn.net/g_salamander/art ...