分享 | 常見的CSS+DIV問題整理



這次想跟大家分享的主題是常見的CSS+DIV的問題,這些是我自己曾經碰過,或是工作上、朋友會問我的問題,我想也許許多CSS的初學者也會有這些疑惑,所以把它做個整理。

另外要強調的一點是,我的工作=\=css人員,不是每天都在那邊寫css啦~。我的工作是網頁設計(設計是個多麼美妙的詞阿),所以會大量用到PhotoShop以及Flash軟體,拜託別再問我「你是不是每天都在寫CSS」這種問題,我不想回答了 :mrgreen:

Q.如何讓DIV區塊居中?

A.假設你的DIV總寬度是900px,我們可以這樣寫:

居中的區塊

Q.為什麼IE對於margin的算法有些不同?

A.當我們針對div設定了浮動(float)屬性之後,IE瀏覽器就會將margin加倍計算。例如我們設定margin-left:5px;,IE會算成10px。解決的方法是在該浮動區塊加上「display:inline」即可解決這個問題。

Q.為什麼設定超連結的visited會失效?

A.超連結的樣式有一定的順序,如果你同時要設定visited(訪問過的連結),或是active(作用中的連結),必須要按照這個順序設定:a:link→a:visited→a:hover→a:active。我們不用死記順序,可以這麼記:love、hate

Q.如何在圖片上方放置flash?

A.有時候我們會看到有人的圖片上有flash的光圈特效,如果你要使用該特效,請將圖片設定為背景圖,然後在上方插入flash,記得要將flash設置為透明屬性:

Q.在火狐瀏覽器設定最小高度

A.一般對區塊設定高度(height)後,在火狐瀏覽器中如果輸入超過高度的文字,區塊不會被撐開。如果我們希望可以設定最小高度,同時又希望文字過多可以撐開區塊的話,可以將你的區塊改寫為:

div {
height:auto!important;
height:100px;
min-height:100px;
}

以上幾項常見的問題,供大家參考。如果還有其他問題,歡迎留言告訴我~~

引用網址:

FACEBOOKs COMMENT():

EVERYBODYs COMMENT:

  • 1
    馬諦斯 (LV.37) // 2009.09.14 16:08

    你是不是每天都在寫CSS? (被圍毆)
    嗯...謝謝分享

    老師! (舉手)我...我..我沒有問題

  • 2
    konekoya (LV.2) // 2009.09.15 21:10

    寫的真好:D

    不過,我想補充一下第二點:

    在IE版本5/6 中設定元素浮動為左時(float: left)並設定左邊的margin(margin-left),IE會加倍(double)計算margin的值。

    解決方式就如Muki所說的:D

    詳細一點的說明可以參考:http://www.positioniseverything.net/

  • 3
    HeChian (LV.9) // 2009.09.16 23:37

    別用!important,會破壞掉CSS的優先權
    有關CSS優先權可以Google://CSS+Priority

  • 4
    muki (LV.1145) // 2009.09.19 20:35

    @ 馬諦斯
    汗....

    @konekoya
    謝謝你的補充唷^^~~~

    @ HeChian
    對於火狐的hack,我一直都是用!important去解決的
    也謝謝你提供更棒的方法

  • 5
    弦夜 (LV.3) // 2009.09.30 22:05

    每次點進來版面都不一樣。
    看了文章之後都覺得好友深度(自卑)

  • 6
    muki (LV.1145) // 2009.09.30 22:12

    @ 弦夜
    囧....換版面純粹是因為我善變(汗
    我還有日記可以看啦 哈哈

  • 7
    弦夜 (LV.3) // 2009.09.30 22:22

    最近也要認真開始學做 WordPress 版面了……
    (Discuz成功之後,要來挑戰WordPress...)

  • 8
    marsnow (LV.1) // 2009.10.10 20:42

    看完之後還是有些不明白,設定超連結那部分的意思是visited和active兩個單獨按照順序排列設定,還是四個一起寫?

    我的問題會不會太奇怪XD

  • 9
    HeChian (LV.9) // 2009.10.19 11:59

    To marsnow:
    基本上那個順序是指超連結被觸發的事件順序
    a:link→a:visited→a:hover→a:active
    link => 沒點過的
    visited => 點過的
    hover => 滑鼠移動到上面的
    active => 點到的當下

    因此,如果你把visited與active的順序反過來的話
    active的樣式就可能會被visited取代掉


  • LEAVE YOUR COMMENT:




      :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:


     
    字體大小: 小字型 12px大字型 15px
    ▲ back to top