十八、 Padding影響寬度問(wèn)題
如果一組要嵌套的標簽之間需要些間距的話(huà)，那就留給位于里面的標簽的margin屬性吧，而不要去定義位于外面的標簽的padding
十九、 完美的單象素外框線(xiàn)表格
table{border-collapse:collapse;}
td{border:1px solid #000;}
二十、 如果文字過(guò)長(cháng),則將過(guò)長(cháng)的部分變成省略號顯示
<style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap”>
二十一、 并不是所有樣式都要簡(jiǎn)寫(xiě)
當樣式表前定義了如p{padding:1px 2px 3px 4px}時(shí)，在后續工程中又增加了一個(gè)樣式上補白5px，下補白6px。我們并不一定要寫(xiě)成p.style1{padding:5px 6px 3px 4px}?？梢詫?xiě)成p.style1{padding-top:5px;padding-right:6px;},你可能會(huì )感覺(jué)這樣寫(xiě)還不如原來(lái)那樣好，但你想沒(méi)想過(guò)，你的那種寫(xiě)法重復定義了樣式，另外你可以不必去找原來(lái)的下補白與左補白的值是多少！如果以后前一個(gè)樣式P變了話(huà)，你定義的p.style1的樣式也要變。(此種方法對后期修改樣式很重要)
二十二、 幾個(gè)常用到的CSS細節處理上的樣式
1）中文字兩端對齊：text-align:justify;text-justify:inter-ideograph;
2）固定寬度漢字截斷：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不讓其換行，不過(guò)只能處理文字在一行上的截斷，不能處理多行。)（IE5以上）FF不能，它只隱藏。
***萬(wàn)能強制換行：white-space:normal;word-break:break-all
禁止換行：white-space:nowrap
強制換行：word-wrap: break-word; word-break: normal;
.AutoNewline
{
/*word-break: break-all; 方法一 必須*/
/*word-wrap:break-word;overflow:hidden; 方法二 */
/*word-wrap:break-word; word-break: normal; 方法三 */
word-wrap:break-word; word-break:break-all;
}
.NoNewline
{
/*word-break: keep-all; 方法一 必須*/
white-space:nowrap;
}
3）固定寬度漢字（詞）折行：; word-break:break-all;（IE5以上）FF不能。
4）<acronym title=”輸入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠標放在前面的文字上看效果。這個(gè)效果在國外的很多網(wǎng)站都可以看到，而國內的少又少。
5）圖片設為半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5測試通過(guò)，FF未通過(guò)，這是因為這個(gè)樣式是IE私有的東西；
6）FLASH透明：選中swf,打開(kāi)原代碼窗口，在</object>前輸入<param name=”wmode” value=”transparent”> 以上是針對IE的代碼。
針對FIREFOX 給<embed> 標簽也增加類(lèi)似參數wmode=”transparent”
7）在做網(wǎng)頁(yè)時(shí)常用到把鼠標放在圖片上會(huì )出現圖片變亮的效果，可以用圖片替換的技巧，也可以用如下的濾鏡：
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
8）層在瀏覽器中居中對齊問(wèn)題
body { text-align: center }
#content { text-align: left; width: 700px; margin: 0 auto }
9)單行內容在層中垂直對齊問(wèn)題
# content{height:19px; line-height:19px; }缺點(diǎn)是要內容不要換行。
10）層在瀏覽器中垂直居中對齊問(wèn)題
缺點(diǎn)是：水平、垂直方向上不能出現滾動(dòng)條，只能是在一屏的情況下
其實(shí)解決的思路是這樣的：首們需要position:absolute;絕對定位。而層的定位，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以2。
如：一個(gè)層寬度是400，高度是300。使用絕對定位距離上部與左部都設置成50%。而margin-top的值為－150。margin-left的值為－200。這樣我們就實(shí)現了層垂直居中于瀏覽器的樣式編寫(xiě)。
請看實(shí)例代碼：
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid red;
}
11）CSS控制圖片自適應大小
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
聯(lián)系客服
