建议遵循以下顺序：
- 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
1.3 布局流程
为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：
1、必须确定页面的版心（可视区）， 我们测量可得知。
2、分析页面中的行模块，以及每个行?？橹械牧心？?。其实页面布局，就是一行行罗列而成
3、制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
4、然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个?？?。
