4.CSS第二次课.pptVIP

SCWCD 进阶 CSS第二次课 CSS盒模型 详细见课堂案例——box.html CSS盒模型 块级元素和margin的计算方式与行内元素margin的计算方式不一样。 margin的背景色是父级容器的背景色，padding的背景色是自身的背景色。 背景图片的纵向高度高于背景色的纵向高度。 width的算法：在Firefox、Opera、Google、IE8、IE7下为：DIV的宽度 = width + padding + border + margin；在ie6下为：DIV的宽度 = width + margin。 盒模型的浮动与定位 由于块级元素的排版是竖型的，难免会为页面排版带来困难，因为CSS提供了浮动与定位的属性用来解决块级元素的排版问题。 首先知道什么是标准流，即元素按照自己本身的属性在页面上的自然排列形式，例如，块级元素和块级元素之间会换行，而行内元素和行内元素之间则不会换行。 而浮动与定位会使元素跳出标准流有另外的一些外在表现。 从课堂案例——float.html开始了解浮动。 盒模型的浮动与定位 从浮动的案例中我们可以总结以下几点： 盒子一旦浮动则会使他脱离标准流，那么其他的盒子将会占据浮动盒子的位置。但是盒子中的内容由于实际上是占用物理空间的，因此内容与内容之间并不会相互覆盖而是依次排开。 浮动后的块级元素会变为行内元素（思考哪些东西变了）。