說明

• 源代碼

---

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

建議遵循以下順序:

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

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 顏色的語義

項目用到了藍(lán)白灰的組合

• 藍(lán)色:顏色代碼#00a4ff,主要負(fù)責(zé)突出顏色.或者狀態(tài)變化顯示的顏色
  
  
  
  
  
  藍(lán)色在項目中主要起強調(diào)作用

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

• 灰色: 顏色代碼#f3f5f7,整個網(wǎng)頁的背景色

1.4 可視區(qū)域

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

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

大概中間的位置就是可視區(qū)域

1.5 常見陰影樣式

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

1.6 常見可以被繼承的屬性

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

1.7 清除浮動

• 當(dāng)使用了浮動的盒子,沒有規(guī)定高度時,需要清除浮動
• 因為浮動的盒子脫離了標(biāo)準(zhǔn)流,如果后面有一個標(biāo)準(zhǔn)流的盒子,會被當(dāng)前的浮動盒子所遮蓋

.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在文檔流內(nèi).因此它會在box1的位置

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

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

1.7.2 常見的清除浮動的代碼

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

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

<div class="box-bd clearfix">

1.8 關(guān)于padding

• 有一個寬高已經(jīng)聲明好的盒子

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

• 當(dāng)設(shè)置padding時,就會撐開盒子已有的寬高

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

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

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

1.9 字體大小的語義

• 16px: 一般用作頁面中的導(dǎo)航、鏈接(比較突出)
  
  
• 14px: 一般用作頁面中的內(nèi)容(字?jǐn)?shù)最多的)
  
• 12px: 用于補充說明內(nèi)容
  

總結(jié)

以上是生活随笔為你收集整理的css --- [练手小项目]样式小结(字体、颜色的语义 清除浮动的使用)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。