css代碼的簡(jiǎn)寫

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

0px不需要單位，直接:margin:0 
盒模型的縮寫，語(yǔ)法是margin:上 右 下 左;.甚至可以簡(jiǎn)寫成margin:上 (右左) 下,當(dāng)然右左的值應(yīng)該是一樣的 
css屬性的最后一項(xiàng)”;”號(hào)省略。（不建議 ^_^） 
字體寬度normal用400代替,bold用700代替。 
16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤梢钥s寫一半，例如：#000000可以縮寫為#000;#0044DD可以縮寫為#04D; 
border邊框的縮寫，語(yǔ)法是border:width style color,類似boder:1px solid red; 
背景background的縮寫,語(yǔ)法是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,可以省略到最簡(jiǎn)單font:12px “SimSun”. 
list的屬性縮寫,語(yǔ)法list-style:square inside url(image.gif) ,不過(guò)一般咱們都不用. 
想湊10條, 還真難.就把刪除無(wú)用換行符和空格算一個(gè)吧
一天大家在團(tuán)隊(duì)中討論“未知圖片垂直居中”的問(wèn)題，突發(fā)奇想用vertical-align:middle這個(gè)屬性來(lái)實(shí)現(xiàn)，于是抽了時(shí)間做了下面這個(gè)不成熟的例子：

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來(lái)做,畢竟 大量的圖片顯示瀏覽器在渲染的時(shí)候會(huì)消耗 較多的資源。

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

后來(lái)小馬見了這個(gè)思路，用了點(diǎn)時(shí)間升級(jí)了代碼,用:after輸出代替了無(wú)趣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消失了。大家對(duì)vertical-align:middle的渲染方式有了更進(jìn)一步的了解了。還讓很多同志發(fā)現(xiàn)了after這個(gè)偽類還可以用來(lái)hack.

結(jié)果圓心又給CSS升了次級(jí)：

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;
} 
這是第三次的升級(jí)，由于時(shí)間關(guān)系，沒(méi)有測(cè)試上面的代碼，原因是利用了display來(lái)渲染，感覺(jué)上還是會(huì)讓瀏覽器多次渲染，所以偶沒(méi)測(cè)試 。
這次探討給了我們很多很多的收獲，相信如果有大家的參與，會(huì)有更多方式和我們沒(méi)發(fā)現(xiàn)的觀點(diǎn)。大伙別小氣，多發(fā)表回復(fù)，一起提高。

最新評(píng)論