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

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

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

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

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

核心代碼如下：

上面的css是分開寫的，我們可以合在一起寫，上面的代碼等價于如下：

例題：西湖春天

需要注意的地方

1、塊盒子要左右排列，將左右排列的盒子全部左浮動

2、塊盒子的邊界左自動，右自動是將盒子居中

3、文字的盒子向下移動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)情況下，盒子的尺寸是外加模式，盒子實際寬度=盒子的寬度+填充+邊框粗細(xì)。所以很多情況下，指定了填充以后，盒子尺寸會變大，解決方法：我們可以使用內(nèi)減模式，就是指定盒子的寬度就是總寬度，如果指定填充，盒子中內(nèi)容的寬度-填充=實際內(nèi)容的寬度。b)代碼：box-sizing:border-box;

5、將圖片居中

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

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