建議遵循以下順序：

1. 布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個(gè)寫，畢竟關(guān)系到模式）
2. 自身屬性：width / height / margin / padding / border / background
3. 文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他屬性（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 布局流程

為了提高網(wǎng)頁制作的效率，布局時(shí)通常有以下的布局流程，具體如下：

1、必須確定頁面的版心（可視區(qū)）， 我們測量可得知。

2、分析頁面中的行模塊，以及每個(gè)行模塊中的列模塊。其實(shí)頁面布局，就是一行行羅列而成

3、制作HTML結(jié)構(gòu)。我們還是遵循，先有結(jié)構(gòu)，后有樣式的原則。結(jié)構(gòu)永遠(yuǎn)最重要。

4、然后開始運(yùn)用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個(gè)模塊。