第一篇：黑马程序员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;/*如果不是块显示，左自动右自动不居中*/ } 完整代码