web基础.6

一、浮动

• 浮动的目的就是为了让多个块级元素同一行上显示。

• 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

• 元素添加浮动后，浮动的元素脱标,虽然一行内显示,但是display属性为block。

1. 清除浮动

        由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

                准确地说，并不是清除浮动，而是清除浮动后造成的影响。

    清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

2. 清除浮动的办法

 选择器{
    clear:属性值;
}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

2.1  使用after伪元素清除浮动

/* 2.开发中解决清楚浮动的影响 */
        /* code hate cv */
        .clearfix::after{
            content: '.';
            display: block;
            height: 0;
            clear: both;
            
            /* 隐藏 */
            /* 虽然隐藏,仍然占位 */
            visibility: hidden;
        }

2.2 父级添加overflow属性方法

/* 3.给父元素设置overflow:hidden auto scroll */
            overflow: hidden;

2.3  额外标签法

<!-- 3.在浮动末尾添加一个div标签设置clear:both的属性 -->

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

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden/auto/scroll;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

二、元素的定位属性

1. 定位模式(定位的分类)

  在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{
    position:属性值;
}

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位
sticky	粘性定位，基于用户的滚动位置来定位

2.边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

3.  静态定位(static)

        静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

4. 相对定位relative

        相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

        对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

        .father{

            width: 400px;

            height: 300px;

            border: 1px solid red;

        }
        .father .son2{

            width: 100px;

            height: 100px;

            background-color: rgb(157, 157, 187);

            /* 相对定位:相对于自己原来的位置进行定位

                没有脱离标准流*/

            position: relative;

            left: 100px;

            top:80px;

        }

注意：

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。

2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

   就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

5. 绝对定位absolute

        绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，不占位置。

5.1 父级没有定位

/* 1.父元素如果没有设置定位,那么相对于body(文档进行定位) */

            /* 脱离标准流*/

5.2  父级有定位

        绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

 .father{
            width: 400px;
            height: 300px;   /* 比较两种定位时记得取消 */
            border: 1px solid red;
            margin: 50px auto;
            position: relative;

        }

        .father div{
            width: 100px;
            height: 100px;
        }

        .father .son1{
            background-color: blue;
        }
        .father .son2{
            background-color: rgb(157, 157, 187);
             /* 绝对定位 */
            /* 1.父元素如果没有设置定位,那么相对于body(文档进行定位) */
            /* 脱离标准流*/ 
            /* 2.父元素设置定位,相对于父元素进行定位 */
            position: absolute;
            left: 100px;
            top:80px;
        }
        .father .son3{
            background-color: pink;
        }

5.3  子绝父相

• 子绝父相就是指子元素设置绝对定位，而父元素设置相对定位。

• 换句话说：如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。

因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

这就是子绝父相的由来。

        .father{
            width:200px;
            height: 300px;
            margin: 50px auto;
            border: 1px solid red;
            position: relative;
        }
        .father .son1{
            width: 80px;
            height: 80px;
            background-color: blue;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 80px;
            border-radius: 50%;
            position: absolute;
            right: 20px;
            bottom: 30px;
        }

6. 固定定位fixed

         固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。

固定定位有两点：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。

2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

 /* 固定定位:相对于浏览器进行定位
            脱离标准流 */
        img{
            position: fixed;
            right: 50px;
            bottom: 100px;

        }

7. 绝对定位的盒子水平/垂直居中

    普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了。  

    .father{
            width: 300px;
            height: 250px;
            border: 1px solid red;
            margin: 0 auto;
            /* 子绝父相 */
            position: relative;
        }
        .son{
            width:100px;
            height: 100px;
            background-color: blue;
            /* 绝对定位 */
            position: absolute;
            left: 50%;
            top: 50%;
            /* 再往上和左移动自身的一半 */
            margin-top: -50px;
            margin-left: -50px;
        }

8.  叠放次序（z-index）

     当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。         

        .father{
            width: 400px;
            height: 500px;
            margin: 100px auto;
            border: 1px solid red;
            position: relative;
        }
        .father div{
            width: 100px;
            height: 100px;
            position: absolute;
        }
        /* z-index的默认属性值是0,取值越大,定位元素在层叠元素越居上  
            注意点:z-index在position设置时才可以使用,不然无效 */
            /* position:relative absolute fixed*/

        .father .son1{
            background-color: blue;
            left: 0;
            top: 0;
            z-index: 3;
           /* z-index: 999999; 设置在最上层 */
        }
        .father .son2{
            background-color: rgb(157, 157, 187);
            left: 30px;
            top: 30px;
            z-index: 2;
        }
        .father .son3{
            background-color: pink;
            left: 60px;
            top: 60px;
            z-index: 1;
        }

未设置z-index时 

 

设置z-index后

 

注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

2. 如果取值相同，则根据书写顺序，后来居上。

3. 后面数字一定不能加单位。

4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）