寫在從深圳返家的途中焚碌。呆在一個地方已經(jīng)至少兩個鐘了，看來十一要在路上與眾位萍水相逢的同乘們一起度過了十电。

好了鹃骂，話不多說畏线，進(jìn)入正題。下面來說說我們常用的CSS

(1) 透明:

filter:alpha(opacity=50); /* ie 有效*/
-moz-opacity:0.5; /* Firefox 有效*/
opacity: 0.5; /* 通用蒿叠，其他瀏覽器 有效*/
在IE6中DIV透明的方法一般用filter栈虚；
.haorooms{opacity: 0; cursor:pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}

(2) 陰影：

基本語法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

對象選擇器 {box-shadow:[投影方式] X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色}

陰影類型：此參數(shù)可選魂务。如不設(shè)值粘姜，默認(rèn)投影方式是外陰影孤紧；如取其唯一值“inset”，其投影為內(nèi)陰影臭猜；

①X-offset:陰影水平偏移量蔑歌，其值可以是正負(fù)值次屠。如果值為正值劫灶，則陰影在對象的右邊本昏，其值為負(fù)值時凛俱，陰影在對象的左邊；

②Y-offset:陰影垂直偏移量朱监，其值也可以是正負(fù)值赫编。如果為正值擂送，陰影在對象的底部嘹吨，其值為負(fù)值時，陰影在對象的頂部萍聊；

③陰影模糊半徑：此參數(shù)可選寿桨，亭螟，但其值只能是為正值骑歹，如果其值為0時默伍，表示陰影不具有模糊效果衰琐，其值越大陰影的邊緣就越模糊；

④陰影擴(kuò)展半徑：此參數(shù)可選狸剃，其值可以是正負(fù)值钞馁，如果值為正僧凰，則整個陰影都延展擴(kuò)大训措，反之值為負(fù)值時绩鸣，則縮醒轿拧捡多；

⑤陰影顏色：此參數(shù)可選局服。如不設(shè)定顏色淫奔，瀏覽器會取默認(rèn)色唆迁，但各瀏覽器默認(rèn)取色不一致鳞溉，特別是在webkit內(nèi)核下的safari和chrome瀏覽器下表現(xiàn)為透明色熟菲，在Firefox/Opera下表現(xiàn)為黑色（已驗(yàn)證）抄罕，建議不要省略此參數(shù)于颖。

-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.2);

⑥瀏覽器的兼容：

⑦為了兼容各主流瀏覽器并支持這些主流瀏覽器的較低版本做入，在基于Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時同衣，我們需要將屬性的名稱寫成-webkit-box-shadow的形式彩郊。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。

(3)每逢大的災(zāi)難的時候恕出，很多網(wǎng)站變成了灰色金蜀，如何讓網(wǎng)站快速變灰？css代碼是很簡單的尝胆，用的是css的filter功能。

示例：

html {
filter: grayscale(100%);/*IE瀏覽器*/
-webkit-filter: grayscale(100%);/*谷歌瀏覽器*/
-moz-filter: grayscale(100%);/*火狐*/
-ms-filter: grayscale(100%);/**/
-o-filter: grayscale(100%);/**/
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/**/
-webkit-filter: grayscale(1);/*谷歌瀏覽器*/
}

有一些網(wǎng)站FLASH動畫的顏色不能被CSS濾鏡控制贪染，可以在FLASH代碼的和之間插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

(4) DIV可編輯杭隙，就是讓一個div變成一個類似input輸入框的效果痰憎。

在div中添加contentEditable="true" 屬性就可以了，如下：

<div id="div1" contentEditable="true" ></div>
<div id="div2" contentEditable="true" ></div>
<div contentEditable="true" id="div3"></div>

(5) 有些網(wǎng)站為了不讓用戶復(fù)制涡拘，設(shè)置了div禁止選擇的功能，設(shè)置如下屬性：

unselectable="on"
onselectstart="return false;"
代碼如下：
<div unselectable="on" onselectstart="return false;">
sdfsdfswerwer324234234234
</div>

(6) CSS 中form表單兩端對齊

做form表單的時候据德，前面經(jīng)常有姓名鳄乏，年齡，公司名稱等等棘利，有的是2個字橱野，有的是4個字，如何讓字對齊呢善玫？有的人的做法是打幾個空格水援，但是這樣不是很準(zhǔn)確，最好的辦法是如下：

css代碼:

.test1 {
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
HTML代碼：
<div class="box1">
<div class="test1">姓 名</div>
<div class="test1">姓 名 姓 名</div>
<div class="test1">姓 名 名</div>
<div class="test1">所 在 地</div>
<div class="test1">工 作 單 位</div>
</div>

(7) input聲音錄入按鈕茅郎，（僅支持谷歌）

/*添加 x-webkit-speech 屬性就可以了蜗元。*/
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="輸入關(guān)鍵詞" x-webkit-speech>

(8) 給input的placeholder設(shè)置顏色

方法示例如下：

::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}

(9) CSS :after 和：before選擇器

after選擇器通常在clear中使用惯豆，用法如下：

.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}

寫了這個clearfix，可以讓外層div包裹整個內(nèi)層瘪匿，符合谷歌閉合機(jī)制。

也可以在某個元素前面或者后面追加粉寞，例如：

p:after
{
content:"haorooms：-";
background-color:yellow;
color:red;
font-weight:bold;
}

每個p標(biāo)簽后面都加了一個 -haorooms

(10)超出長度顯示省略號

①單行文本顯示...

一般要指定寬度巧还，然后給如下四個屬性褒搔。

display:bolck;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

案例代碼：

.haorooms{width:200px;display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

②多行文本顯示....

主要屬性-webkit-line-clamp

p {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

這個屬性比較合適WebKit瀏覽器或移動端（絕大部分是WebKit內(nèi)核的）瀏覽器。

跨瀏覽器兼容的方案

比較靠譜簡單的做法就是設(shè)置相對定位的容器高度，用包含省略號(…)的元素模擬實(shí)現(xiàn)；

p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
// background:url(和網(wǎng)頁背景顏色一樣的一張背景圖) repeat-y;
background-color:#fff;
}

注意：

? 1) height高度正好是line-height的3倍芒澜；

? 2) 結(jié)束的省略好用了半透明的png做了減淡的效果，或者設(shè)置背景顏色；

? 3) IE6-7不顯示content內(nèi)容，所以要兼容IE6-7可以是在內(nèi)容中加入一個標(biāo)簽浩聋，比如用...去模擬闸与；

? 4) 要支持IE8拷邢，需要將::after替換成:after欲虚；

(11)CSS強(qiáng)制換行和不換行

①自動換行：
div{
word-wrap: break-word;
word-break: normal;
}
②強(qiáng)制英文單詞斷行：
div{
word-break:break-all;
}
③強(qiáng)制不換行：
div{
white-space:nowrap;
}

(12) CSS 圓角

IE 9、Opera 10.5、Safari 5妄壶、Chrome 4和Firefox 4伊磺，都支持上述的border-radius屬性。早期版本的Safari和Chrome，支持-webkit-border-radius屬性复隆，早期版本的Firefox支持-moz-border-radius屬性拨匆。 目前來看涮雷，為了保證兼容性，只需同時設(shè)置-moz-border-radius和border-radius即可。

-moz-border-radius: 15px;
border-radius: 15px;

（注意：border-radius必須放在最后聲明嘶是，否則可能會失效矾湃。）

另外，早期版本Firefox的單個圓角的語句，與標(biāo)準(zhǔn)語法略有不同矢渊。

-moz-border-radius-topleft（標(biāo)準(zhǔn)語法：border-top-left-radius）
-moz-border-radius-topright（標(biāo)準(zhǔn)語法：border-top-right-radius）
-moz-border-radius-bottomleft（標(biāo)準(zhǔn)語法：border-bottom-left-radius）
-moz-border-radius-bottomright（標(biāo)準(zhǔn)語法：border-bottom-right-radius）

-----------------------------------------------------------------------------------------------------------------

(13) IE6 中png背景透明的最好方法

說到IE6继准，很多前端都很頭大，我剛剛開始做網(wǎng)頁的時候矮男，也為之痛苦不堪移必。其中，我也總結(jié)了一下IE6中常見的問題毡鉴，想margin了崔泵，padding了，ul li中點(diǎn)的顯示問題了,彈出層被select選擇框擋住了猪瞬，等等憎瘸。要查看詳情，后續(xù)文章到時候有時候會把這些整理上去吧陈瘦。（瀏覽器兼容問題的一些總結(jié)）可以看下幌甘！

本文的題目是IE6中png背景透明最好的方法，好吧痊项，網(wǎng)上有很多锅风，但是實(shí)踐下來，這種DDPngMin.js效果最好鞍泉。

應(yīng)用方式：（網(wǎng)站尾部加上如下代碼）

<!--[if IE 6]>
<script src="js/DDPngMin.js"></script>
<script>DD_belatedPNG.fix('.ad_img img,#banner_ctr ul');</script>
<![endif]-->

引進(jìn)這個DDPngMin.js皱埠。后面是針對某個png做處理。

DDPngMin.js 下載:http://www.haorooms.com/uploads/images/DDPngMin.js

(14) css3彈性盒子

#haorooms ul { //父親
? display: -moz-box;
? display: -webkit-box;
? display: box;
? -moz-box-orient: horizontal;
? -webkit-box-orient: horizontal;
? box-orient: horizontal;
? }
? #haorooms ul li{ //兒子設(shè)置
? -moz-box-flex: 1;
? -webkit-box-flex: 1;
? box-flex: 1;
? float:none;
}

關(guān)于css3彈性盒子模型之box-flex塞弊，我在博客中暫時沒有寫相關(guān)文章漱逸，因?yàn)檫@個屬性不支持IE，所以我很少用到游沿。

我一般用別的方法來代替這個屬性饰抒。想達(dá)到彈性盒子的要求，jquery mobile 有一套網(wǎng)格布局法诀黍，很不錯袋坑，支持IE的，有時間可以參考一下眯勾，或者研究一下他們是怎么寫的枣宫，參照他們的方法可以自己改寫一下！

關(guān)于彈性盒子式的布局吃环，大家也可以看下bootstrap,bootstrap提出柵格類的一個說法也颤，你引進(jìn)他的css之后，可以用col-mid-*來進(jìn)行布局郁轻。

例如：

<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>

各占一半翅娶！

<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>

前面的是整個寬度的三分之二文留，后面是整個寬度的三分之一！

具體可以看看bootstrap的樣式解釋：http://v3.bootcss.com/css/

(15) CSS3的一些前綴總結(jié)

①css3為了更好的兼容多個瀏覽器竭沫，通常前面加一大堆前綴燥翅，有時候感覺很煩，前綴也容易忘記或者漏掉蜕提。下面總結(jié)一下森书！
-webkit /*為Chrome/Safari*/
-moz /*為Firefox*/
-ms /*為IE*/
-o /*為Opera*/
②以旋轉(zhuǎn)為例
-webkit-transform:rotate(-3deg); /*為Chrome/Safari*/
-moz-transform:rotate(-3deg); /*為Firefox*/
-ms-transform:rotate(-3deg); /*為IE*/
-o-transform:rotate(-3deg); /*為Opera*/
transform:rotate(-3deg); /*為nothing*/
③以border-radius為例(本文上面案例15，CSS 圓角已經(jīng)提過圓角的問題谎势，下面我們再來重提一下)：
-moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
④FF4凛膏、Saf5以及Chrome都支持border-radius屬性了，我們就沒有必要寫以上兩條了脏榆，代碼變成：
border-radius: 12px;

? 所以有些常用的CSS3效果译柏，由于瀏覽器都支持了，就不需要前綴姐霍，但是為了保險起見，你也可以加上前綴典唇！

(16) css3的box-sizing

給了兩個并排帶邊框的div百分比寬度镊折，假如不用box-sizing，邊框的寬度會在行內(nèi)顯示介衔。用box-sizing：border-box,可以去除邊框的占位恨胚。

瀏覽器支持IE9以上及火狐、谷歌炎咖、Opera等等赃泡。

①案例如下：
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">這個 div 占據(jù)左半部分。</div>
<div class="box">這個 div 占據(jù)右半部分乘盼。</div>
</div>
</body>
②語法：
box-sizing: content-box|border-box|inherit;

(17) 模糊遮罩效率升熊，模糊濾鏡效果

-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);

Blur：模糊效果。使選擇區(qū)內(nèi)的影像產(chǎn)生虛化的效果绸栅，可以平滑的轉(zhuǎn)換影像中的生硬部分级野。

在這里跟大家解釋說明一下，寫于返家的路上其實(shí)指的是這一片簡文的撰寫粹胯，其實(shí)里面的內(nèi)容我之前就早已準(zhǔn)備好蓖柔。

本文的內(nèi)容都是我平時摘自網(wǎng)上或是在工作學(xué)習(xí)中自己記下的筆記。有通用的风纠，有特殊的况鸣，也許會對大家或多或少有點(diǎn)點(diǎn)幫助吧。

嘿嘿竹观，這也算是經(jīng)驗(yàn)的共享镐捧，希望大家多多支持。也希望大家能夠一起多多交流～