先來個冷笑話:一晚下班回家,一民警迎面巡邏而來。突然對我大喊:站住! 民警:int類型占幾個字節? 我:4個。 民警:你可以走了。 我感到很詫異。 我:為什么問這樣的問題? 民警:深夜還在街上走,寒酸苦逼的樣子,不是小偷就是程序員
作為一個后端程序員,之前知道的css都是皮毛,因為有專業的美工幫我們做靜態頁面,我們只需要做好頁面數據填充,專心寫邏輯代碼。現在有一種想去從事web前端開發了,盡管知道一些js的主要概念,原型,原型鏈,上下文,閉包之類的,但貌似都不是很深入,想想還是先從css開始吧,有時候很簡單的某些樣式卻總是寫的很痛苦。所以今天就看了css手冊,點滴積累吧。
什么是css hack
我自己的理解定義,就是針對不同的瀏覽器在對某些css屬性做解析的時候出現的差異,我們去coding css這些差異的過程。看了css hack知道有
1.條件hack
1 <!--[if <keywords>? IE <version>?]> 2 HTML代碼塊 3 <![endif]-->
<keywords>取值有
空
lt 小於
gt 大於
gte 大於或等於
lte 小於或等於
! 非
<version>取值有
可以是6/7/8/9...
例如 以下表示瀏覽器是小於ie7的:
1 <!--[if lt IE 7]> 2 <style> 3 .test2{width:100px;height:100px;background:blue} 4 </style> 5 <![endif]-->
以下例子是ie7的,這個是有效果的:
<!--[if IE 7]> <style> .test{color:red;} </style> <![endif]-->
2.屬性級hack
代碼如下:
#test{ color:#c30; /* For Firefox */ color:red\0; /* For Opera */ color:yellow\9; /* For IE8+ */ *color:blue; /* For IE7 */ _color:#ccc; /* For IE6 */ }
3.選擇符級hack
* html .test{color:#090;} /* For IE6 and earlier */ * + html .test{color:#ff0;} /* For IE7 */ .test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */ .test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */
還有一點小知識是讓一個內聯元素可以設置寬高 目前知道有display:block/inline-block 或者設置position:absoulte或者設置float等
最后 -music
白天總是很忙
晚上總很慌
都說前面有光
誰能給誰方向
看起來他和她似乎都很風光
低頭承認渺小不如堅強上場
每天問問自己
是否盡全力
不學百般心機
過程是獎勵
你一直站在光能照到的地方
只要相信自己其實每個人都一樣
多一個人和你分享
少一點難自己肩扛
我們都是笨小孩但不忘挺起胸膛
多一個人和你分享
少一點難自己肩扛
相信自己遲早會發光發亮
每天問問自己
是否盡全力
不學百般心機
過程是獎勵
你一直站在光能照到的地方
只要相信自己其實每個人都一樣
