44 CSS 浮动 模态框 定位 


一.浮动
    float ：
        浮动的盒子不占原来的位置，其下方的盒子会上移
        父盒子会发生塌陷现象。同一级盒子right浮动，同级左边的盒子需要左浮动，right浮动的盒子才能上来
        由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
二.定位
    relative : 设置相对定位的盒子，相对自己原来的位置移动，且占原来的位置。

    absolute：设置绝对定位的盒子，相对于relative属性的父盒子，且不占位置，可以压其他盒子

    fix：
        脱离文档流，根据窗口定位，一般用 返回顶部  顶部标签中设置id 属性或name属性，返回顶部标签a  href="#id属性名或name属性名"
        fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

    总结：
        浮动的盒子或position设置为：absolute | fixed 的盒子，都会出现脱离文档流的现象，父盒子塌陷
        一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。 一个浮动流，一个定位流

三.圆形头像的制作：
    1.父盒子清除   overflow: hidden;
    2.图片属性   max-width ：100%


四.层级：z-index
    1.一般用在模态框
    2.只有定位了的元素，才能有z-index,不管相对定位，绝对定位，固定定位，都可以使用z-index
    3.浮动元素float不能使用z-index


五. 透明度
    1.rgba(0,0,0,透明度值） 作用于该属性 ，如background :rgba(0,0,0,0.3) 只对盒子的背景色有效，对里面文字无效
    2.opacity : 作用于整个元素， 背景和字体  的透明度都有效


六.清除浮动

1.clear
    1.规定元素的哪一侧不允许其他浮动元素。
    2.clear属性只会对自身起作用，而不会影响其他元素
    3.属性
        left   左边不能有浮动的盒子
        right  右边不能有浮动的盒子
        both ：两边不能有浮动的盒子
        none：允许两边有浮动盒子

2.清除浮动的方法：

    1.固定高度0 在父标签里面加一个其他的标签 div3
        如
               <div class="partent">
                   <div class="div1"></div>
                   <div class="div2"></div>
                   <div class="div3"></div>
               </div>
               <div class="div4"></div>

        div1 左浮动  div2 右浮动 ，设置div3 的高度为0 且div3中设置clear：both，防止div4 跑到div1和div2下层


    2.伪元素清除法
        给父级元素设置 ,防止div4 上来
          .clearfix:after {
                      content: "";
                      display: block;
                      clear: both;
                    }

            <div class="partent  clearfix">
                <div class="left"></div>
                <div class="right"></div>
            </div>
             <div class="div4"></div>


    3.overflow:
        visible  不被剪，框外显示
        hidden   被裁剪，多的不显示
        scroll   浏览器  滚动条可以看其他内容
        auto     浏览器通过滚动条显示其他内容
        inherit  跟从父元素浮动效果
!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            height: 200px;
            width: 200px;
            background: red;
        }
        .box2{
            height: 400px;
            width: 400px;
            background: green;
        }
        .box3{
            height: 200px;
            width:100%;
            background: red;
        }
        .box4{
            width: 100px;
            height: 40px;
            background: aqua;
            text-align: center;
            line-height: 40px;
            position: fixed;
            left: 20px;
            bottom: 40px;
        }
    </style>

</head>
<body>
<a href="" name="ding">顶部</a>
<div class="box1">1</div>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4"><a href="#ding">回到顶部</a></div>

</body>
</html>
回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px ;
            border: 1px solid red;
            border-radius: 50%;
            overflow: hidden;
        }
        img{
            max-width: 100%;
            /*max-height: 100%;*/
        }
    </style>
    
</head>
<body>
<div class="box">
    <img src="高圆圆.jpg" alt="">
</div>
</body>
</html>
圆形头像
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background: red;
            float:left;
        }
        .div2{
            width: 200px;
            height: 200px;
            background: green;
            float: right;
        }

        .div3{
            clear:both;
            width: 100%;
            height: 0;
        }
        .div4{
            width: 100%;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="partent">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
    <div class="div4"></div>


</body>
</html>
清除浮动1 父盒子 添加另一个子盒子宽设置为0，clear： both 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background: red;
            float:left;
        }
        .div2{
            width: 200px;
            height: 200px;
            background: green;
            float: right;
        }
        .clearfix:after{
            content:"";
            display:block;
            clear: both;
        }
        .div3{
            width: 100%;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="partent clearfix">
        <div class="div1"></div>
        <div class="div2"></div>

    </div>

    <div class="div3"></div>


</body>
</html>
伪元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 200px;
            width: 150px;
            border:1px solid red;
            /*overflow:visible;*/
            /*overflow: hidden;*/

            overflow: scroll;
            /*overflow: auto;*/
        }
    </style>
</head>
<body>
    <div>
        上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距
        离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上
        离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上
        离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上
        海北京的距离上海北京的距离
    </div>

</body>
</html>
overflow 清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .box1{
            height: 600px;
            width: 100% ;
            background: aqua ;


        }
        .box2{
            width: 100%;
            height: 800px;
            background: rgba(0,0,0,0.3);
            position: absolute;
            top:0;
            left: 0;
            z-index: 1000;
        }
        .box3{
            width: 700px;
            height:400px ;
            border: 1px solid;
            background: white;
            position: fixed;
            top:100px;
            right:300px;
            z-index: 1000;

        }
    </style>
</head>
<body>

    <div class="box1">你好，hello boy</div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>
模态框 z-index 定位的盒子用

 

posted @ 2018-12-17 15:48  冰底熊  阅读(368)  评论(0)  编辑  收藏  举报