Web前端-css6--溢出和定位

                                                    溢 出

内容溢出：

        当标签载体的大小小于当前承载的内容，内容就会溢出，默认是保障宽度，高度溢出

       overflow：
                visible    默认
                scroll    滚动  当内容大于载体的时候 不让内容展出，在边框的右边会出现滚动条
                hidden     隐藏  当内容大于载体  多余的部分 隐藏不可见   还有快级格式上下文的作用
                auto      自动   当载体大于内容的时候没有滚动条，当载体小于内容的时候则会自动添加滚动条
 

 <style>
        div{
            border: 1px solid #000;
            background-color: #f00;
            width: 50%;
            height: 200px;
            overflow: auto;
        }
        
        nav{
            width: 400px;
            height: 200px;
            background-color: #0ff;
            border: 1px solid #000;
        }
    </style>

                                                   定位

 定位：

        也是改变元素标签在页面中的位置问题

        定位：
            相对定位：想对于自己没有定位之前的位置移动

 <style>
        
        div,nav{
            width: 200px;
            height: 200px;
            background-color: #f0f;
            border: 1px solid #000;
        }
        div{
            background-color: #0ff;
            position: relative;
            bottom: -10px;
            /*left: -50px;*/
        }
        p{
            height: 1500px;
            background-color: #ccc;
        }
        
    </style>

            绝对定位： 相对于有定位为的父元素们定位，若父元素们都没有定位则相对于body定位，若多个父元素都有定位，
                       则相对于最近的那个父元素定位

 当我们使用  绝对定位的时候就会出现多层效果

    有没有调节层级的顺序

    z-index  调节层级  z-index 的值越大  层接就越高 也就越在最上面
               在相同的 z-index 值下  后的层级会压住先写的层级

z-index只有子压父 没有父压子

               注意： 一般不适用相同的z-index
 

 <style>
        div{
            border: 1px solid #000;
        }
        .box{
            width: 800px;
            height: 500px;
            background-color: #f00;
            margin: auto;
            position: relative;
        }

        .box1{
            width: 500px;
            height: 400px;
            background-color: #ff0;
            margin: 50px auto;
            position: absolute;
        }
        .tag{
            width: 200px;
            height: 200px;
            background-color: #0ff;
            /*定位  绝对*/

            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>

                       使用注意：
                               一般在使用 绝对定位的时候  父元素都使用的是 相对定位
                                子绝  父相
            固定定位：
                    固定定位： 相对于浏览器的可视窗口来定位的
                               通过四个方向值来标注我们当前要显示的内容在视口中哪里

#tag{
            width: 100%;
            height: 320px;
            background-image: url("image1/t2.png");
            background-size: cover;
            position: fixed;
            bottom: 0;
            left: 0;

                    在使用固定定位的时候设置广告效果
                               部分：  使用方向值调节即可，若让当前的广告永远都停留在最底部的时候建议使用bottom
                               通体： 在设置通体广告样式的时候要注意

 

定位后的特点

 一个行内元素的宽高生效方式：
         1 使用dispalay

         2  脱离当前文档流
             1浮动
             2定位
                 但是：相对定位不生效