Menu

• 第八章 內(nèi)邊距、邊框和外邊距
  • 寬度和高度
  • 外邊距 內(nèi)邊距 邊框
  • 背景圖像
  • background
• 第九章 顏色和背景
• 第十章 浮動(dòng)和定位
  • 浮動(dòng)規(guī)則
  • 浮動(dòng)元素負(fù)margin會(huì)超出其父元素內(nèi)邊界方法
  • 浮動(dòng)元素與父元素內(nèi)元素重疊時(shí)的規(guī)則
  • clear 圖像的左側(cè)和右側(cè)均不允許出現(xiàn)浮動(dòng)元素
  • 包含塊
  • 偏移屬性 top left right bottom
  • max-width、max-height、min-width、min-height
  • overflow 內(nèi)容溢出
  • clip 絕對(duì)定位元素的剪裁
  • visibility 能見度
• position 定位
  • 包含塊
  • 定位規(guī)則
  • 定位元素居中
  • 固定定位-fixed
  • 相對(duì)定位-relative
  • 絕對(duì)定位 - position
  • z-index 堆疊順序

寬度和高度

• width和height對(duì)行內(nèi)非替換元素不起作用，如span、em；

外邊距 內(nèi)邊距 邊框

• 如果外邊距的值是%，那么是根據(jù)父元素的width來計(jì)算值；
• 如果父元素的width發(fā)生改變，子元素的值也會(huì)跟著發(fā)生變化；
• 如果父元素沒有設(shè)置width，那%會(huì)根據(jù)頁面的大小來計(jì)算值；
• 如果margin和width都設(shè)了值，那么最后個(gè)margin強(qiáng)制變成auto，會(huì)接收剩余的寬度；

第九章 顏色和背景

• 如果本元素沒有設(shè)置color屬性，邊框的顏色是繼承父元素的文本（color屬性）顏色；
• 邊框粗細(xì)保留關(guān)鍵字對(duì)應(yīng)值：thin 2、medium 3、thick 5；

• 行內(nèi)元素的border上下邊框不影響行高，會(huì)覆蓋上下相鄰行的文本。但是左右相鄰的字不會(huì)覆蓋，文本會(huì)顯示在邊框前后；

  
  
  行內(nèi)元素邊框

背景圖像

• background-repeat 背景圖像重復(fù)方式：

  • repeat-x 橫向重復(fù)
  • repeat-y 縱向重復(fù)
  • no-repeat 不重復(fù)

• background-position

  • 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。
  • 左上角是 0% 0%。右下角是 100% 100%。
  • 如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是 50%。
  • 如果移動(dòng)10% 20%，需要根據(jù)元素width和height減去自身的width和height來計(jì)算移動(dòng)距離，比如width和height都是600px，圖形是200x200px，移動(dòng)10% 20%，就是向右（600-200）10%=40，向下（600-200）20%=80；
    
    background-position

• background-attachment

  • 屬性設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)；
  • scroll 默認(rèn)值。背景圖像會(huì)隨著頁面其余部分的滾動(dòng)而移動(dòng)。
  • fixed 當(dāng)頁面的其余部分滾動(dòng)時(shí)，背景圖像不會(huì)移動(dòng)。fixed是根據(jù)可視區(qū)域大小確定位置的。不是元素大??；

• background

  • tag {background: gray url(glassy-gray.jpg) 0 0 no-repeat fixed;}
  • tag {background: 背景顏色 背景圖片 position repeat方式 故不固定;}
  • 可以缺省參數(shù)，那么缺省的參數(shù)將以缺省參數(shù)的默認(rèn)值填充，默認(rèn)填充的屬性會(huì)覆蓋繼承的值；

第十章 浮動(dòng)和定位

• 如果要浮動(dòng)一個(gè)非替換元素，那么必須為非替換元素加width屬性，否則該元素的width將為0；

• 浮動(dòng)元素的包含塊是其最近的塊級(jí)祖先元素，浮動(dòng)元素本身也會(huì)生成一個(gè)塊級(jí)框，他會(huì)像塊級(jí)元素一樣展示和表現(xiàn)。

• 浮動(dòng)規(guī)則

  • 浮動(dòng)元素的外邊界不能超過父元素的內(nèi)邊界

    
    
    浮動(dòng)元素的外邊界不能超過父元素的內(nèi)邊界

  • 如果左邊已經(jīng)有一個(gè)浮動(dòng)元素框，又有一個(gè)浮動(dòng)框向左浮動(dòng)，也沒超過上一個(gè)浮動(dòng)框的下外邊界，那么右浮動(dòng)框會(huì)貼住左浮動(dòng)框；

    
    
    多框浮動(dòng)規(guī)則

  • 如果一個(gè)行框內(nèi)有一個(gè)浮動(dòng)圖像，這個(gè)浮動(dòng)圖像的最高點(diǎn)不能超過該行框最高點(diǎn)；
    浮動(dòng)圖像的最高點(diǎn)不能超過該行框最高點(diǎn)；

  • 如果一個(gè)行框里有多個(gè)浮動(dòng)元素，如果此行框剩余的寬度不足以容納后面的浮動(dòng)元素框的寬度，那么就需要靈起一行。

  • 如果浮動(dòng)元素框的寬度超過了父元素的內(nèi)邊界，那么就會(huì)超出去；

  • 父元素也可以設(shè)為浮動(dòng)元素；

  • 浮動(dòng)元素不會(huì)擋住文本；

• 浮動(dòng)元素負(fù)margin會(huì)超出其父元素內(nèi)邊界方法：

  1. 設(shè)置浮動(dòng)元素的margin為負(fù)數(shù)；
  2. 浮動(dòng)元素的width比父元素的width寬。height同理；

• 浮動(dòng)元素與父元素內(nèi)元素重疊時(shí)的規(guī)則

  1. 行內(nèi)元素框與一個(gè)浮動(dòng)元素重疊時(shí)，行內(nèi)元素的邊框、背景和內(nèi)容都在該浮動(dòng)元素之上顯示；

  2. 塊級(jí)元素框與一個(gè)浮動(dòng)元素重疊時(shí)，塊級(jí)元素的邊框背景在該浮動(dòng)元素之下顯示，而內(nèi)容在浮動(dòng)元素之上顯示；

     
     
     浮動(dòng)元素與父元素內(nèi)元素重疊時(shí)的規(guī)則

• clear 圖像的左側(cè)和右側(cè)均不允許出現(xiàn)浮動(dòng)元素：

  • 塊級(jí)元素設(shè)置clear后，塊級(jí)元素的上邊界會(huì)貼住浮動(dòng)元素的下邊界，有兩種方法可以把他們分開：
    1. 設(shè)置塊級(jí)元素的margin，但是需要算塊級(jí)元素下移了多少，然后加上要分開的距離。才能分開。
    2. 設(shè)置浮動(dòng)元素的margin，直接設(shè)置要分開的距離即可。

• 定位-position

  • 定位的類型：
    • static: 位置不變，會(huì)生成元素框。
    • relative：元素相對(duì)于原位置偏移，形狀不變， 原來的空間仍保留。
    • absolute：相對(duì)于包含塊定位；原來的空間被刪除， 不管定位前是什么類型的框， 定位后都會(huì)生成塊級(jí)框；其包含塊必須是最近的一個(gè)position值除了static之外的其它值的祖先元素；
    • fixed：相對(duì)視窗定位；其它同上；

• 偏移屬性 top left right bottom：
  • 在同時(shí)設(shè)置了4個(gè)邊的情況下，top 和 left 的權(quán)重高，會(huì)忽略right和bottom；
  • 如果不確定祖先元素的width和height，那可以用定位來設(shè)置該元素的大小，同時(shí)定位元素不能有width和height屬性；

span {position: absolute; top:0; right:50%; bottom:0; left:0; }

定位來設(shè)置該元素的大小

……神奇的分割線
- 偏移值可以設(shè)置為負(fù)值，那就會(huì)向反方向偏移；
- 如果值是auto，那么就是其原來的位置；

• max-width、max-height、min-width、min-height

  • max-width 定義元素的最大寬度：該屬性值會(huì)對(duì)元素的寬度設(shè)置一個(gè)最高限制。因此，元素可以比指定值窄，但不能比其寬。不允許指定負(fù)值。
  • max-height 屬性設(shè)置元素的最大高度：該屬性值會(huì)對(duì)元素的高度設(shè)置一個(gè)最高限制。因此，元素可以比指定值矮，但不能比其高。不允許指定負(fù)值。
  • min-width 屬性設(shè)置元素的最小寬度：該屬性值會(huì)對(duì)元素的寬度設(shè)置一個(gè)最小限制。因此，元素可以比指定值寬，但不能比其窄。不允許指定負(fù)值。
  • min-height 屬性設(shè)置元素的最小高度：該屬性值會(huì)對(duì)元素的高度設(shè)置一個(gè)最低限制。因此，元素可以比指定值高，但不能比其矮。不允許指定負(fù)值。

• overflow 內(nèi)容溢出

  • overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。
  • 這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll，不論是否需要，用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。
  • visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
  • hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。
  • scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
  • auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
    inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

• clip 絕對(duì)定位元素的剪裁

  • clip 屬性剪裁絕對(duì)定位元素。
  • 這個(gè)屬性用于定義一個(gè)剪裁矩形。對(duì)于一個(gè)絕對(duì)定義元素，在這個(gè)矩形內(nèi)的內(nèi)容才可見。出了這個(gè)剪裁區(qū)域的內(nèi)容會(huì)根據(jù) overflow 的值來處理。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能比內(nèi)容區(qū)小。

absolute_tag {clip: rect(0px, 100px, 100px, 0px);}

• visibility 能見度
  • visibility 屬性規(guī)定元素是否可見。提示：即使不可見的元素也會(huì)占據(jù)頁面上的空間。請(qǐng)使用 "display" 屬性來創(chuàng)建不占據(jù)頁面空間的不可見元素。
  • visible 默認(rèn)值。元素是可見的。
  • hidden 元素是不可見的。
  • collapse 當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，但是它不會(huì)影響表格的布局。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。如果此值被用在其他的元素上，會(huì)呈現(xiàn)為 "hidden"。

- position 定位

• 包含塊：

  • 根元素的包含塊是html或body（瀏覽器決定）；
  • 非根元素position值是“static” or “relative”，他的包含塊是由最近的祖先元素的內(nèi)容邊界構(gòu)成；
  • 非根元素position值是“absolute”，他的包含塊就是由最近的祖先元素的position值非“static”的內(nèi)容邊界組成；
  1. 如果這個(gè)祖先元素的塊級(jí)元素，包含塊為該祖先元素的內(nèi)邊距邊界（邊框）組成；
  2. 如果這個(gè)祖先元素的行內(nèi)元素，內(nèi)容邊界組成；
  3. 如果沒有祖先，則為初始包含塊（html）；

• 定位規(guī)則
  static：沒有定位，元素出現(xiàn)在正常的流中， 會(huì)生成元素框。
  relative：元素相對(duì)于原位置偏移，形狀不變， 原來的空間仍保留。
  absolute：相對(duì)于包含塊定位；原來的空間被刪除， 不管定位前是什么類型的框， 定位后都會(huì)生成塊級(jí)框；其包含塊必須是最近的一個(gè)position值除了static之外的其它值的祖先元素；
  fixed：相對(duì)視窗定位；其它同上；

• 定位元素居中
  定位元素， 如果left和right數(shù)值相同， 當(dāng)margin為auto， 就會(huì)水平居中。(元素左右定位好， 剩下的寬度可以設(shè)置margin)

• 固定定位-fixed（IE7之前都不支持）

  • 固定定位的包含塊是視窗，元素會(huì)完全從文檔流刪除。
  • 可以用fixed創(chuàng)建幀式界面
  • 可以用fixed在屏幕上放置一個(gè)“永久性”元素， 如一個(gè)小的鏈接列表， 或頁腳。

• 相對(duì)定位-relative

  • 相對(duì)定位元素偏移后原來所占空間不會(huì)消失。

• 絕對(duì)定位-absolute

  • 設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除，并相對(duì)于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。

  • 絕對(duì)定位的元素的位置相對(duì)于最近的已設(shè)置定位屬性不為“static”的祖先元素，如果祖先元素沒有position屬性不為static的，那么它的位置相對(duì)于最初的包含塊（html）。

    
    
    絕對(duì)定位-absolute

• z-index 堆疊順序
  • z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
  • 元素可擁有負(fù)的 z-index 屬性值。
  • Z-index 僅能在定位元素上奏效。
  • 該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。