CSS基础：6天补充知识点与大型案例教学——第六天内容.pdfVIP

第六天内容

一.补充margin:

１两个盒子并列关系，上面盒子的下margin与下面盒子上margin

会发重合现象。

２margin的塌陷：

如果两个父子级关系的盒子（父盒子没有边框），给子盒子设置margin-top,

父盒子也会跟着子盒子一起向下移动。

1.0给父盒子加边框

2.0给父盒子添加属性overflow

3.0给子盒子加浮动div

4.0把子盒子的显示方式改为inline-block.

二.清除浮动：

浮动对页面的影响：有很多时候在进行页面布局的时候不了解盒子将来

到底有多高，所以我们不会将盒子的高度设置死，将来在父盒子如果一旦发生

浮动，就会对页面的布局造成影响，须清除浮动。

１额外法：

要清除的位置加入一个额外div，在这个div中设置一个属性

clear:both;

２给父元素设置属性：overflow:

给要清除浮动的盒子设置overflow：hidden;将来如果和定位一起使用会

发生。

３使用伪元素清除：

.clearfix:after{

content:””;

height:0;

line-height:0;

dispaly:block;

visibility:hidden;

clear:both

}

.clearfix{

zoom:1;

}

回家以后可以上一下新浪网，通过找到css文件去看看新浪中是怎么清

除浮动的（直接在源码是ctrl+f，查找clearfix）

４使用双伪元素：

.clearfix:after,.clearfix:before{

content:“”;

disy:table;

clear:both;

}

.clearfix{

zoom:1;

}

５不算清除浮动方法，但是可以消除浮动对页面的影响：

直接设置盒子的高度。

三.定位：

１静态：static

所有的流的默认都是static

２绝对定位：trbl

a.如果绝对定位的盒子没有父元素：

定位时以body为基准。

b.如果绝对定位的盒子有父元素：

1）但是父元素没有定位：

还是以body为基准

2）父元素有定位：

是以父元素为基准（只要是父级的都可以）

c.绝对定位以后会脱离流

d绝对定位以后会影响元素的显示方式（inline-block）

总结：看脸型。

３相对定位：

a.定位的位置是相对于它之前所在的位置

b.相对定位以后的元素不会脱离流

c.相对定位以后的元素不会影响元素的显示方式;

总结：想当年型。

口诀：子绝父相。