CSS基础整合4

【文档流】

元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父级元素的边框换行。

【浮动布局】

float:left  |  right  

元素浮动后不占据原来的位置（脱标，可看作飞起来了）

浮动的盒子在一行上显示

行内元素（span）浮动之后转化为行内块元素（但不推荐使用，转行内块最好还是用：display：inline-block；）

【浮动的作用】

1.文本绕图

  让图片（img）浮动，文字不会在它后面，而是会环绕。

2.制作导航

  使li浮动，可以在一行显示

3.网页布局

【清除浮动】

当父盒子没有定义高度，嵌套的盒子浮动后，下边的元素发生位置错误。

清除浮动不是不用浮动，而是清除浮动产生的不利影响。

方法：clear：left  |  right  | both；

1.额外标签法：在最后一个浮动元素后添加标签。

   <div style="clear:both;"></div>

2.给父级元素使用overflow：hidden；

  当有内容出了盒子，不能使用这个方法。

3.伪元素清除浮动

  .clearfix：after{

    content：“.”；

    display：block；

    height：0；

    line-height：0；

    visibility：hidden；

    clear：both；

}

兼容IE浏览器：

.clearfix{

  zoom：1；

}

【CSS初始化】直接去网站复制源代码

【overflow属性】

  overflow：visible； 默认值，内容不会被修剪，会呈现在元素框之外

  overflow：hidden； 内容会被修剪，并且其其余内容是不可见的

  overflow：scroll； 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容，不管内容出不出都设滚动条

  overflow：auto；  如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

【定位】

  定位的方向：left  | right  | top|  bottom

  position：static；  静态定位，默认值，就是文档流

  position：absolute； 绝对定位

   特点：1.元素使用后不占据原来的位置，会脱标；

                   left：100px； 向左走100px

                   bottom：100px； 向下走100px

              2.元素使用绝对定位，位置是从浏览器出发

              3.嵌套的盒子，父盒子没有使用定位，子盒子的位置还是从浏览器出发

              4.嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子的位置是从父盒子出发

              5.给行内元素使用绝对定位之后，转换为行内块元素

position：relative； 相对定位

  特点：1.使用相对定位，位置从自身出发

            2.不脱标，还占据原来的位置

            3.子绝父相（父元素相对定位（不脱标），子元素绝对定位（会脱标））

            4.行内元素使用相对定位不能转行内块元素

position：fixed； 固定定位

    固定定位之后不占据原来的位置，会脱标；位置从浏览器出发；

    元素使用固定定位之后会转化成行内块元素