[笔记]CSS样式声明顺序
来自Bootstrap中文网编程规范
相关的属性声明应当归为一组,并按照下面的顺序排列:
- Positioning
- Box model
- Typographic
- Visual
.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;
}
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。
完整的属性列表及其排列顺序请参考 Recess。
[笔记]CSS样式声明顺序的更多相关文章
- HTML编码规则、CSS属性声明顺序--简介
From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...
- CSS学习笔记之样式声明
目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...
- HTML 学习笔记 CSS样式(简介和语法)
CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...
- CSS样式覆盖顺序
有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码 #navigator { height: 100%; width: 200; position: ...
- HTML 学习笔记 CSS样式(框模型)
CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述
- HTML 学习笔记 CSS样式(相对定位 绝对定位)
CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...
- HTML 学习笔记 CSS样式(外边框 外边框合并)
CSS外边距 围绕在元素边框的空白区域就是外边距 设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...
- HTML 学习笔记 CSS样式(背景)
背景色 可以使用background-color属性为元素设置背景色 这个属性接受任何合法的颜色值. 可以使用background-image属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...
- HTML 学习笔记 CSS样式(定位)
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
随机推荐
- Nhiberate (二) 搭项目
使用: visual studio 2015 ;SQL SERVER 2012. 参考.测试可用 其中有点不太一样的地儿, ISession 的泛型方法: 用了 QueryOver<>,转 ...
- Dashboard索引缺失、查询不到endpoint或counter
触发graph的索引全量更新.补救手工操作带来的异常.触发方式为,运行curl -s "http://$hostname:$port/index/updateAll",其中$hos ...
- Talend 从Excel导入Saleforce数据(一) 直接从salesforce lookup 性能的噩梦
速度的瓶颈是在查询Sales force是否有该电话号码的联系人资料. TMap属性的 lookup Model, 如果用Load Once, 则会把SaleForce的contact全部load下来 ...
- bootstrap入门-2.固定的内置样式
HTML5文档类型(Doctype) Bootstrap使用了一些HTML5元素和CSS属性,所以需要使用HTML5文档类型. <!DOCTYPE html> <html> . ...
- java 读取excel poi 和cell 方法
http://poi.apache.org/spreadsheet/quick-guide.html http://www.aspose.com/docs/display/cellsjava/Eval ...
- SQLDMO知识总结
SQLDMO(SQL Distributed Management Objects) 参考手册:http://technet.microsoft.com/en-us/library/aa312550( ...
- 怎么在php里面利用str_replace防注入
<php /** * 安全过滤函数 * * @param $string * @return string */ function safe_repla ...
- Unix/Linux编程实践教程(0:文件、终端、信号)
本来只打算读这本书socket等相关内容,但书写得实在好,还是决定把其余的内容都读一下. 阅读联机帮助的一个示例: open系统调用: read系统调用: Unix的time: 上面的printf可以 ...
- React,js实现分页的案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- ubuntu下gcc、g++和gfortran版本切换
第一步:用 which gcc.which g++和which gfortran查看位置,我的显示结果为:/usr/bin/gcc:/usr/bin/g++和/usr/bin/gfortran 第二部 ...