說明

• 源代碼

---

1.1 CSS屬性書寫順序(重點)

建議遵循以下順序:

1.布局定位屬性: display / position / float / clear / visibility / overflow (建議display第一個寫, 畢竟關系到模式)

2.自身屬性: width / height / margin / padding / border / background

3.文本屬性: color / font / text-decoration / text-align / verticle-align / white-space / break-word

4.其他屬性(CSS3)： content / cursor / border-radius / box-shadow/ text-shadow / background:linear-gradient…

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

• 以上只是建議,能滿足盡量滿足.

1.2 常見初始化

* {padding: 0;margin: 0;
}body {background-color: #f3f5f7;
}button {border: none;
}li {list-style: none;
}a {text-decoration: none;
}

1.3 顏色的語義

項目用到了藍白灰的組合

• 藍色:顏色代碼#00a4ff,主要負責突出顏色.或者狀態變化顯示的顏色
  
  
  
  
  
  藍色在項目中主要起強調作用

• 白色: 顏色代碼#fff,主要是把網頁劃分成主要的模塊

• 灰色: 顏色代碼#f3f5f7,整個網頁的背景色

1.4 可視區域

這個頁面的可視區是1200像素,每個可視區都要居中對齊,定義如下:

.w {width: 1200px;margin: auto;
}

大概中間的位置就是可視區域

1.5 常見陰影樣式

box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);

1.6 常見可以被繼承的屬性

• font-xxx
• line-xxx
• text-xxx
• color

1.7 清除浮動

• 當使用了浮動的盒子,沒有規定高度時,需要清除浮動
• 因為浮動的盒子脫離了標準流,如果后面有一個標準流的盒子,會被當前的浮動盒子所遮蓋

.box1 {width: 110px;
}
.b1-item {float: left;width: 50px;height: 50px;background-color: pink;
}
.box2 {width: 300px;height: 300px;background-color: purple;
}

<div class="box1"><div class="b1-item"></div><div class="b1-item"></div>
</div>
<div class="box2"></div>

說明:
box1脫離了文檔流,box2在文檔流內.因此它會在box1的位置

1.7.1 使用浮動時,讓盒子高度為0的情況

在使用浮動的時候,有時候不確定盒子中到底會有多少個元素.因此無法設置高度(或者是設置高度不很麻煩), 這個時候就不會設置盒子的高度.

1.7.2 常見的清除浮動的代碼

.clearfix:before,
.clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1;
}

• 只需要在使用浮動,但未設置高度的元素上添加類clearfix即可

<div class="box-bd clearfix">

1.8 關于padding

• 有一個寬高已經聲明好的盒子

div {width: 500px;height: 500px;background: pink;
}

• 當設置padding時,就會撐開盒子已有的寬高

div {width: 500px;height: 500px;padding: 50px;background: pink;
}

• 此時,占據文檔里的寬高是 600px / 600 px
• 需要寫出如下:

div {width: 400px;height: 400px;padding: 50px;background: pink;
}

1.9 字體大小的語義

• 16px: 一般用作頁面中的導航、鏈接(比較突出)
  
  
• 14px: 一般用作頁面中的內容(字數最多的)
  
• 12px: 用于補充說明內容