CSS（3）--浮动

最新推荐文章于 2024-07-19 15:50:46 发布

zxy7857

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量76

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/zxyccm/article/details/126819664

版权

浮动

块级元素：独占一行 h1-h6 p div 列表…
行内元素：不独占一行 span a img strong…
行内元素可以被包含在块级元素中，反之则不可以

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
<!--block 块元素
    inline 行内元素
    inline-block 是块元素 但是可以内联，在一行
-->
    div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    display: inline;
    }
    span{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: inline-block;
    }
</style>

<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>

父级边框塌陷的问题

clear:right; 右侧不能有浮动元素
clear:left; 左侧不能有浮动元素
clear：both; 两侧都不允许有浮动元素
clear:none; 什么都没有，随便浮动

解决方案：

增加父级元素的高度

优：简单
缺：元素假设有了固定的高度就会被限制

#father{
    border: 1px #000 solid;
    height: 800px;
}

浮动元素后增加一个空的div标签，清除浮动

优：简单
缺：代码中尽量避免空div

<div class = "clear"></div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}

overflow溢出问题

优：简单
缺：下拉的一些场景避免使用

文本超出高度，在父级元素中增加一个overflow属性解决溢出问题
overflow:hidden; 隐藏
overflow:sroll; 滚动条

父类添加一个伪类：after（推荐）

写法稍微复杂一点，但没有副作用，推荐使用

#father:after{
    content: '';
    display: block;
    clear: both;
}

定位

1.相对定位

相对与自己原来的位置进行指定的偏移，仍在指定文档流中，原来的位置会被保留
position属性
上top左left下bottom右right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        body{
        padding: 20px;
        }

        div{
        margin: 10px;
        padding: 5px;
        font-size: 12px;
        line-height: 25px;
        }

        #father{
        border: 1px solid #0000ff;
        }

        #first{
        background-color: #888888;
        border: 1px dashed #ff0000;
        position: relative; /* 相对定位:上下左右 */
        top: -20px;
        }

        #second{
        background-color: #999966;
        border: 1px dashed #00ff00;
        }

        #third{
        background-color: #227777;
        border: 1px dashed #ff00ff;
        position: relative;
        bottom: 10px;
        }
    </style>

</head>
<body>

<div id="father">

    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>


</div>

</body>
</html>

方块定位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box{
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 2px solid red;
        }

        a{
        width: 100px;
        height: 100px;
        text-decoration: none;
        background: #ffa1f2;
        line-height: 100px;
        text-align: center;
        color: white;
        display: block;
        }
        a:hover{
        background: #47a4ff;
        }
        .a2,.a4{
        position: relative;
        left: 200px;
        top: -100px;
        }
        .a5{
        position: relative;
        left: 100px;
        top: -300px;
        }
    </style>

</head>
<body>

<div id="box">

    <a class="a1" href="#">1</a>
    <a class="a2" href="#">2</a>
    <a class="a3" href="#">3</a>
    <a class="a4" href="#">4</a>
    <a class="a5" href="#">5</a>
</div>

</body>
</html>

2.绝对定位

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动
相对与父级或者浏览器的位置进行指定的偏移，决定定位后，不在指定文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        div{
        margin: 10px;
        padding: 5px;
        font-size: 12px;
        line-height: 25px;
        }

        #father{
        border: 1px solid #0000ff;
        padding: 0;
        }

        #first{
        background-color: #888888;
        border: 1px dashed #ff0000;

        }

        #second{
        background-color: #999966;
        border: 1px dashed #00ff00;
        position: absolute;
        right: 30px;
        }

        #third{
        background-color: #227777;
        border: 1px dashed #ff00ff;

        }
    </style>

</head>
<body>

<div id="father">

    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>


</div>

</body>
</html>

3.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
        height: 1000px;
        }
<!--   absolute:绝对定位，相对于浏览器     -->
        div:nth-of-type(1){
        width: 100px;
        height: 100px;
        background: #ff0000;
        position: absolute;
        right: 0;
        bottom: 0;
        }
<!--   fixed:固定定位，一直不动     -->
        div:nth-of-type(2){
        width: 50px;
        height: 50px;
        background: yellow;
        position: fixed;
        right: 0;
        bottom: 0;
        }
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

4. Z-index

Z-index层级：默认为0，为最底层，数字越大越在上层，越容易显现
opacity属性：背景透明度，越小越透明，1就不透明了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        #content{
        width: 198px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        line-height: 25px;
        font-size: 12px;
        border: 1px solid #000;
        }
        ul,li{
        padding: 0px;
        margin: 0px;
        list-style: none;
        }
<!--   父级元素相对定位    -->
        #content ul{
        position: relative;
        }
        .tiptext,.tipbg{
        position: absolute;
        width: 198px;
        height: 25px;
        top: 200px;
        }
        .tiptext{
<!--   层级     -->
<!--   z-index: 0;-->
        color: white;
        }
        .tipbg{
        background: #ff0000;
        opacity: 0.3;
        }
    </style>

</head>
<body>

<div id="content">
    <ul>
        <li><img src="防疫封面.png"></li>
        <li class="tiptext">防疫科普</li>
        <li class="tipbg"></li>
        <li>时间 2022.9.12</li>
        <li>地点</li>
    </ul>
</div>

</body>
</html>