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

當父元素無法測定子元素的高度

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

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

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

核心代碼如下：

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

例題：西湖春天

需要注意的地方

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

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

3、文字的盒子向下移動30px，方法有三種

a)第一種：以part4為標準，使用padding-top:30px;b)第二種：以wenzi為標準，使用margin-top:30px c)第三種：以wenzi為標準，使用padding-top:30px

4、內減模式

a)默認情況下，盒子的尺寸是外加模式，盒子實際寬度=盒子的寬度+填充+邊框粗細。所以很多情況下，指定了填充以后，盒子尺寸會變大，解決方法：我們可以使用內減模式，就是指定盒子的寬度就是總寬度，如果指定填充，盒子中內容的寬度-填充=實際內容的寬度。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;/*如果不是塊顯示，左自動右自動不居中*/ } 完整代碼