老是想仰賴網路上的大大們似乎是不行的。
因為整理的連結已經有失連的了.....才驚覺不自己發奮用功整理不可了囧

css hank:

  • 區分IE6，IE7，firefox
    只能辨別*，不能辨別 ，支援_
    能辨別*，能辨別 !important，支援_
    不能辨別*，能辨別 !important，不支援_
      * _(下底線) !important
    IE6 o o x
    IE7 o x o
    firefox x x o
    所以寫法為firefox，IE7，IE6(順序都是firefox的寫在最前面，IE7的在中間，IE6的在最後面)|

    background:orange; *background:green; _background:blue;
  • IE下浮動元素雙倍邊距時的解決辦法
    將浮動元素後再加設display屬性設為inline。
    div1 {
    float:left; display:inline; margin-left:20px;
    }
  • 列表加上浮動在各瀏覽器中的解決
    CSS總是出人意表，而IE卻總是讓人意外。
    IE下的留白是由margin引起的，非IE的留白是由padding引起的（margin和padding大概為40px）。
    只要對清單元素進行了浮動，在IE中，列表前的默認序號（圓點或阿拉伯數字，即list-style-type）就會消失無形；而在非IE中卻是正常的。 原因就是margin和padding。
    因為預設情況下的序號位置list-style-position為outside，這就要求必須為序號出現預留位置，或margin或padding。 而要解決這個問題，就得想辦法讓序號出現不需要預留位置，預設outside是需要留白才能顯示的，所以就更換為inside。

    ul { list-style-position:inside; float:left; }
  • CSS裡定義hr，解決ie與ff會出現重覆線段問題
    hr{ height:1px;border:none;border-top:1px dashed #000;}
    hr預設高度即為1px;
    先將border設為取消，再從新對border下樣式!

常用:

  • ie中如何讓超出寬度的文字顯示為省略號？
    定義：overflow:hidden; width:xxx; white-space:nowrap; text-overflow:ellipsis;
  • 如何讓min-height兼容ie6?
    .min-height{min-height:100px; _height:100px;}
  • 區別display:none與visibility:hidden?
    相同的是display:none與visibility:hidden都可以用來隱藏某個元素；
    不同的是display:none在隱藏元素的時候，將其占位空間也去掉；而visibility:hidden只是隱藏了內容而已，其占位元空間仍然保留。
  • CSS的滑鼠為手形
    IE，設置CSS的滑鼠為手形，通常用：cursor：hand; 但這在Firefox下是無效的。
    cursor：pointer; 這在IE和Firefox下都是通用的。

基本觀念:

  • CSS宣告
    （document type definition）。這個經常被人刪掉，弄出一些奇怪的錯誤:( 如果使用dreamweaver作為編輯器，新建一個檔，這個就自動加上了，但是純手寫代碼的時候很容易忘記。)
    document type可以説明流覽器識別頁面是在哪一種標準下工作，是在html4.01，xhtml 1.0 traditional，或者xhtml1.0 strict....，每一種標準下，頁面的表現都會有一些差異，所以千萬不能丟（除非你僅僅是做一個很小的測試）。
    記得加上：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
  • 理解塊元素(block element)與內聯元素(inline element)元素
    塊元素(block element)與內聯元素(inline element)元素對於web製作是很重要的。
    依據元素顯示(display)時的表現，可以看出，所有可見元素中，不是塊元素的就是內聯元素。
    可以這樣想像一下，塊元素是一個大的框架，用於搭建大體結構，而內聯元素，就是用來組成細節和更具體的部分了。
    開始web製作時，通常都會用塊元素先搭出一個架子，確定大框架的結構，然後往裡面添加內聯元素，作為細節的構造。

    塊元素和內聯元素的表現有什麼不同呢？ 嘗試寫一點代碼就可以看出來區別了
    <div>我是塊元素div</div>
    <div>我是塊元素div</div>
    <p>我是塊元素p,<span>我是內聯元素span</span>,<span>我也是內聯元素span</span>,<em>我是內聯元素em</em></p>
    <ul>
    <li>ul,li 都是塊元素哦</li>
    <li>ul,li 都是塊元素哦</li>
    </ul>
    結果如下↓

    我是塊元素div
    我是塊元素div

    我是塊元素p,我是內聯元素span,我也是內聯元素span,我是內聯元素em

    • ul,li 都是塊元素哦
    • ul,li 都是塊元素哦

    區別就可以看出來了：一個塊元素占了一行，兩個塊元素不會在同一行，而內聯元素就不一樣了，它們在同一行上依次排開，遇到邊界才會換行。
    <div>,<p>,<h1>,...<h6>,<blockquote>都是塊元 素，<q>,<a>,<em>,<img>都是內聯元素。
    另外，像<meta>,<head>...這些不可見元素不在它們的範圍之內，這些不可見元素我們稱為頂級元素(top element)。

    在書寫CSS的時候，內聯元素的高度寬度都是不可以設置的，其寬度就是自身文字或者圖片的寬度。

 

............持續更新

arrow
arrow
    全站熱搜

    tina1231 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄