公告

a.piacere飾品 - FB分享 <
a.piacere飾品 - Google+
..............................................................................
x のため果然好厲害!‧分享
x 2008京都跨年+更新至090101‧遊記分享
x 我們家的李冰冰‧地球關燈一小時活動‧活動影片活動海報
..............................................................................


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

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的時候,內聯元素的高度寬度都是不可以設置的,其寬度就是自身文字或者圖片的寬度。

 

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

創作者介紹
創作者 tina1231 的頭像
tina1231

GREEN+TINA

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


留言列表 (1)

發表留言
  • icecream627
  • 你的天空好綠

    真的很不同
  • 是很不同,下定決心的不同。
    但是唯一不變的還是綠色。哈。

    tina1231 於 2009/03/16 13:36 回覆