css定位和浮動

1.css中一切元素皆爲框。div、p、h1等爲塊框；span、strong等爲行內框，（在文本中每一行會被自動默認爲行框，行框和行內框是不同的概念）。經過display能夠改變框的類型，行內框經過display：block能夠變爲塊框，塊框經過display:inline-block能夠變爲行內框，display:inline能夠變爲內聯元素，diplay:none能夠變的沒有框不顯示不佔文檔空間（）。

2.css機制有3種：普通流、浮動和絕對定位。

3.css位置有5種：

• static：靜態。元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。
• relartive：相對定位。相對本身原有的位置進行定位，位置變化後，原框仍在文本流中佔有空間。
• absolute：絕對定位。相對以定位了（級級上尋）的父框進行定位，位置變化後，原框不在文本流中站有空間。
• inherit：繼承定位。繼承父框的定位屬性。任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
• fixed:固定定位。相對於瀏覽器屏幕視窗進行定位。

4.

• 塊內元素的溢出用overflow來控制：auto,scroll,hidden。
• 當一幅圖像的尺寸大於包含它的元素時,"clip" 屬性容許您規定一個元素的可見尺寸，這樣此元素就會被修剪並顯示爲這個形狀。clip 屬性剪裁絕對定位元素。clip:rect(0px 50px 200px 0px)。
• z-index 屬性設置元素（定位元素上奏效）的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。
• clear 屬性規定元素的哪一側不容許其餘浮動元素。
• 設置元素的垂直對齊方式。vertical-align 定義行內元素的基線相對於該元素所在行的基線的垂直對齊。容許指定負長度值和百分比值。這會使元素下降而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

  值	描述
  baseline	默認。元素放置在父元素的基線上。
  sub	垂直對齊文本的下標。
  super	垂直對齊文本的上標
  top	把元素的頂端與行中最高元素的頂端對齊
  text-top	把元素的頂端與父元素字體的頂端對齊
  middle	把此元素放置在父元素的中部。
  bottom	把元素的頂端與行中最低的元素的頂端對齊。
  text-bottom	把元素的底端與父元素字體的底端對齊。
  length
  %	使用 "line-height" 屬性的百分比值來排列此元素。容許使用負值。
  inherit	規定應該從父元素繼承 vertical-align 屬性的值。

 

 附：

1.內聯元素和塊級元素：

內聯元素是不能夠控制寬高，margin等，在同一行顯示，不換行；
塊級元素能夠控制寬高，margin等,而且會換行。
inline:元素會被顯示爲內聯元素，不換行。
block:元素會被顯示爲塊元素，換行。
inline-block:即便元素以塊級的形式出如今行內。IE6不能用。

 2.塊框、行內框、行框、無名塊框

• 塊框：div、h1 或 p 元素經常被稱爲塊級元素。這意味着這些元素顯示爲一塊內容，即「塊框」。
• 無名塊框:可是在一種狀況下，即便沒有進行顯式定義，也會建立塊級元素。這種狀況發生在把一些文本添加到一個塊級元素（好比 div）的開頭。即便沒有把這些文本定義爲段落，它也會被看成段落對待。在這種狀況下，這個框稱爲無名塊框。塊級元素的文本行也會發生相似的狀況。沒法直接對無名塊或行框應用樣式，由於沒有能夠應用樣式的地方（注意，行框和行內框是兩個概念）。
• 行內框：span 和 strong 等元素稱爲「行內元素」，這是由於它們的內容顯示在行中，即「行內框」。
• 行框：行內框在一行中水平佈置。可使用水平內邊距、邊框和外邊距調整它們的間距。可是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行造成的水平框稱爲行框（Line Box），行框的高度老是足以容納它包含的全部行內框。不過，設置行高能夠增長這個框的高度。