好了，下面用幾個(gè)剛剛試驗(yàn)的例子把這部分知識(shí)小記一下，為日后深入學(xué)習(xí)打基礎(chǔ)。

1.水平居中

設(shè)置父元素的text-align:center就可以了。

position不是absolute也不是fixed時(shí)（也就是并未脫離文檔流），margin-left=margin-right=auto,塊級(jí)元素width不是aoto，就可實(shí)現(xiàn)水平居中。

 1 2  3  4  5 18 19 20 header21 22 container23 24 25 

2.垂直居中

如果只有 一行本文，設(shè)置容器的line-height等于容器height。

 #container{ border: 1px solid blue; margin:0 auto; width: 300px; height: 300px; text-align: center; line-height: 300px; } 

如果是 多行文本至少要再加一個(gè)容器box把文本包起來，可以設(shè)置box的margin或者其父容器的margin。另一個(gè)方法就是使用vertical-align屬性，但這個(gè)屬性只對(duì)表格元素有效，所以需要設(shè)置box父元素display:table，設(shè)置box的display:table-cell。

要借助position和left、top幾個(gè)屬性。top表示向下平移，其他同理。position屬性有四個(gè)值：

static： 靜態(tài)定位，默認(rèn)值，在文檔流中不移動(dòng)，此時(shí)top等屬性無效。

relative：相對(duì)定位，相對(duì)自己原本位置定位，不脫離文檔流。

absolute：絕對(duì)定位，相對(duì)非static父元素定位，脫離文檔流（原來位置被別人占了）。

fixed：固定定位，相對(duì)瀏覽器窗口定位，也脫離文檔流，總用做購物車廣告等。

如果要垂直居中的元素設(shè)置成絕對(duì)定位，top和left在按容器和居中元素大小設(shè)置一下就可以了， 但前提是父元素是非static的。就像下面這樣。

      header content 

換幾種情況考慮，如果居中元素是相對(duì)定位的，就不要求父元素是非static的了。這固然好，但限制是不方便計(jì)算偏移量，偏移量是相對(duì)自己原位置算的，如果居中元素上方有兄弟節(jié)點(diǎn)也需要考慮進(jìn)去，麻煩的是如果兄弟節(jié)點(diǎn)大小不固定，恐怕只能用腳本動(dòng)態(tài)去算了。如果居中元素是固定定位的呢？考慮了一下，使用固定定位做垂直居中沒有什么特殊的優(yōu)勢。

3.拉伸

對(duì)于行內(nèi)元素、行內(nèi)塊級(jí)元素、浮動(dòng)元素、表格及絕對(duì)定位元的素：

對(duì)于塊級(jí)元素和絕對(duì)定位的元素：

      我是橫向收縮的label1 我是橫向拉伸的div1 

auto通常是默認(rèn)值，我們看到的非塊級(jí)元素橫向縱向多數(shù)是收縮的，如圖中l(wèi)abel。而塊級(jí)元素div默認(rèn)是橫向拉伸縱向收縮的，如圖中div1。瀏覽器通常會(huì)給元素加默認(rèn)樣式，所以元素并沒有完全與瀏覽器窗口貼上，如果添加*{margin:0;padding:0;}就顯示正常了。

對(duì)于絕對(duì)定位元素：

      我是縱向拉伸的div2 

auto與100%的尺寸差別

auto意味著元素尺寸是自動(dòng)調(diào)整的，width/height:100%會(huì)將元素尺寸拉伸到父元素大小，其外邊距、邊框等可能超過父元素。但table不會(huì)出現(xiàn)這種情況，因?yàn)楸砀竦膚idth/height規(guī)定的是table-cell的外部尺寸。

W3C的盒子模型中width/height規(guī)定的是content的尺寸，IE的盒子模型width/height規(guī)定的是含border的尺寸。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com