第一篇：黑馬程序員php培訓(xùn)：4天帶你搞定CSS視頻教程(8)

當(dāng)父元素?zé)o法測(cè)定子元素的高度

盒子里面的內(nèi)容浮動(dòng)起來(lái)了，那么他就脫離標(biāo)準(zhǔn)流了，所以這時(shí)候父元素盒子就不能精確的檢測(cè)到它內(nèi)部的內(nèi)容到底有多高，父元素會(huì)變成一根線，完全沒(méi)背撐開(kāi)；

解決：給父元素自動(dòng)overflow:hidden，,這個(gè)屬性可以觸發(fā)盒子的haylayout屬性（是否是布局），就可以精確檢測(cè)一下內(nèi)部的高度；盒子就會(huì)自動(dòng)撐開(kāi)了

腳下留心：overflow可以觸發(fā)除了ie6以外的瀏覽器的haslayout屬性。Zoom:1可以觸發(fā)ie6的haslayout屬性，通過(guò)zoom:1來(lái)兼容ie6.例題：雪

核心代碼如下：

上面的css是分開(kāi)寫(xiě)的，我們可以合在一起寫(xiě)，上面的代碼等價(jià)于如下：

例題：西湖春天

需要注意的地方

1、塊盒子要左右排列，將左右排列的盒子全部左浮動(dòng)

2、塊盒子的邊界左自動(dòng)，右自動(dòng)是將盒子居中

3、文字的盒子向下移動(dòng)30px，方法有三種

a)第一種：以part4為標(biāo)準(zhǔn)，使用padding-top:30px;b)第二種：以wenzi為標(biāo)準(zhǔn)，使用margin-top:30px c)第三種：以wenzi為標(biāo)準(zhǔn)，使用padding-top:30px

4、內(nèi)減模式

a)默認(rèn)情況下，盒子的尺寸是外加模式，盒子實(shí)際寬度=盒子的寬度+填充+邊框粗細(xì)。所以很多情況下，指定了填充以后，盒子尺寸會(huì)變大，解決方法：我們可以使用內(nèi)減模式，就是指定盒子的寬度就是總寬度，如果指定填充，盒子中內(nèi)容的寬度-填充=實(shí)際內(nèi)容的寬度。b)代碼：box-sizing:border-box;

5、將圖片居中

a)第一種方法：part1的text-align:center;b)第二種方法：img也是一個(gè)盒子，塊盒子的左自動(dòng)，右自動(dòng)是居中。

#content #center #part1 img{ margin-left:auto;margin-right:auto;display:block;/*如果不是塊顯示，左自動(dòng)右自動(dòng)不居中*/ } 完整代碼