淘寶段正淳的css筆記大全

更新時間：2007年10月25日 11:12:38 作者：

css代碼的簡寫

css縮寫的語法，對新手有一定幫助,老鳥就不用看了.

0px不需要單位，直接:margin:0
盒模型的縮寫，語法是margin:上右下左;.甚至可以簡寫成margin:上 (右左) 下,當然右左的值應該是一樣的
css屬性的最后一項”;”號省略。（不建議 ^_^）
字體寬度normal用400代替,bold用700代替。
16進制的色彩值，如果每兩位的值相同，可以縮寫一半，例如：#000000可以縮寫為#000;#0044DD可以縮寫為#04D;
border邊框的縮寫，語法是border:width style color,類似boder:1px solid red;
背景background的縮寫,語法是color image repeat attachment position.類似:background:#f00 url(background.gif) no-repeat fixed 0 0( 為什么我從不寫fixed呢?)
字體的縮寫,類似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最簡單font:12px “SimSun”.
list的屬性縮寫,語法list-style:square inside url(image.gif) ,不過一般咱們都不用.
想湊10條, 還真難.就把刪除無用換行符和空格算一個吧
一天大家在團隊中討論“未知圖片垂直居中”的問題，突發(fā)奇想用vertical-align:middle這個屬性來實現，于是抽了時間做了下面這個不成熟的例子：

CSS:

div{
  width:140px;
  height:140px;
  text-indent:-8px;
  text-align:center;
  line-height:138px;
  background:red;
  font-size:12px;
  *font-size:120px;
  *text-indent:-60px;
}
img{
  width:100px;
  height:100px;
  vertical-align:middle;
}
HTML:

< div>& nbsp;<img src="ipodclassics.jpg" alt="iPod classic" />
初衷是不想用position來做,畢竟大量的圖片顯示瀏覽器在渲染的時候會消耗較多的資源。

缺點是輸出了無意義的nbsp;, 而且font-size和font-indentd的計算公式不是很簡單(所以以上的數字都是湊的^_^).

后來小馬見了這個思路，用了點時間升級了代碼,用:after輸出代替了無趣nbsp ,代碼見下。

CSS:

.tb-p-c{
  display: block;
  width:140px;
  height:140px;
  line-height:140px;
  text-align:center;
  *font-size:123px;
}
.tb-p-c img{
  vertical-align:middle;
}
.tb-p-c:after {
  content: ".";
  visibility: hidden;
  font-size: 12px;
  margin-left: -5px;
}
HTML:

<a class="tb-p-c"><img src="jishi070912_2.jpg" /></a>
這樣子，惱人的nbsp消失了。大家對vertical-align:middle的渲染方式有了更進一步的了解了。還讓很多同志發(fā)現了after這個偽類還可以用來hack.

結果圓心又給CSS升了次級：

CSS:

.tb-p-c{
  display: table-cell;
  vertical-align:middle;
  width:140px;
  height:140px;
  text-align:center;
  *display: block;
  *font-size: 122px;
  background:red;
}
.tb-p-c img {
  vertical-align:middle;
}
這是第三次的升級，由于時間關系，沒有測試上面的代碼，原因是利用了display來渲染，感覺上還是會讓瀏覽器多次渲染，所以偶沒測試。
這次探討給了我們很多很多的收獲，相信如果有大家的參與，會有更多方式和我們沒發(fā)現的觀點。大伙別小氣，多發(fā)表回復，一起提高。