CSS基础知识(五)

解决高度塌陷一:

BFC:1.开启BFC元素不会被浮动元素覆盖

    2.开启BFC元素可以包含浮动的元素

    3.父元素的垂直外边距不会和子元素重叠

如何开启BFC:

  1.设置元素浮动

  2.设置元素相对定位

  3.设置元素为inline-block

  4.将元素overflow设置为一个非visble的值

将overflow设置为hidden是副作用最小的开启BFC的方式

#####IE6及以下游览器不支持BFC,

使用haslayout

zoom:1(放大,原始大小是1)

解决高度塌陷二:

可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的

然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用

使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构

解决高度塌陷三(clearfix):

通过after伪类向元素最后一个添加一个空白的块元素,然后对其清除浮动,与div的原理相同,这是我们最推荐使用的方式,几乎无副作用

语法:  .clearfix:after{

content:""

display:block;

clear:both;

}

在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理

v                                                         

导航条:

通过设置百分比来设置数量

清除浮动:

语法:clear

可选值:1.none，默认值，不清除浮动

2.left，清除左侧浮动元素对当前元素的影响

3.right，清除右侧浮动元素对当前元素的影响

4.both，清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动

相对定位:相对于自身原来位置进行定位

语法:  position:relative

可选值:1.static：默认值，元素没有开启定位

2.relative：开启元素的相对定位

3.absolute：开启元素的绝对定位

4.fixed：开启元素的固定定位（也是绝对定位的一种）

当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量

left：元素相对于其定位位置的左侧偏移量

right：元素相对于其定位位置的右侧偏移量

top：元素相对于其定位位置的上边的偏移量

bottom：元素相对于其定位位置下边的偏移量

通常偏移量只需要使用两个就可以对一个元素进行定位，

一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

绝对定位:离他最近的父元素进行定位,

语法:position:absolute

当position属性值设置为absolute时，则开启了元素的绝对定位

1.开启绝对定位，会使元素脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位）

如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

4.绝对定位会使元素提升一个层级

5.绝对定位会改变元素的性质：

内联元素变成块元素，

块元素的宽度和高度默认都被内容撑开

相对不脱离文档流,绝对脱离文档流

固定定位:永远固定在游览器窗口进行定位

语法:  position:fixed

固定定位是特殊的绝对定位,不同之处是:1.固定定位永远都会相对于浏览器窗口进行定位

    2.固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

注意:IE6不支持固定定位